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;
// 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-toolbar-bg: #c1e7ff;
@colortheme_pad-warn: #ffae00;
@colortheme_slide-bg: #e57614;
@colortheme_slide-color: #fff;
@colortheme_slide-warn: #005868;
@colortheme_code-bg: #ffae00;
@colortheme_code-bg: #EAA000;
@colortheme_code-color: #000;
@colortheme_code-warn: #9A37F7;
@colortheme_poll-bg: #006304;
@colortheme_poll-bg: #2c9e98;
@colortheme_poll-color: #fff;
@colortheme_poll-help-bg: #bbffbb;
@colortheme_poll-th-bg: #005bef;
@colortheme_poll-th-fg: #fff;
@colortheme_poll-warn: #ffade3;
@colortheme_whiteboard-bg: #800080;
@colortheme_whiteboard-bg: #a72ba7;
@colortheme_whiteboard-color: #fff;
@colortheme_whiteboard-warn: #ffae00;
@colortheme_drive-bg: #0087ff;
@colortheme_drive-bg: #0087FF;
@colortheme_drive-color: #fff;
@colortheme_drive-warn: #cd2532;
@colortheme_teams-bg: #0b0061;
@colortheme_teams-bg: #4a3bbd;
@colortheme_teams-color: #fff;
@colortheme_teams-warn: #cd2532;

201
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
@warn-color: @colortheme_default-warn // color of the warning text in the toolbar
) {
@toolbar-color: @color;
@toolbar-color-l20: lighten(@color, 20%);
@toolbar-color-d20: darken(@color, 20%);
@toolbar-color-d15: darken(@color, 15%);
@toolbar-color: @cryptpad_text_col;
@toolbar-bg-color: @bg-color;
@toolbar-bg-color-l8: lighten(@bg-color, 8%);
@toolbar-bg-color-l20: lighten(@bg-color, 20%);
@toolbar-bg-color-d5: darken(@bg-color, 5%);
@toolbar-bg-color-light: lighten(@bg-color, 30%);
@toolbar-bg-color-active: lighten(@bg-color, 20%);
@toolbar-bg-color-d10: darken(@bg-color, 10%);
@toolbar-bg-color-d15: darken(@bg-color, 15%);
@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 (
@ -43,29 +38,16 @@
.toolbar_vars(@color, @bg-color, @warn-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-l8: @toolbar-bg-color-l8;
--toolbar-bg-color-l20: @toolbar-bg-color-l20;
--toolbar-bg-color-d5: @toolbar-bg-color-d5;
--toolbar-bg-color-light: @toolbar-bg-color-light;
--toolbar-bg-color-active: @toolbar-bg-color-active;
--toolbar-bg-color-d10: @toolbar-bg-color-d10;
--toolbar-bg-color-d15: @toolbar-bg-color-d15;
--toolbar-warn-color: @toolbar-warn-color;
--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);
.notifications_main();
.dropdown_main();
@ -87,6 +69,7 @@
}
.toolbar_vars();
@toolbar-top-bg: #eeeeee;
@toolbar_line-height: 32px;
@toolbar_top-height: 76px;
@toolbar_button-font: @colortheme_app-font;
@ -105,8 +88,7 @@
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: @toolbar-bg-color-l20;
background-color: var(--toolbar-bg-color-l20);
background-color: @colortheme_pad-toolbar-bg;
display: none;
button {
height: @toolbar_line-height !important;
@ -116,8 +98,7 @@
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
background-color: darken(@colortheme_pad-toolbar-bg, 5%);
}
&.cp-markdown-help { float: right; }
}
@ -415,12 +396,6 @@
color: var(--toolbar-color);
}
}
.cp-toolbar-userlist-friend {
&:hover {
color: @toolbar-color-d15;
color: var(--toolbar-color-d15);
}
}
}
.cp-toolbar {
@ -438,17 +413,10 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/*
// XXX
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: var(--toolbar-bg-color);
background-color: @toolbar-top-bg;
color: @toolbar-bg-color;
color: var(--toolbar-bg-color);
.fa {
font: normal normal normal 14px/1 FontAwesome;
@ -633,11 +601,6 @@ color: var(--toolbar-bg-color);
color: @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 {
color: black;
}
@ -738,8 +701,8 @@ color: var(--toolbar-bg-color);
align-self: baseline;
&:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
border: 1px solid @toolbar-bg-color;
border: 1px solid var(--toolbar-bg-color);
transition: all 0.15s;
}
.cp-toolbar-title-editable {
@ -757,8 +720,8 @@ color: var(--toolbar-bg-color);
}
}
.cp-toolbar-title-save {
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
border: 1px solid @toolbar-bg-color;
border: 1px solid var(--toolbar-bg-color);
cursor: pointer;
padding: 5px;
border-collapse: collapse;
@ -773,8 +736,8 @@ color: var(--toolbar-bg-color);
}
input {
color: @cryptpad_text_col;
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
border: 1px solid @toolbar-bg-color;
border: 1px solid var(--toolbar-bg-color);
max-width: ~"calc(100% - 40px)";
//flex: 1;
vertical-align: middle;
@ -794,26 +757,8 @@ color: var(--toolbar-bg-color);
padding: 0;
box-sizing: border-box;
display: inline-block;
/*
// XXX
color: white;
a {
color: white;
}
transition: all 0.15s;
*/
}
.cp-toolbar-notifications {
/*
// XXX
background-color: rgba(0,0,0,0.2);
&:hover {
background-color: rgba(0,0,0,0.3);
}
*/
text-align: center;
font-size: 32px;
&> button {
@ -872,15 +817,6 @@ color: var(--toolbar-bg-color);
align-items: center;
justify-content: center;
cursor: pointer;
/*
// XXX
background-color: rgba(0,0,0,0.4);
&:hover {
background-color: rgba(0,0,0,0.5);
}
*/
order: 1;
.fa {
margin: 0;
@ -911,11 +847,6 @@ color: var(--toolbar-bg-color);
display: inline-flex;
order: 6;
line-height: @toolbar_top-height;
/*
// XXX
color: white;
*/
.cp-toolbar-notifications { order: 1; }
.cp-toolbar-user-dropdown { order: 3; }
.cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe
@ -988,12 +919,21 @@ color: var(--toolbar-bg-color);
}
.cp-toolbar-bottom {
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
background-color: @toolbar-bg-color-light;
background-color: var(--toolbar-bg-color-light);
color: @cryptpad_text_col;
button:hover, button.cp-toolbar-button-active {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
background-color: @toolbar-bg-color-active;
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;
@ -1012,6 +952,8 @@ color: var(--toolbar-bg-color);
}
}
button {
border: 1px solid transparent;
box-sizing: border-box;
position: relative;
margin: 0px;
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 {
color: @cryptpad_text_col;
font-size: 14px;

Write Preview
Loading…
Cancel
Save