diff --git a/customize.dist/DecorateToolbar.js b/customize.dist/DecorateToolbar.js index b0d5e967b..49a30c79f 100644 --- a/customize.dist/DecorateToolbar.js +++ b/customize.dist/DecorateToolbar.js @@ -10,7 +10,7 @@ define([ var main = function () { var url = window.location.pathname; var isHtml = /\.html/.test(url) || url === '/' || url === ''; - var isPoll = /\/poll\//.test(url) || /\/file\//.test(url); + var isPoll = /\/poll\//.test(url); if (!isHtml && !isPoll) { Messages._applyTranslation(); return; diff --git a/customize.dist/main.css b/customize.dist/main.css index 1d3e3c347..e60adb50f 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -1,3 +1,204 @@ +.alertify-logs > * { + padding: 12px 48px; + color: #fafafa; + font-weight: bold; + font-size: large; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); + border-radius: 1px; +} +.alertify-logs > *, +.alertify-logs > *.default { + background: rgba(0, 0, 0, 0.8); +} +.alertify-logs > *.error { + background: #FF0073; +} +.alertify-logs > *.success { + background: #46E981; + color: #302B28; +} +.alertify { + position: fixed; + background-color: rgba(0, 0, 0, 0.3); + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 99999; +} +.alertify.hide { + opacity: 0; + pointer-events: none; +} +.alertify, +.alertify.show { + box-sizing: border-box; + transition: all 0.33s cubic-bezier(0.25, 0.8, 0.25, 1); +} +.alertify, +.alertify * { + box-sizing: border-box; +} +.alertify .dialog { + padding: 12px; +} +.alertify .dialog, +.alertify .alert { + width: 100%; + margin: 0 auto; + position: relative; + top: 50%; + transform: translateY(-50%); +} +.alertify .dialog > div, +.alertify .alert > div { + background-color: #685d56; + border-radius: 5px; +} +.alertify .dialog > *, +.alertify .alert > * { + width: 400px; + max-width: 95%; + margin: 0 auto; + text-align: center; + padding: 12px; + background: #fff; + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.098), 0 1px 10px 0 rgba(0, 0, 0, 0.084); +} +.alertify .dialog .msg, +.alertify .alert .msg { + padding: 12px; + margin-bottom: 12px; + margin: 0; + text-align: left; +} +.alertify .dialog input:not(.form-control), +.alertify .alert input:not(.form-control) { + background-color: #302B28; + color: #fafafa; + border: 0px; + border-radius: 5px; + margin-bottom: 15px; + width: 100%; + font-size: 100%; + padding: 12px; +} +.alertify .dialog nav, +.alertify .alert nav { + text-align: right; +} +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button), +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { + background-color: transparent; + box-sizing: border-box; + position: relative; + outline: 0; + border: 0; + display: inline-block; + align-items: center; + padding: 0 6px; + margin: 6px 8px; + line-height: 36px; + min-height: 36px; + white-space: nowrap; + min-width: 88px; + text-align: center; + text-transform: uppercase; + font-size: 14px; + text-decoration: none; + cursor: pointer; + color: #fafafa; + border: 1px solid #302B28; + border-radius: 5px; +} +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover, +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover, +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active, +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active { + background-color: rgba(0, 0, 0, 0.15); +} +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus, +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):focus { + border: 1px dotted #302B28; +} +.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner, +.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)::-moz-focus-inner { + border: 0; +} +.alertify .dialog nav button.btn, +.alertify .alert nav button.btn { + margin: 6px 4px; +} +.alertify-logs { + position: fixed; + z-index: 99999; +} +.alertify-logs.bottom, +.alertify-logs:not(.top) { + bottom: 16px; +} +.alertify-logs.left, +.alertify-logs:not(.right) { + left: 16px; +} +.alertify-logs.left > *, +.alertify-logs:not(.right) > * { + float: left; + transform: translate3d(0, 0, 0); + height: auto; +} +.alertify-logs.left > *.show, +.alertify-logs:not(.right) > *.show { + left: 0; +} +.alertify-logs.left > *, +.alertify-logs:not(.right) > *, +.alertify-logs.left > *.hide, +.alertify-logs:not(.right) > *.hide { + left: -110%; +} +.alertify-logs.right { + right: 16px; +} +.alertify-logs.right > * { + float: right; + transform: translate3d(0, 0, 0); +} +.alertify-logs.right > *.show { + right: 0; + opacity: 1; +} +.alertify-logs.right > *, +.alertify-logs.right > *.hide { + right: -110%; + opacity: 0; +} +.alertify-logs.top { + top: 0; +} +.alertify-logs > * { + box-sizing: border-box; + transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + position: relative; + clear: both; + backface-visibility: hidden; + perspective: 1000; + max-height: 0; + margin: 0; + padding: 0; + overflow: hidden; + opacity: 0; + pointer-events: none; +} +.alertify-logs > *.show { + margin-top: 12px; + opacity: 1; + max-height: 1000px; + padding: 12px; + pointer-events: auto; +} a.github-corner > svg { fill: #46E981; color: #302B28; diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less index 494e7c369..1900fead5 100644 --- a/customize.dist/src/cryptpad.less +++ b/customize.dist/src/cryptpad.less @@ -1,4 +1,5 @@ @import "./variables.less"; +@import "./alertify.less"; .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){ @font-face{ diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less index c420bdae1..02310285b 100644 --- a/customize.dist/src/toolbar.less +++ b/customize.dist/src/toolbar.less @@ -9,8 +9,21 @@ user-select: none; } +.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 { box-sizing: border-box; + padding: 0px 6px; .unselectable; @@ -75,6 +88,7 @@ .cryptpad-state { line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */ + float: left; } .rightside-button { @@ -120,9 +134,11 @@ line-height: 32px; } .pencilIcon { - display: none; + //display: none; + margin-left: 11px; &:hover { color: #999; + margin-left: 0px; } span { cursor: pointer; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index 02eeff7e7..d5f8bbf57 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -6,8 +6,24 @@ -ms-user-select: none; user-select: none; } +.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 */ +} +.toolbar-container .cryptpad-lag { + position: relative; + top: -2px; +} .cryptpad-toolbar { box-sizing: border-box; + padding: 0px 6px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -78,6 +94,7 @@ .cryptpad-toolbar .cryptpad-state { line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */ + float: left; } .cryptpad-toolbar .rightside-button { float: right; @@ -120,10 +137,11 @@ line-height: 32px; } .cryptpad-toolbar-top .cryptpad-title .pencilIcon { - display: none; + margin-left: 11px; } .cryptpad-toolbar-top .cryptpad-title .pencilIcon:hover { color: #999; + margin-left: 0px; } .cryptpad-toolbar-top .cryptpad-title .pencilIcon span { cursor: pointer; diff --git a/www/code/inner.html b/www/code/inner.html index ff887e387..d10b7c8c3 100644 --- a/www/code/inner.html +++ b/www/code/inner.html @@ -47,19 +47,6 @@ .CodeMirror { height: 100%; } - .cryptpad-toolbar { - padding: 0px 6px; - } - #cme_toolbox div.cryptpad-lag { - line-height: 24px; - } - #cme_toolbox { - 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(white, #DDDDDD); /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */ - background: linear-gradient(white, #DDDDDD); /* Standard syntax */ - } .CodeMirror-focused .cm-matchhighlight { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); background-position: bottom; @@ -68,7 +55,7 @@
- +