web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

extract more constants into less variables

Browse Source
This commit is contained in:
ansuz 2017-01-03 12:19:07 +01:00
parent 27d5559b0c
commit 7b87213ec3
6 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
customize.dist/src/less/bar.less
View File

@ -30,18 +30,18 @@
} }
.big { .big {
@media screen and (max-width: 800px) { @media screen and (max-width: @media-not-big) {
display: none; display: none;
} }
@media screen and (min-width: 801px) { @media screen and (min-width: @media-not-small) {
display: inline-block; display: inline-block;
} }
} }
.small { .small {
@media screen and (max-width: 800px) { @media screen and (max-width: @media-not-big) {
display: inline-block; display: inline-block;
} }
@media screen and (min-width: 801px) { @media screen and (min-width: @media-not-small) {
display: none; display: none;
} }
img { img {

2
customize.dist/src/less/loading.less
View File

@ -15,7 +15,7 @@
.cryptofist { .cryptofist {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media screen and (max-height: 450px) { @media screen and (max-height: @media-short-screen) {
display: none; display: none;
} }
} }

7
customize.dist/src/less/mixins.less
View File

@ -27,3 +27,10 @@
line-height: @n * 1.1vw; 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 */
}

26
customize.dist/src/less/toolbar.less
View File

@ -1,4 +1,5 @@
@import "./variables.less"; @import "./variables.less";
@import "./mixins.less";
.unselectable { .unselectable {
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -11,10 +12,7 @@
.toolbar-container { .toolbar-container {
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif; font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */ .two-part-gradient(@toolbar-gradient-start, @toolbar-gradient-end);
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 */
.cryptpad-toolbar { .cryptpad-toolbar {
select { select {
box-sizing: border-box; box-sizing: border-box;
@ -137,7 +135,7 @@
text-align: center; text-align: center;
height: 32px; height: 32px;
position: relative; position: relative;
@media screen and (max-width: 400px) { @media screen and (max-width: @media-narrow-screen) {
height: 67px; height: 67px;
} }
.cryptpad-title { .cryptpad-title {
@ -192,10 +190,10 @@
position: absolute; position: absolute;
left: 0px; left: 0px;
height: 32px; height: 32px;
@media screen and (max-width: 400px) { @media screen and (max-width: (@media-short-screen - 1px)) {
top: 35px; top: 35px;
} }
@media screen and (min-width: 401px) { @media screen and (min-width: @media-short-screen) {
top: 0px; top: 0px;
} }
@ -223,18 +221,18 @@
} }
} }
.big { .big {
@media screen and (max-width: 400px) { @media screen and (max-width: @media-narrow-screen) {
display: none; display: none;
} }
@media screen and (min-width: 401px) { @media screen and (min-width: (@media-narrow-screen + 1px)) {
display: inline-block; display: inline-block;
} }
} }
.small { .small {
@media screen and (max-width: 400px) { @media screen and (max-width: @media-narrow-screen) {
display: inline-block; display: inline-block;
} }
@media screen and (min-width: 401px) { @media screen and (min-width: (@media-narrow-screen + 1px)) {
display: none; display: none;
} }
} }
@ -245,10 +243,10 @@
span:not(.cryptpad-lag) { span:not(.cryptpad-lag) {
vertical-align: top; vertical-align: top;
} }
@media screen and (max-width: 400px) { @media screen and (max-width: @media-narrow-screen) {
top: 3em; top: 3em;
} }
@media screen and (min-width: 401px) { @media screen and (min-width: (@media-narrow-screen + 1px)) {
top: 0px; top: 0px;
} }
} }
@ -310,10 +308,8 @@
} }
.cryptpad-toolbar-rightside { .cryptpad-toolbar-rightside {
text-align: right; text-align: right;
//float: right;
} }
.cryptpad-spinner { .cryptpad-spinner {
//float: left;
display: inline-block; display: inline-block;
height: 26px; height: 26px;
margin: 2px; margin: 2px;

10
customize.dist/src/less/variables.less
View File

@ -41,3 +41,13 @@
@alertify-input-fg: @fore; @alertify-input-fg: @fore;
@bg-loading: @base; @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;

6
customize.dist/toolbar.css
View File

@ -8,7 +8,7 @@
} }
.toolbar-container { .toolbar-container {
font: 12px Arial, Helvetica, Tahoma, Verdana, sans-serif; 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 */ /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#f5f5f5, #DDDDDD); background: -o-linear-gradient(#f5f5f5, #DDDDDD);
/* For Opera 11.1 to 12.0 */ /* For Opera 11.1 to 12.0 */
@ -190,12 +190,12 @@
left: 0px; left: 0px;
height: 32px; height: 32px;
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 449px) {
.cryptpad-toolbar-top .cryptpad-link { .cryptpad-toolbar-top .cryptpad-link {
top: 35px; top: 35px;
} }
} }
@media screen and (min-width: 401px) { @media screen and (min-width: 450px) {
.cryptpad-toolbar-top .cryptpad-link { .cryptpad-toolbar-top .cryptpad-link {
top: 0px; top: 0px;
} }