diff --git a/customize.dist/alertify.css b/customize.dist/alertify.css index 616e77239..3839e8964 100644 --- a/customize.dist/alertify.css +++ b/customize.dist/alertify.css @@ -1,6 +1,8 @@ .alertify-logs > * { - padding: 12px 24px; - color: #fff; + 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; } @@ -9,10 +11,11 @@ background: rgba(0, 0, 0, 0.8); } .alertify-logs > *.error { - background: rgba(244, 67, 54, 0.8); + background: #FF0073; } .alertify-logs > *.success { - background: rgba(76, 175, 80, 0.9); + background: #46E981; + color: #302B28; } .alertify { position: fixed; @@ -82,10 +85,6 @@ font-size: 100%; padding: 12px; } -.alertify .dialog input:not(.form-control):focus, -.alertify .alert input:not(.form-control):focus { - outline-offset: -2px; -} .alertify .dialog nav, .alertify .alert nav { text-align: right; @@ -94,7 +93,6 @@ .alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) { background-color: transparent; box-sizing: border-box; - color: #fafafa; position: relative; outline: 0; border: 0; @@ -111,14 +109,19 @@ font-size: 14px; text-decoration: none; cursor: pointer; - border: 1px solid transparent; - border-radius: 2px; + 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, 100, 0, 0.15); + 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 solid rgba(0, 0, 0, 0.1); } .alertify .dialog nav button.btn, .alertify .alert nav button.btn { diff --git a/customize.dist/src/alertify.less b/customize.dist/src/alertify.less index fcff0afcf..a16fe53c3 100644 --- a/customize.dist/src/alertify.less +++ b/customize.dist/src/alertify.less @@ -2,8 +2,12 @@ .alertify-logs { > * { - padding: @padding-base @padding-base * 2; - color: #fff; + padding: @padding-base @padding-base * 4; + color: @fore; + + font-weight: bold; + font-size: large; + box-shadow: @box-shadow; border-radius: @border-radius; &, &.default { @@ -11,10 +15,11 @@ background: rgba(0, 0, 0, .8); } &.error { - background: @danger-color; + background: @danger-color; } &.success { - background: @success-color; + background: @success-color; + color: @success-fore; } } } @@ -92,7 +97,7 @@ font-size: 100%; padding: @padding-base; &:focus { - outline-offset: -2px; + //outline-offset: -2px; } } nav { @@ -103,7 +108,6 @@ background-color: @alertify-btn-bg; box-sizing: border-box; - color: @alertify-btn-fg; position: relative; outline: 0; border: 0; @@ -120,8 +124,10 @@ font-size: 14px; text-decoration: none; cursor: pointer; - border: 1px solid transparent; - border-radius: 2px; + + color: @alertify-btn-fg; + border: 1px solid @base; + border-radius: 5px; &:hover, &:active { background-color: @alertify-btn-bg-hover; @@ -129,7 +135,7 @@ &:focus { // FIXME - //border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid rgba(0, 0, 0, .1); } } diff --git a/customize.dist/src/toolbar.less b/customize.dist/src/toolbar.less new file mode 100644 index 000000000..c934b8afb --- /dev/null +++ b/customize.dist/src/toolbar.less @@ -0,0 +1,83 @@ +@import "./variables.less"; + +.cryptpad-toolbar { + box-sizing: border-box; + + color: #666; + font-weight: bold; + height: 26px; + margin-bottom: -3px; + display: inline-block; + width: 100%; + z-index: 9001; + + a { + float: right; + } + + div { + padding: 0 10px; + height: 1.5em; + line-height: 25px; + height: 22px; + &.rtwysiwyg-back { + padding: 0; + font-weight: bold; + cursor: pointer; + color: #000; + } + } + + button { + height: 100%; + background-color: inherit; + border: 1px solid #A6A6A6; + border-radius: 5px; + margin-right: 5px; + padding-right: 5px; + padding-left: 5px; + } + .rightside-button { + float: right; + cursor: pointer; + } + + .leftside-button { + cursor: pointer; + float: left; + } + + select { + border: 0px; + margin-left: 5px; + margin-right: 5px; + padding-left: 5px; + } +} +.cryptpad-changeName { + float: left; + cursor: pointer; + button { + padding: 0; + margin-right: 5px; + } +} + +.cryptpad-toolbar-leftside { + float: left; + div { + float: left; + } + +} +.cryptpad-toolbar-rightside { + text-align: right; + //float: right; +} +.cryptpad-lag { + float: right; +} +.cryptpad-spinner { + float: left; +} + diff --git a/customize.dist/src/variables.less b/customize.dist/src/variables.less index 5f0c8aa56..9b59651ad 100644 --- a/customize.dist/src/variables.less +++ b/customize.dist/src/variables.less @@ -8,20 +8,22 @@ @cp-red: #FF0073; // remove red @cp-outline: #444; - // alertify things @box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); @padding-base: 12px; -@success-color: rgba(76, 175, 80, .9); -@danger-color: rgba(244, 67, 54, .8); + +@success-color: @cp-green; +@success-fore: @base; +@danger-color: @cp-red; + @text-color: rgba(0, 0, 0, .8); @border-radius: 1px; @alertify-btn-fg: @fore; @alertify-btn-bg: transparent; -@alertify-btn-bg-hover: rgba(0, 100, 0, .15); +@alertify-btn-bg-hover: rgba(0, 0, 0, .15); @alertify-bg: rgba(0, 0, 0, .3); diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css new file mode 100644 index 000000000..66491ee9f --- /dev/null +++ b/customize.dist/toolbar.css @@ -0,0 +1,71 @@ +.cryptpad-toolbar { + box-sizing: border-box; + color: #666; + font-weight: bold; + height: 26px; + margin-bottom: -3px; + display: inline-block; + width: 100%; + z-index: 9001; +} +.cryptpad-toolbar a { + float: right; +} +.cryptpad-toolbar div { + padding: 0 10px; + height: 1.5em; + line-height: 25px; + height: 22px; +} +.cryptpad-toolbar div.rtwysiwyg-back { + padding: 0; + font-weight: bold; + cursor: pointer; + color: #000; +} +.cryptpad-toolbar button { + height: 100%; + background-color: inherit; + border: 1px solid #A6A6A6; + border-radius: 5px; + margin-right: 5px; + padding-right: 5px; + padding-left: 5px; +} +.cryptpad-toolbar .rightside-button { + float: right; + cursor: pointer; +} +.cryptpad-toolbar .leftside-button { + cursor: pointer; + float: left; +} +.cryptpad-toolbar select { + border: 0px; + margin-left: 5px; + margin-right: 5px; + padding-left: 5px; +} +.cryptpad-changeName { + float: left; + cursor: pointer; +} +.cryptpad-changeName button { + padding: 0; + margin-right: 5px; +} +.cryptpad-toolbar-leftside { + float: left; +} +.cryptpad-toolbar-leftside div { + float: left; +} +.cryptpad-toolbar-rightside { + text-align: right; +} +.cryptpad-lag { + float: right; +} +.cryptpad-spinner { + float: left; +}