diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index 02310285b..7bdd1caae 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -10,15 +10,16 @@ } .toolbar-container { - .cryptpad-lag { - position: relative; - top: -2px; - } 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 */ + .cryptpad-toolbar { + select { + box-sizing: border-box; + } + } } .cryptpad-toolbar { @@ -37,6 +38,17 @@ float: right; } + .cryptpad-lag { + vertical-align: top; + height: 16px; + width: 16px; + display: inline-block; + margin: 2px 0px; + padding: 5px; + div { + margin: auto; + } + } div { white-space: normal; &.cryptpad-back { @@ -45,11 +57,6 @@ cursor: pointer; color: #000; } - &.cryptpad-lag { - float: left; - line-height: 26px; - margin: 2px 0px; - } } button, select, .rightside-element { @@ -116,6 +123,11 @@ padding-left: 5px; border: 1px solid #A6A6A6; border-bottom-color: #979797; + vertical-align: top; + box-sizing: content-box; + option { + height: 24px; + } } } @@ -229,6 +241,9 @@ .cryptpad-user { position: absolute; right: 0; + span:not(.cryptpad-lag) { + vertical-align: top; + } @media screen and (max-width: 400px) { top: 3em; } @@ -276,9 +291,11 @@ padding: 5px 0px; margin: 5px 0px; font-size: 16px; + white-space: normal; } } button { + white-space: normal; margin: 2px 0px; } } @@ -295,7 +312,7 @@ //float: right; } .cryptpad-spinner { - float: left; + //float: left; display: inline-block; height: 26px; margin: 2px; @@ -310,10 +327,6 @@ .cryptpad-toolbar-username { } .lag { - display: inline-block; - vertical-align: middle; - padding: 0 !important; - margin: 0 5px !important; height: 15px !important; width: 15px !important; border-radius: 50%; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index d5f8bbf57..1814fa993 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -17,9 +17,8 @@ background: linear-gradient(#f5f5f5, #DDDDDD); /* Standard syntax */ } -.toolbar-container .cryptpad-lag { - position: relative; - top: -2px; +.toolbar-container .cryptpad-toolbar select { + box-sizing: border-box; } .cryptpad-toolbar { box-sizing: border-box; @@ -39,6 +38,17 @@ .cryptpad-toolbar a { float: right; } +.cryptpad-toolbar .cryptpad-lag { + vertical-align: top; + height: 16px; + width: 16px; + display: inline-block; + margin: 2px 0px; + padding: 5px; +} +.cryptpad-toolbar .cryptpad-lag div { + margin: auto; +} .cryptpad-toolbar div { white-space: normal; } @@ -48,11 +58,6 @@ cursor: pointer; color: #000; } -.cryptpad-toolbar div.cryptpad-lag { - float: left; - line-height: 26px; - margin: 2px 0px; -} .cryptpad-toolbar button, .cryptpad-toolbar select, .cryptpad-toolbar .rightside-element { @@ -118,6 +123,11 @@ padding-left: 5px; border: 1px solid #A6A6A6; border-bottom-color: #979797; + vertical-align: top; + box-sizing: content-box; +} +.cryptpad-toolbar select option { + height: 24px; } .cryptpad-toolbar-top { display: block; @@ -234,6 +244,9 @@ position: absolute; right: 0; } +.cryptpad-toolbar-top .cryptpad-user span:not(.cryptpad-lag) { + vertical-align: top; +} @media screen and (max-width: 400px) { .cryptpad-toolbar-top .cryptpad-user { top: 3em; @@ -289,8 +302,10 @@ padding: 5px 0px; margin: 5px 0px; font-size: 16px; + white-space: normal; } .cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown button { + white-space: normal; margin: 2px 0px; } .cryptpad-toolbar-leftside button { @@ -303,7 +318,6 @@ text-align: right; } .cryptpad-spinner { - float: left; display: inline-block; height: 26px; margin: 2px; @@ -316,10 +330,6 @@ text-transform: uppercase; } .lag { - display: inline-block; - vertical-align: middle; - padding: 0 !important; - margin: 0 5px !important; height: 15px !important; width: 15px !important; border-radius: 50%; diff --git a/www/common/toolbar.js b/www/common/toolbar.js index c421a31d0..511ee3138 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -84,7 +84,7 @@ define([ id: uid(), 'class': SPINNER_CLS, }); - $container.append($spinner); + $container.prepend($spinner); return $spinner[0]; }; diff --git a/www/pad/inner.html b/www/pad/inner.html index e8e3d0300..1fc7b0cfe 100644 --- a/www/pad/inner.html +++ b/www/pad/inner.html @@ -15,6 +15,7 @@ } #cke_1_top .cryptpad-toolbar { margin-bottom: 1px; + padding: 0px; }