From 7b87213ec3293536b8c57c8ed78bcc82f5c1fdb3 Mon Sep 17 00:00:00 2001 From: ansuz Date: Tue, 3 Jan 2017 12:19:07 +0100 Subject: [PATCH] extract more constants into less variables --- customize.dist/src/less/bar.less | 8 ++++---- customize.dist/src/less/loading.less | 2 +- customize.dist/src/less/mixins.less | 7 +++++++ customize.dist/src/less/toolbar.less | 26 +++++++++++--------------- customize.dist/src/less/variables.less | 10 ++++++++++ customize.dist/toolbar.css | 6 +++--- 6 files changed, 36 insertions(+), 23 deletions(-) diff --git a/customize.dist/src/less/bar.less b/customize.dist/src/less/bar.less index 93d416288..b280e53d6 100644 --- a/customize.dist/src/less/bar.less +++ b/customize.dist/src/less/bar.less @@ -30,18 +30,18 @@ } .big { - @media screen and (max-width: 800px) { + @media screen and (max-width: @media-not-big) { display: none; } - @media screen and (min-width: 801px) { + @media screen and (min-width: @media-not-small) { display: inline-block; } } .small { - @media screen and (max-width: 800px) { + @media screen and (max-width: @media-not-big) { display: inline-block; } - @media screen and (min-width: 801px) { + @media screen and (min-width: @media-not-small) { display: none; } img { diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less index aa2ec3348..bf719e587 100644 --- a/customize.dist/src/less/loading.less +++ b/customize.dist/src/less/loading.less @@ -15,7 +15,7 @@ .cryptofist { margin-left: auto; margin-right: auto; - @media screen and (max-height: 450px) { + @media screen and (max-height: @media-short-screen) { display: none; } } diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less index 48abd34a0..8765d7925 100644 --- a/customize.dist/src/less/mixins.less +++ b/customize.dist/src/less/mixins.less @@ -27,3 +27,10 @@ line-height: @n * 1.1vw; } +.two-part-gradient (@start, @end) { + background: -webkit-linear-gradient(@start, @end); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(@start, @end); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(@start, @end); /* For Firefox 3.6 to 15 */ + background: linear-gradient(@start, @end); /* Standard syntax */ +} + diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index af45fe057..21182b991 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -1,4 +1,5 @@ @import "./variables.less"; +@import "./mixins.less"; .unselectable { -webkit-touch-callout: none; @@ -11,10 +12,7 @@ .toolbar-container { font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif; - background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */ - background: -o-linear-gradient(#f5f5f5, #DDDDDD); /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient(#f5f5f5, #DDDDDD); /* For Firefox 3.6 to 15 */ - background: linear-gradient(#f5f5f5, #DDDDDD); /* Standard syntax */ + .two-part-gradient(@toolbar-gradient-start, @toolbar-gradient-end); .cryptpad-toolbar { select { box-sizing: border-box; @@ -137,7 +135,7 @@ text-align: center; height: 32px; position: relative; - @media screen and (max-width: 400px) { + @media screen and (max-width: @media-narrow-screen) { height: 67px; } .cryptpad-title { @@ -192,10 +190,10 @@ position: absolute; left: 0px; height: 32px; - @media screen and (max-width: 400px) { + @media screen and (max-width: (@media-short-screen - 1px)) { top: 35px; } - @media screen and (min-width: 401px) { + @media screen and (min-width: @media-short-screen) { top: 0px; } @@ -223,18 +221,18 @@ } } .big { - @media screen and (max-width: 400px) { + @media screen and (max-width: @media-narrow-screen) { display: none; } - @media screen and (min-width: 401px) { + @media screen and (min-width: (@media-narrow-screen + 1px)) { display: inline-block; } } .small { - @media screen and (max-width: 400px) { + @media screen and (max-width: @media-narrow-screen) { display: inline-block; } - @media screen and (min-width: 401px) { + @media screen and (min-width: (@media-narrow-screen + 1px)) { display: none; } } @@ -245,10 +243,10 @@ span:not(.cryptpad-lag) { vertical-align: top; } - @media screen and (max-width: 400px) { + @media screen and (max-width: @media-narrow-screen) { top: 3em; } - @media screen and (min-width: 401px) { + @media screen and (min-width: (@media-narrow-screen + 1px)) { top: 0px; } } @@ -310,10 +308,8 @@ } .cryptpad-toolbar-rightside { text-align: right; - //float: right; } .cryptpad-spinner { - //float: left; display: inline-block; height: 26px; margin: 2px; diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index fb30ff6ed..eb5df4636 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -41,3 +41,13 @@ @alertify-input-fg: @fore; @bg-loading: @base; + +@media-not-big: 800px; +@media-not-small: 801px; + +@media-short-screen: 450px; +@media-narrow-screen: 400px; + +@toolbar-gradient-start: #f5f5f5; +@toolbar-gradient-end: #DDDDDD; + diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 4d31b6d78..ed3f95e14 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -8,7 +8,7 @@ } .toolbar-container { font: 12px Arial, Helvetica, Tahoma, Verdana, sans-serif; - background: -webkit-linear-gradient(#EEEEEE, #DADADA); + background: -webkit-linear-gradient(#f5f5f5, #DDDDDD); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#f5f5f5, #DDDDDD); /* For Opera 11.1 to 12.0 */ @@ -190,12 +190,12 @@ left: 0px; height: 32px; } -@media screen and (max-width: 400px) { +@media screen and (max-width: 449px) { .cryptpad-toolbar-top .cryptpad-link { top: 35px; } } -@media screen and (min-width: 401px) { +@media screen and (min-width: 450px) { .cryptpad-toolbar-top .cryptpad-link { top: 0px; }