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

CSS refactorings and pad-is-not-pinned work

Browse Source
This commit is contained in:
Caleb James DeLisle
2017-12-07 19:00:13 +01:00
parent 67f8031beb
commit 617c4b6044
20 changed files with 210 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
customize.dist/src/less2/include/alertify.less
View File

@@ -1,6 +1,6 @@
@import (once) "./colortheme-all.less";
@import (once) "./browser.less";
@import (once) "./modal-theme.less";
@import (once) "./variables.less";
.alertify_main () {
@max-z-index: 2147483647;
@@ -21,8 +21,8 @@
@alertify-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-fg;
@alertify_padding-base: @modal_padding;
@alertify_box-shadow: @modal_shadow;
@alertify_padding-base: @variables_padding;
@alertify_box-shadow: @variables_shadow;
// Logs to show that something has happened
// These show only once

2
customize.dist/src/less2/include/colortheme.less
View File

@@ -37,7 +37,7 @@
@colortheme_dropdown-bg-hover: #f1f1f1;
@colortheme_dropdown-bg-active: #e8e8e8;
// Apps
// Apps, these colors are used for customizing the toolbar for the apps.
@colortheme_pad-bg: #1c4fa0;
@colortheme_pad-color: #fff;

4
customize.dist/src/less2/include/modal-theme.less
View File

@@ -1,4 +0,0 @@
// Used in modal.less and alertify.less
@modal_padding: 12px;
@modal_shadow: 0 8px 32px 0 rgba(0,0,0,.4);

10
customize.dist/src/less2/include/modal.less
View File

@@ -1,12 +1,12 @@
@import (once) "./colortheme-all.less";
@import (once) "./modal-theme.less";
@import (once) "./variables.less";
.modal_base() {
font-family: @colortheme_font;
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
box-shadow: @modal_shadow;
box-shadow: @variables_shadow;
a {
color: @colortheme_modal-link;
@@ -31,9 +31,9 @@
.cp-modal {
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
box-shadow: @modal_shadow;
box-shadow: @variables_shadow;
padding: @modal_padding;
padding: @variables_padding;
position: absolute;
top: 15vh; bottom: 15vh;
@@ -71,7 +71,7 @@
position: absolute;
top: 0;
right: 0;
margin: @modal_padding;
margin: @variables_padding;
cursor: pointer;
}
}

297
customize.dist/src/less2/include/toolbar.less
View File

@@ -7,9 +7,12 @@
@import (once) "./icon-colors.less";
@import (once) "./tools.less";
@_cp-toolbar-color-warn: black;
.toolbar_main () {
.toolbar_main (
@color: @colortheme_default-color, // Color of the text for the toolbar
@bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
@barWidth: 600px // width of the toolbar
) {
@toolbar_line-height: 32px;
@toolbar_top-height: 64px;
@@ -52,7 +55,7 @@
}
.cp-toolbar-userlist-drawer {
background-color: @colortheme_default-bg;
background-color: @bg-color;
font: @colortheme_app-font-size @colortheme_font;
min-width: 175px;
width: 175px;
@@ -170,174 +173,51 @@
}
}
.addToolbarColors (@color, @bg-color, @barWidth: 600px) {
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @color;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bgcolor, 8%);
}
&.cp-markdown-help { float: right; }
}
}
.cp-toolbar-userlist-drawer {
background-color: @bgcolor;
// TODO(cjd) This ought to be in a less file for markdown-based editors
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @color;
.cp-toolbar-userlist-drawer-close {
color: @color;
}
h2 {
background-color: darken(@bgcolor, 10%);
color: @color;
}
.cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%);
color: @color;
}
.cp-toolbar-userlist-name-edit {
color: contrast(@color,
lighten(@color, 20%),
darken(@color, 20%));
background: transparent;
&:hover {
color: @color;
}
}
.cp-toolbar-userlist-friend {
&:hover {
color: darken(@color, 15%);
}
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bg-color, 8%);
}
&.cp-markdown-help { float: right; }
}
.cp-toolbar {
background-color: @bgcolor;
}
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
color: @color;
.cp-toolbar-userlist-drawer-close {
color: @color;
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
}
h2 {
background-color: darken(@bg-color, 10%);
color: @color;
}
.cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%);
color: @color;
}
.cp-toolbar-userlist-name-edit {
color: contrast(@color,
lighten(@color, 20%),
darken(@color, 20%));
background: transparent;
&:hover {
color: @color;
}
.cp-toolbar-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
color: @_cp-toolbar-color-warn;
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: lighten(@bgcolor, 8%);
button:hover, button.cp-toolbar-button-active {
background-color: @bgcolor;
}
}
.cp-toolbar-rightside {
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.cp-pad-not-pinned {
padding-left: 20px;
font-size: @colortheme_app-font-size;
color: @_cp-toolbar-color-warn;
a {
font-size: @colortheme_app-font-size;
font-weight: bold;
color: @_cp-toolbar-color-warn;
&:hover {
text-decoration: underline;
}
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
transition: all 0.15s;
color: @color;
}
.cp-toolbar-title-editable {
cursor: text;
}
}
.cp-toolbar-title-save {
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
&:hover {
background: darken(@bgcolor, 5%);
}
}
input {
border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%);
color: @color;
}
.cp-dropdown-content.cp-dropdown-left a {
color: black;
}
}
}
&.cp-app-pad {
@bgcolor: @colortheme_pad-bg;
@color: @colortheme_pad-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-code {
@bgcolor: @colortheme_code-bg;
@color: @colortheme_code-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-slide {
@bgcolor: @colortheme_slide-bg;
@color: @colortheme_slide-color;
.addToolbarColors(@color, @bgcolor, 700px);
}
&.cp-app-poll {
@bgcolor: @colortheme_poll-bg;
@color: @colortheme_poll-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-whiteboard {
@bgcolor: @colortheme_whiteboard-bg;
@color: @colortheme_whiteboard-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-drive {
@bgcolor: @colortheme_drive-bg;
@color: @colortheme_drive-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-file {
@bgcolor: @colortheme_file-bg;
@color: @colortheme_file-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-contacts {
@bgcolor: @colortheme_friends-bg;
@color: @colortheme_friends-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-settings {
@bgcolor: @colortheme_settings-bg;
@color: @colortheme_settings-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-profile {
@bgcolor: @colortheme_profile-bg;
@color: @colortheme_profile-color;
.addToolbarColors(@color, @bgcolor);
}
&.cp-app-todo {
@bgcolor: @colortheme_todo-bg;
@color: @colortheme_todo-color;
.addToolbarColors(@color, @bgcolor);
.cp-toolbar-userlist-friend {
&:hover {
color: darken(@color, 15%);
}
}
}
.cp-toolbar {
@@ -355,12 +235,8 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
//background-color: #BBBBFF;
background-color: @colortheme_default-bg;
color: @colortheme_default-color;
background-color: @bg-color;
color: @color;
.fa {
font: normal normal normal 14px/1 FontAwesome;
@@ -487,6 +363,56 @@
}
}
}
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
color: @color;
}
.cp-toolbar-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
color: @warn-color;
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: lighten(@bg-color, 8%);
button:hover, button.cp-toolbar-button-active {
background-color: @bg-color;
}
}
.cp-toolbar-rightside {
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
transition: all 0.15s;
color: @color;
}
.cp-toolbar-title-editable {
cursor: text;
}
}
.cp-toolbar-title-save {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
&:hover {
background: darken(@bg-color, 5%);
}
}
input {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
}
.cp-dropdown-content.cp-dropdown-left a {
color: black;
}
}
.cp-toolbar-top {
@@ -578,6 +504,35 @@
padding: 5px 5px;
height: 40px;
}
.cp-pad-not-pinned {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
align-self: right;
padding-left: 20px;
padding-left: 5px;
font-size: @colortheme_app-font-size;
color: @warn-color;
.cp-pnp-msg {
padding-left: 5px;
a {
font-size: @colortheme_app-font-size;
font-weight: bold;
color: @warn-color;
&:hover {
text-decoration: underline;
}
}
@media screen and (max-width: (@browser_media-not-big)) {
display: none;
}
}
@media screen and (max-width: (@browser_media-not-big)) {
overflow: visible;
}
}
}
.cp-toolbar-link, .cp-toolbar-new {
font-size: 48px;

6
customize.dist/src/less2/include/variables.less
View File

@@ -1,3 +1,9 @@
// This is a file for generic constants which we didn't want to hardcode everywhere.
// However, unlike colortheme, customizing these variables will cause breakage.
// Elements size
@variables_bar-height: 32px;
// Used in modal.less and alertify.less
@variables_padding: 12px;
@variables_shadow: 0 8px 32px 0 rgba(0,0,0,.4);