infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

New colortheme

Browse Source
pull/1/head
yflory 5 years ago
parent e6ce5a55e5
commit 30d802434a
2 changed files with 40 additions and 175 deletions
Show Stats Download Patch File Download Diff File

14
customize.dist/src/less2/include/colortheme.less
Unescape Escape View File

@ -68,36 +68,36 @@
@colortheme_dropdown-bg-active: #e8e8e8; @colortheme_dropdown-bg-active: #e8e8e8;
// Apps, these colors are used for customizing the toolbar for the apps. // Apps, these colors are used for customizing the toolbar for the apps.
@colortheme_pad-toolbar-bg: #eeeeee;
@colortheme_pad-bg: #1c4fa0; @colortheme_pad-bg: #256ad5;
@colortheme_pad-color: #fff; @colortheme_pad-color: #fff;
@colortheme_pad-toolbar-bg: #c1e7ff;
@colortheme_pad-warn: #ffae00; @colortheme_pad-warn: #ffae00;
@colortheme_slide-bg: #e57614; @colortheme_slide-bg: #e57614;
@colortheme_slide-color: #fff; @colortheme_slide-color: #fff;
@colortheme_slide-warn: #005868; @colortheme_slide-warn: #005868;
@colortheme_code-bg: #ffae00; @colortheme_code-bg: #EAA000;
@colortheme_code-color: #000; @colortheme_code-color: #000;
@colortheme_code-warn: #9A37F7; @colortheme_code-warn: #9A37F7;
@colortheme_poll-bg: #006304; @colortheme_poll-bg: #2c9e98;
@colortheme_poll-color: #fff; @colortheme_poll-color: #fff;
@colortheme_poll-help-bg: #bbffbb; @colortheme_poll-help-bg: #bbffbb;
@colortheme_poll-th-bg: #005bef; @colortheme_poll-th-bg: #005bef;
@colortheme_poll-th-fg: #fff; @colortheme_poll-th-fg: #fff;
@colortheme_poll-warn: #ffade3; @colortheme_poll-warn: #ffade3;
@colortheme_whiteboard-bg: #800080; @colortheme_whiteboard-bg: #a72ba7;
@colortheme_whiteboard-color: #fff; @colortheme_whiteboard-color: #fff;
@colortheme_whiteboard-warn: #ffae00; @colortheme_whiteboard-warn: #ffae00;
@colortheme_drive-bg: #0087ff; @colortheme_drive-bg: #0087FF;
@colortheme_drive-color: #fff; @colortheme_drive-color: #fff;
@colortheme_drive-warn: #cd2532; @colortheme_drive-warn: #cd2532;
@colortheme_teams-bg: #0b0061; @colortheme_teams-bg: #4a3bbd;
@colortheme_teams-color: #fff; @colortheme_teams-color: #fff;
@colortheme_teams-warn: #cd2532; @colortheme_teams-warn: #cd2532;

199
customize.dist/src/less2/include/toolbar.less
Unescape Escape View File

