From e9d420573110a9861d9c42b8fc21515d18fda81c Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Wed, 2 Sep 2015 01:09:02 -0500 Subject: [PATCH] Mobile: Fade edges of fullscreen toolbar --- src/css/simplemde.css | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/src/css/simplemde.css b/src/css/simplemde.css index 4c98093..a012123 100644 --- a/src/css/simplemde.css +++ b/src/css/simplemde.css @@ -66,10 +66,11 @@ .editor-toolbar.fullscreen { width: 100%; - height: 50px; + height: 40px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; + padding-top: 10px; background: #fff; border: 0; position: fixed; @@ -79,6 +80,40 @@ z-index: 9; } +.editor-toolbar.fullscreen::before { + width: 20px; + height: 50px; + background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(125,185,232,0.01) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(125,185,232,0.01))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(125,185,232,0.01) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(125,185,232,0.01) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(125,185,232,0.01) 100%); /* IE10+ */ + background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(125,185,232,0.01) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#037db9e8',GradientType=1 ); /* IE6-9 */ + position: fixed; + top: 0; + left: 0; + margin: 0; + padding: 0; +} + +.editor-toolbar.fullscreen::after { + width: 20px; + height: 50px; + background: -moz-linear-gradient(left, rgba(125,185,232,0.01) 0%, rgba(254,254,255,1) 99%, rgba(255,255,255,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(125,185,232,0.01)), color-stop(99%,rgba(254,254,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(125,185,232,0.01) 0%,rgba(254,254,255,1) 99%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(125,185,232,0.01) 0%,rgba(254,254,255,1) 99%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(left, rgba(125,185,232,0.01) 0%,rgba(254,254,255,1) 99%,rgba(255,255,255,1) 100%); /* IE10+ */ + background: linear-gradient(to right, rgba(125,185,232,0.01) 0%,rgba(254,254,255,1) 99%,rgba(255,255,255,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#037db9e8', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ + position: fixed; + top: 0; + right: 0; + margin: 0; + padding: 0; +} + .editor-toolbar a { display: inline-block; text-align: center;