@ -16,21 +16,16 @@
@bg-color: @colortheme_default-bg, // color of the toolbar background @bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn // color of the warning text in the toolbar @warn-color: @colortheme_default-warn // color of the warning text in the toolbar
) { ) {
@toolbar-color: @color; @toolbar-color: @cryptpad_text_col;
@toolbar-color-l20: lighten(@color, 20%);
@toolbar-color-d20: darken(@color, 20%);
@toolbar-color-d15: darken(@color, 15%);
@toolbar-bg-color: @bg-color; @toolbar-bg-color: @bg-color;
@toolbar-bg-color-l8: lighten(@bg-color, 8%); @toolbar-bg-color-light: lighten(@bg-color, 30%);
@toolbar-bg-color-l20: lighten(@bg-color, 20%); @toolbar-bg-color-active: lighten(@bg-color, 20%);
@toolbar-bg-color-d5: darken(@bg-color, 5%);
@toolbar-bg-color-d10: darken(@bg-color, 10%); @toolbar-bg-color-d10: darken(@bg-color, 10%);
@toolbar-bg-color-d15: darken(@bg-color, 15%);
@toolbar-warn-color: @warn-color; @toolbar-warn-color: @warn-color;
@toolbar-userlist-name-edit: contrast(@toolbar-color, @toolbar-color-l20, @toolbar-color-d20); @toolbar-userlist-name-edit: @toolbar-color;
}; };
.toolbar_main ( .toolbar_main (
@ -43,29 +38,16 @@
.toolbar_vars(@color, @bg-color, @warn-color); .toolbar_vars(@color, @bg-color, @warn-color);
--toolbar-color: @toolbar-color; --toolbar-color: @toolbar-color;
--toolbar-color-l20: @toolbar-color-l20;
--toolbar-color-d20: @toolbar-color-d20;
--toolbar-color-d15: @toolbar-color-d15;
--toolbar-bg-color: @toolbar-bg-color; --toolbar-bg-color: @toolbar-bg-color;
--toolbar-bg-color-l8: @toolbar-bg-color-l8; --toolbar-bg-color-light: @toolbar-bg-color-light;
--toolbar-bg-color-l20: @toolbar-bg-color-l20; --toolbar-bg-color-active: @toolbar-bg-color-active;
--toolbar-bg-color-d5: @toolbar-bg-color-d5;
--toolbar-bg-color-d10: @toolbar-bg-color-d10; --toolbar-bg-color-d10: @toolbar-bg-color-d10;
--toolbar-bg-color-d15: @toolbar-bg-color-d15;
--toolbar-warn-color: @toolbar-warn-color; --toolbar-warn-color: @toolbar-warn-color;
--toolbar-userlist-name-edit: @toolbar-userlist-name-edit; --toolbar-userlist-name-edit: @toolbar-userlist-name-edit;
@media screen and (max-width: @barWidth) {
.cp-toolbar-rightside {
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.help_main(@color, @bg-color); .help_main(@color, @bg-color);
.notifications_main(); .notifications_main();
.dropdown_main(); .dropdown_main();
@ -87,6 +69,7 @@
} }
.toolbar_vars(); .toolbar_vars();
@toolbar-top-bg: #eeeeee;
@toolbar_line-height: 32px; @toolbar_line-height: 32px;
@toolbar_top-height: 76px; @toolbar_top-height: 76px;
@toolbar_button-font: @colortheme_app-font; @toolbar_button-font: @colortheme_app-font;
@ -105,8 +88,7 @@
.cp-markdown-toolbar { .cp-markdown-toolbar {
height: @toolbar_line-height; height: @toolbar_line-height;
background-color: @toolbar-bg-color-l20; background-color: @colortheme_pad-toolbar-bg;
background-color: var(--toolbar-bg-color-l20);
display: none; display: none;
button { button {
height: @toolbar_line-height !important; height: @toolbar_line-height !important;
@ -116,8 +98,7 @@
.toolbar_button; .toolbar_button;
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
&:hover { &:hover {
background-color: @toolbar-bg-color-l8; background-color: darken(@colortheme_pad-toolbar-bg, 5%);
background-color: var(--toolbar-bg-color-l8);
} }
&.cp-markdown-help { float: right; } &.cp-markdown-help { float: right; }
} }
@ -415,12 +396,6 @@
color: var(--toolbar-color); color: var(--toolbar-color);
} }
} }
.cp-toolbar-userlist-friend {
&:hover {
color: @toolbar-color-d15;
color: var(--toolbar-color-d15);
}
}
} }
.cp-toolbar { .cp-toolbar {
@ -438,18 +413,11 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
/*
// XXX background-color: @toolbar-top-bg;
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
color: @toolbar-color;
color: var(--toolbar-color);
*/
background-color: #ffffff;
color: @toolbar-bg-color; color: @toolbar-bg-color;
color: var(--toolbar-bg-color); color: var(--toolbar-bg-color);
.fa { .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-family: FontAwesome; font-family: FontAwesome;
@ -633,11 +601,6 @@ color: var(--toolbar-bg-color);
color: @toolbar-warn-color; color: @toolbar-warn-color;
color: var(--toolbar-warn-color); color: var(--toolbar-warn-color);
} }
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
color: #FFF; // XXX
}
.cp-dropdown-content.cp-dropdown-left a { .cp-dropdown-content.cp-dropdown-left a {
color: black; color: black;
} }
@ -738,8 +701,8 @@ color: var(--toolbar-bg-color);
align-self: baseline; align-self: baseline;
&:hover { &:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit { .cp-toolbar-title-editable, .cp-toolbar-title-edit {
border: 1px solid @toolbar-bg-color-d15; border: 1px solid @toolbar-bg-color;
border: 1px solid var(--toolbar-bg-color-d15); border: 1px solid var(--toolbar-bg-color);
transition: all 0.15s; transition: all 0.15s;
} }
.cp-toolbar-title-editable { .cp-toolbar-title-editable {
@ -757,8 +720,8 @@ color: var(--toolbar-bg-color);
} }
} }
.cp-toolbar-title-save { .cp-toolbar-title-save {
border: 1px solid @toolbar-bg-color-d15; border: 1px solid @toolbar-bg-color;
border: 1px solid var(--toolbar-bg-color-d15); border: 1px solid var(--toolbar-bg-color);
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
border-collapse: collapse; border-collapse: collapse;
@ -773,8 +736,8 @@ color: var(--toolbar-bg-color);
} }
input { input {
color: @cryptpad_text_col; color: @cryptpad_text_col;
border: 1px solid @toolbar-bg-color-d15; border: 1px solid @toolbar-bg-color;
border: 1px solid var(--toolbar-bg-color-d15); border: 1px solid var(--toolbar-bg-color);
max-width: ~"calc(100% - 40px)"; max-width: ~"calc(100% - 40px)";
//flex: 1; //flex: 1;
vertical-align: middle; vertical-align: middle;
@ -794,26 +757,8 @@ color: var(--toolbar-bg-color);
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
/*
// XXX
color: white;
a {
color: white;
}
transition: all 0.15s;
*/
} }
.cp-toolbar-notifications { .cp-toolbar-notifications {
/*
// XXX
background-color: rgba(0,0,0,0.2);
&:hover {
background-color: rgba(0,0,0,0.3);
}
*/
text-align: center; text-align: center;
font-size: 32px; font-size: 32px;
&> button { &> button {
@ -872,15 +817,6 @@ color: var(--toolbar-bg-color);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
/*
// XXX
background-color: rgba(0,0,0,0.4);
&:hover {
background-color: rgba(0,0,0,0.5);
}
*/
order: 1; order: 1;
.fa { .fa {
margin: 0; margin: 0;
@ -911,11 +847,6 @@ color: var(--toolbar-bg-color);
display: inline-flex; display: inline-flex;
order: 6; order: 6;
line-height: @toolbar_top-height; line-height: @toolbar_top-height;
/*
// XXX
color: white;
*/
.cp-toolbar-notifications { order: 1; } .cp-toolbar-notifications { order: 1; }
.cp-toolbar-user-dropdown { order: 3; } .cp-toolbar-user-dropdown { order: 3; }
.cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe .cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe
@ -988,12 +919,21 @@ color: var(--toolbar-bg-color);
} }
.cp-toolbar-bottom { .cp-toolbar-bottom {
background-color: @toolbar-bg-color-l8; background-color: @toolbar-bg-color-light;
background-color: var(--toolbar-bg-color-l8); background-color: var(--toolbar-bg-color-light);
color: @cryptpad_text_col; color: @cryptpad_text_col;
button:hover, button.cp-toolbar-button-active { button:hover, button.cp-toolbar-button-active {
background-color: @toolbar-bg-color; background-color: @toolbar-bg-color-active;
background-color: var(--toolbar-bg-color); background-color: var(--toolbar-bg-color-active);
}
button.cp-toolbar-button-active {
border-color: @toolbar-bg-color-active;
border-color: var(--toolbar-bg-color-active);
}
button:hover, button:focus {
border-color: @toolbar-bg-color-active;
border-color: var(--toolbar-bg-color-active);
//border-color: @cryptpad_text_col;
} }
display: inline-flex; display: inline-flex;
@ -1012,6 +952,8 @@ color: var(--toolbar-bg-color);
} }
} }
button { button {
border: 1px solid transparent;
box-sizing: border-box;
position: relative; position: relative;
margin: 0px; margin: 0px;
border-radius: 0; border-radius: 0;
@ -1142,83 +1084,6 @@ color: var(--toolbar-bg-color);
} }
} }
.cp-toolbar-leftside {
//height: @toolbar_line-height;
&:empty {
height: 0;
}
display: inline-flex;
align-items: center;
max-width: 100%;
flex: 1 1 auto;
//margin-bottom: -1px;
.cp-toolbar-users {
pre {
/* needed for ckeditor */
white-space: pre;
margin: 5px 0px;
}
}
button {
margin: 0px;
border-radius: 0;
height: 100%;
}
.cp-dropdown-content {
margin-top: -1px;
}
& > span {
height: @toolbar_line-height;
}
#cp-toolbar-userlist-drawer-open { order: 0; }
#cp-toolbar-chat-drawer-open { order: 1; }
.cp-toolbar-share-button { order: 2; }
.cp-toolbar-spinner { order: 3; }
#cp-toolbar-userlist-drawer-open button {
width: 125px;
text-align: center;
}
#cp-toolbar-chat-drawer-open button {
&.cp-toolbar-notification {
animation: notification 2s ease-in-out infinite;
}
}
.cp-toolbar-share-button {
width: 50px;
text-align: center;
}
}
.cp-toolbar-rightside {
display: flex;
min-height: @toolbar_line-height;
overflow: hidden;
&:empty {
min-height: 0;
height: 0;
}
.cp-toolbar-rightside-button {
cursor: pointer;
// UI actions
&.cp-toolbar-icon-toggle { order: 1; }
&.cp-toolbar-icon-preview { order: 2; }
&.cp-toolbar-icon-present { order: 3; }
// Content actions
&.cp-toolbar-icon-mediatag { order: 10; }
order: 11;
// Storage actions
&.cp-toolbar-icon-hashtag { order: 20; }
&.cp-toolbar-icon-template { order: 21; }
&.cp-toolbar-icon-forget { order: 22; }
// Drawer
&.cp-toolbar-drawer-button { order: 30; }
}
}
.cp-toolbar-spinner { .cp-toolbar-spinner {
color: @cryptpad_text_col; color: @cryptpad_text_col;
font-size: 14px; font-size: 14px;

Write Preview
Loading…
Cancel
Save