pull/1/head
yflory 4 years ago
parent 2554dacc4b
commit 45dff2f5c4

@ -10,20 +10,8 @@
}; };
& { & {
@max-z-index: 2147483647; @max-z-index: 2147483647;
@alertify-fore: @colortheme_modal-fg;
@alertify-base: @colortheme_modal-bg;
@alertify-dialog-bg: @alertify-base; @alertify-light-bg: fade(@cp_alertify-fg, 25%);
@alertify-dialog-fg: @alertify-fore;
@alertify-btn-fg: @alertify-fore;
@alertify-light-bg: fade(@alertify-fore, 25%);
@alertify-bg: @colortheme_modal-dim;
@alertify-fg: @alertify-fore;
@alertify-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-input-fg;
@alertify_padding-base: @variables_padding; @alertify_padding-base: @variables_padding;
@alertify_box-shadow: @variables_shadow; @alertify_box-shadow: @variables_shadow;
@ -39,7 +27,7 @@
} }
> * { > * {
padding: @alertify_padding-base @alertify_padding-base * 4; padding: @alertify_padding-base @alertify_padding-base * 4;
color: @colortheme_notification-color; color: @cp_alertify-log-fg;
font-family: @colortheme_font; font-family: @colortheme_font;
font-size: large; font-size: large;
@ -47,22 +35,22 @@
box-shadow: @alertify_box-shadow; box-shadow: @alertify_box-shadow;
&, &.default { &, &.default {
// FIXME // FIXME
background: @colortheme_notification-log; background: @cp_alertify-log-bg;
} }
&.error { &.error {
font-weight: bold; font-weight: bold;
background: @colortheme_notification-warn; background: @cp_alertify-warn-bg;
} }
&.success { &.success {
background: @colortheme_notification-log; background: @cp_alertify-log-bg;
} }
} }
} }
.alertify { .alertify {
position: fixed; position: fixed;
background-color: @alertify-bg; background-color: @cp_alertify-overlay;
color: @alertify-fg; color: @cp_alertify-fg;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
@ -86,7 +74,7 @@
.message { .message {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: @alertify-fg; color: @cp_alertify-fg;
} }
} }
@ -118,17 +106,17 @@
} }
color: @colortheme_light-base; color: @colortheme_light-base;
background-color: @alertify-dialog-bg; background-color: @cp_alertify-bg;
input[id$="tokenfield"][type="text"].token-input { input[id$="tokenfield"][type="text"].token-input {
background-color: @alertify-dialog-bg !important; background-color: @cp_alertify-bg !important;
} }
}*/ }*/
} }
.dialog { .dialog {
& > div { & > div {
background-color: @alertify-dialog-bg; background-color: @cp_alertify-bg;
&.half { &.half {
width: 50%; width: 50%;
max-width: 50%; max-width: 50%;
@ -154,7 +142,7 @@
max-width: 500px; max-width: 500px;
margin: 0 auto; margin: 0 auto;
text-align: left; text-align: left;
background: #fff; background: @cp_alertify-bg;
box-shadow: @alertify_box-shadow; box-shadow: @alertify_box-shadow;
&.wide { &.wide {
max-width: 850px; max-width: 850px;
@ -198,7 +186,7 @@
.alertify-tabs-titles { .alertify-tabs-titles {
height: 40px; height: 40px;
display: flex; display: flex;
border-bottom: 1px solid @alertify-fore; border-bottom: 1px solid @cp_alertify-fg;
margin-bottom: 10px; margin-bottom: 10px;
box-sizing: content-box; box-sizing: content-box;
.alertify-tabs-title { .alertify-tabs-title {
@ -208,11 +196,9 @@
line-height: 40px; line-height: 40px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 15px; padding: 0 15px;
border-left: 1px solid lighten(@alertify-base, 10%);
border-right: 1px solid lighten(@alertify-base, 10%);
cursor: pointer; cursor: pointer;
&:not(.disabled):hover { &:not(.disabled):hover {
background-color: @alertify-light-bg; background-color: @cp_alertify-hover;
} }
&.disabled { &.disabled {
color: @colortheme_alertify-cancel-border; color: @colortheme_alertify-cancel-border;
@ -227,10 +213,8 @@
} }
} }
span.alertify-tabs-active { span.alertify-tabs-active {
background-color: @alertify-fore !important; background-color: @cp_alertify-fg !important;
border-left: 1px solid @alertify-fore; color: @cp_alertify-bg;
border-right: 1px solid @alertify-fore;
color: @alertify-base;
cursor: default; cursor: default;
} }
} }
@ -251,7 +235,9 @@
} }
} }
.tools_placeholder-color(@cryptpad_color_grey); input {
.tools_placeholder-color();
}
span.cp-password-container { span.cp-password-container {
display: flex; display: flex;
@ -267,7 +253,7 @@
} }
.fa-question-circle { // help links to Docs .fa-question-circle { // help links to Docs
color: @colortheme_logo-2; color: @cp_alertify-fg;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
@ -498,11 +484,11 @@
margin-top: @alertify_padding-base; margin-top: @alertify_padding-base;
} }
&.alert-primary { &.alert-primary {
background-color: @alertify-base; background-color: @cp_alertify-bg;
color: @alertify-fg; color: @cp_alertify-fg;
border-color: @alertify-fg; border-color: @cp_alertify-fg;
a { a {
color: @alertify-fg; color: @cp_alertify-fg;
text-decoration: underline; text-decoration: underline;
} }
} }

@ -5,8 +5,6 @@
) { ) {
@avatar-width: @width; @avatar-width: @width;
@avatar-font-size: @width / 1.2; @avatar-font-size: @width / 1.2;
@avatar-default-bg: #D9D8D8;
@avatar-default-fg: darken(@avatar-default-bg, 40%);
} }
.avatar_main(@width: 30px) { .avatar_main(@width: 30px) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -38,8 +36,8 @@
} }
.cp-avatar-default { .cp-avatar-default {
.tools_unselectable(); .tools_unselectable();
background: @avatar-default-bg; background: @cp_avatar-bg;
color: @avatar-default-fg; color: @cp_avatar-fg;
font-size: @avatar-font-size; font-size: @avatar-font-size;
font-size: var(--avatar-font-size); font-size: var(--avatar-font-size);
text-transform: capitalize; text-transform: capitalize;

@ -22,6 +22,15 @@
--checkmark-radio-size: @checkmark-radio-size; --checkmark-radio-size: @checkmark-radio-size;
} }
& { & {
// XXX DARK
@cp_checkmark-back0: @colortheme_form-bg-alt;
@cp_checkmark-back0-active: @colortheme_form-border;
@cp_checkmark-back1: @colortheme_form-bg;
@cp_checkmark-col1: @colortheme_form-color;
@cp_checkmark-back2: @colortheme_form-bg-alt;
@cp_checkmark-col2: @colortheme_form-color-alt;
@cp_checkmark-disabled: @cp_forms-disabled;
.checkmark_vars(); .checkmark_vars();
// <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label> // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
.cp-checkmark { .cp-checkmark {
@ -41,40 +50,40 @@
&.cp-checkmark-secondary { &.cp-checkmark-secondary {
.cp-checkmark-mark { .cp-checkmark-mark {
&:after { &:after {
border-color: @colortheme_checkmark-col2; border-color: @cp_checkmark-col2;
} }
} }
input { input {
&:checked ~ .cp-checkmark-mark { &:checked ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-back2; background-color: @cp_checkmark-back2;
border-color: @colortheme_checkmark-back2; border-color: @cp_checkmark-back2;
} }
&:disabled ~ .cp-checkmark-mark { &:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled; background-color: @cp_checkmark-disabled;
} }
&:disabled ~ .cp-checkmark-label { &:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled; color: @cp_checkmark-disabled;
} }
} }
} }
&:hover .cp-checkmark-mark { &:hover .cp-checkmark-mark {
background-color: @colortheme_checkmark-back0-active; background-color: @cp_checkmark-back0-active;
} }
input { input {
display: none; display: none;
&:checked ~ .cp-checkmark-mark { &:checked ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-back1; background-color: @cp_checkmark-back1;
border-color: @colortheme_checkmark-back1; border-color: @cp_checkmark-back1;
&:after { &:after {
display: block; display: block;
} }
} }
&:disabled ~ .cp-checkmark-mark { &:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled; background-color: @cp_checkmark-disabled;
} }
&:disabled ~ .cp-checkmark-label { &:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled; color: @cp_checkmark-disabled;
} }
} }
@ -91,7 +100,7 @@
height: var(--checkmark-size); height: var(--checkmark-size);
width: @checkmark-size; width: @checkmark-size;
width: var(--checkmark-size); width: var(--checkmark-size);
background-color: @colortheme_checkmark-back0; background-color: @cp_checkmark-back0;
display: flex; display: flex;
justify-content: center; justify-content: center;
border: 1px solid @colortheme_form-border; border: 1px solid @colortheme_form-border;
@ -106,14 +115,13 @@
height: @checkmark-dim2; height: @checkmark-dim2;
height: var(--checkmark-dim2); height: var(--checkmark-dim2);
transform: rotate(45deg); transform: rotate(45deg);
border: solid @colortheme_checkmark-col1; border: solid @cp_checkmark-col1;
border-width: 0 @checkmark-width @checkmark-width 0; border-width: 0 @checkmark-width @checkmark-width 0;
border-width: 0 var(--checkmark-width) var(--checkmark-width) 0; border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
position: absolute; position: absolute;
} }
&:focus { &:focus {
//border-color: #FF007C !important; box-shadow: 0px 0px 5px @cp_checkmark-back1;
box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
outline: none; outline: none;
} }
} }
@ -133,39 +141,39 @@
&.cp-radio-secondary { &.cp-radio-secondary {
.cp-radio-mark { .cp-radio-mark {
&:after { &:after {
border-color: @colortheme_checkmark-col2; border-color: @cp_checkmark-col2;
} }
} }
input { input {
&:checked ~ .cp-radio-mark { &:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back2; background-color: @cp_checkmark-back2;
} }
&:disabled ~ .cp-checkmark-mark { &:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled; background-color: @cp_checkmark-disabled;
} }
&:disabled ~ .cp-checkmark-label { &:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled; color: @cp_checkmark-disabled;
} }
} }
} }
&:hover .cp-radio-mark { &:hover .cp-radio-mark {
background-color: @colortheme_checkmark-back0-active; background-color: @cp_checkmark-back0-active;
} }
input { input {
display: none; display: none;
&:checked ~ .cp-radio-mark { &:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back1; background-color: @cp_checkmark-back1;
border-color: @colortheme_checkmark-back1; border-color: @cp_checkmark-back1;
&:after { &:after {
display: block; display: block;
} }
} }
&:disabled ~ .cp-checkmark-mark { &:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled; background-color: @cp_checkmark-disabled;
} }
&:disabled ~ .cp-checkmark-label { &:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled; color: @cp_checkmark-disabled;
} }
} }
@ -183,7 +191,7 @@
height: var(--checkmark-radio-size); height: var(--checkmark-radio-size);
width: @checkmark-radio-size; width: @checkmark-radio-size;
width: var(--checkmark-radio-size); width: var(--checkmark-radio-size);
background-color: @colortheme_checkmark-back0; background-color: @cp_checkmark-back0;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -194,19 +202,14 @@
display: none; display: none;
content: ""; content: "";
border-radius: 50%; border-radius: 50%;
background: white; background: @cp_checkmark-back0;
width: @checkmark-dim1; width: @checkmark-dim1;
width: var(--checkmark-dim1); width: var(--checkmark-dim1);
height: @checkmark-dim1; height: @checkmark-dim1;
height: var(--checkmark-dim1); height: var(--checkmark-dim1);
//transform: rotate(45deg);
//border: solid @colortheme_checkmark-col1;
//border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
} }
&:focus { &:focus {
//border-color: #FF007C !important; box-shadow: 0px 0px 5px @cp_checkmark-back1;
box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
outline: none; outline: none;
} }
} }

@ -9,18 +9,17 @@
@colortheme_loading_bg: #E7E7E7; @colortheme_loading_bg: #E7E7E7;
@colortheme_link-color: #0275D8; @colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999; @colortheme_link-color-visited: lighten(@colortheme_link-color, 10%);
@colortheme_info-background: #eeeeee; @colortheme_info-background: #eeeeee;
@colortheme_old-base: #302B28;
@colortheme_old-fore: #fafafa;
@colortheme_base: #fff; @colortheme_base: #fff;
@colortheme_light-base: lighten(@colortheme_base, 20%); @colortheme_light-base: lighten(@colortheme_base, 20%);
@colortheme_cp-red: #FA5858; // remove red @colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981; @colortheme_cp-green: #46E981;
@colortheme_old-fore: #fafafa;
@colortheme_form-border: #bbbbbb; @colortheme_form-border: #bbbbbb;
@colortheme_form-bg: @colortheme_logo-2; @colortheme_form-bg: @colortheme_logo-2;
@colortheme_form-color: #ffffff; @colortheme_form-color: #ffffff;
@ -48,9 +47,6 @@
@colortheme_alertify-red: #E55236; @colortheme_alertify-red: #E55236;
@colortheme_alertify-red-color: #FFF; @colortheme_alertify-red-color: #FFF;
@colortheme_alertify-red-border: transparent; @colortheme_alertify-red-border: transparent;
@colortheme_alertify-green: #77C825;
@colortheme_alertify-green-color: #FFF;
@colortheme_alertify-green-border: transparent;
@colortheme_alertify-primary: @colortheme_form-bg; @colortheme_alertify-primary: @colortheme_form-bg;
@colortheme_alertify-primary-text: @colortheme_form-color; @colortheme_alertify-primary-text: @colortheme_form-color;
@colortheme_alertify-primary-border: transparent; @colortheme_alertify-primary-border: transparent;
@ -60,15 +56,8 @@
@colortheme_alertify-cancel: @colortheme_modal-bg; @colortheme_alertify-cancel: @colortheme_modal-bg;
@colortheme_alertify-cancel-border: #949494; @colortheme_alertify-cancel-border: #949494;
@colortheme_notification-log: fade(@colortheme_logo-2, 90%);
@colortheme_notification-color: #fff;;
@colortheme_notification-warn: rgba(205, 37, 50, 0.8); @colortheme_notification-warn: rgba(205, 37, 50, 0.8);
@colortheme_dropdown-bg: #f9f9f9;
@colortheme_dropdown-color: black;
@colortheme_dropdown-bg-hover: #f1f1f1;
@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_toolbar-warn: @colortheme_alertify-red; @colortheme_toolbar-warn: @colortheme_alertify-red;
@colortheme_pad-toolbar-bg: #eeeeee; @colortheme_pad-toolbar-bg: #eeeeee;
@ -115,11 +104,8 @@
@colortheme_sidebar-button-alt-bg: #fff; @colortheme_sidebar-button-alt-bg: #fff;
@cryptpad_color_blue: #4591C4; @cryptpad_color_blue: #4591C4;
@cryptpad_color_grey: #999999;
@cryptpad_color_light_grey: #e0e0e0;
@cryptpad_header_col: #1E1F1F; @cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141; @cryptpad_text_col: #3F4141;
@cryptpad_color_light_blue: #00b7d8;
@colortheme_checkmark-back0: @colortheme_form-bg-alt; @colortheme_checkmark-back0: @colortheme_form-bg-alt;
@colortheme_checkmark-back0-active: @colortheme_form-border; @colortheme_checkmark-back0-active: @colortheme_form-border;
@ -128,3 +114,69 @@
@colortheme_checkmark-back2: @colortheme_form-bg-alt; @colortheme_checkmark-back2: @colortheme_form-bg-alt;
@colortheme_checkmark-col2: @colortheme_form-color-alt; @colortheme_checkmark-col2: @colortheme_form-color-alt;
@colortheme_checkmark-disabled: #AAA; @colortheme_checkmark-disabled: #AAA;
// New variables
// Colors
@cryptpad_color_dark_grey: #999999;
@cryptpad_color_grey: #e0e0e0;
@cryptpad_color_light_grey: #f1f1f1;
@cryptpad_color_lighter_grey: #f9f9f9;
@cryptpad_color_light_blue: #00b7d8;
@cryptpad_color_black: #000;
@cryptpad_color_white: #FFF;
// Alertify
@cp_alertify-bg: @cryptpad_color_white;
@cp_alertify-fg: @colortheme_logo-2;
@cp_alertify-hover: fade(@cp_alertify-fg, 25%);
@cp_alertify-overlay: fade(@cryptpad_text_col, 50%);
@cp_alertify-log-bg: fade(@colortheme_logo-2, 90%);
@cp_alertify-log-fg: @cryptpad_color_white;
@cp_alertify-warn-bg: rgba(205, 37, 50);
// Forms
@cp_forms-fg: @cryptpad_text_col;
@cp_forms-border: @colortheme_logo-2;
@cp_forms-placeholder: @cryptpad_color_dark_grey;
@cp_forms-readonly: fade(@colortheme_logo-2, 25%);
@cp_forms-disabled: #AAA;
// Buttons
@cp_buttons-fg: @colortheme_logo-2;
@cp_buttons-default: #CCC;
@cp_buttons-default-color: @cryptpad_text_col;
@cp_buttons-default-border: @cryptpad_text_col;
@cp_buttons-red: #E55236;
@cp_buttons-red-color: #FFF;
@cp_buttons-red-border: transparent;
@cp_buttons-primary: @colortheme_form-bg;
@cp_buttons-primary-text: @colortheme_form-color;
@cp_buttons-primary-border: transparent;
@cp_buttons-disabled: #6c757d;
@cp_buttons-disabled-text: #ffffff;
@cp_buttons-disabled-border: #6c757d;
@cp_buttons-cancel: @colortheme_modal-bg;
@cp_buttons-cancel-border: #949494;
// Tooltip background
@cp_tooltip-bg: @cryptpad_color_grey;
@cp_tooltip-fg: @cryptpad_text_col;
// Dropdown
@cp_dropdown-fg: @cryptpad_text_col;
@cp_dropdown-bg: @cryptpad_color_lighter_grey;
@cp_dropdown-bg-hover: @cryptpad_color_light_grey;
@cp_dropdown-bg-active: @cryptpad_color_grey;
// Rendered Markdown
@cp_markdown-bg: @cryptpad_color_light_grey;
@cp_markdown-border: @cryptpad_color_grey;
// Avatar
@cp_avatar-bg: @cryptpad_color_grey;
@cp_avatar-fg: @cryptpad_text_col;
// Other
@cp_shadow-color: rgba(0,0,0,0.4);

@ -232,7 +232,7 @@
input { input {
background: transparent; background: transparent;
color: @colortheme_drive-color; color: @colortheme_drive-color;
.tools_placeholder-color(@cryptpad_color_grey); .tools_placeholder-color();
outline-width: 0px; outline-width: 0px;
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;

@ -46,7 +46,7 @@
.cp-dropdown-content { .cp-dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
background-color: @colortheme_dropdown-bg; background-color: @cp_dropdown-bg;
min-width: 250px; min-width: 250px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000; //Z dropdown content z-index: 1000; //Z dropdown content
@ -64,7 +64,7 @@
} }
& > a, & > span { & > a, & > span {
color: @colortheme_dropdown-color; color: @cp_dropdown-fg;
padding: 5px 16px; padding: 5px 16px;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
@ -100,13 +100,13 @@
} }
&:hover { &:hover {
background-color: @colortheme_dropdown-bg-hover; background-color: @cp_dropdown-bg-hover;
color: @colortheme_dropdown-color; color: @cp_dropdown-fg;
} }
&.cp-dropdown-element-active { &.cp-dropdown-element-active {
background-color: @colortheme_dropdown-bg-active; background-color: @cp_dropdown-bg-active;
color: @colortheme_dropdown-color; color: @cp_dropdown-fg;
} }
} }
&> span { &> span {
@ -138,7 +138,7 @@
hr { hr {
margin: 5px 0px; margin: 5px 0px;
height: 1px; height: 1px;
background: #bbb; background: @cp_dropdown-bg-active;
& + hr { & + hr {
display: none; display: none;
} }
@ -150,21 +150,11 @@
margin: 0; margin: 0;
white-space: normal; white-space: normal;
text-align: left; text-align: left;
color: black; color: @cp_dropdown-fg;
font-size: 14px; font-size: 14px;
* { * {
font-size: 14px; font-size: 14px;
} }
h2 {
color: black;
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
white-space: normal;
}
} }
} }
} }

@ -6,24 +6,18 @@
} }
& { & {
@alertify-fore: @colortheme_modal-fg;
@alertify-btn-fg: @alertify-fore;
@alertify-light-bg: fade(@alertify-fore, 25%);
@alertify_padding-base: @variables_padding; @alertify_padding-base: @variables_padding;
@alertify-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-input-fg;
input:not(.form-control):not([type="checkbox"]), textarea, div.cp-textarea { input:not(.form-control):not([type="checkbox"]), textarea, div.cp-textarea {
// background-color: @alertify-input-fg; // background-color: @alertify-input-fg;
color: @cryptpad_text_col; color: @cp_forms-fg;
border: 1px solid @alertify-input-bg; border: 1px solid @cp_forms-border;
width: 100%; width: 100%;
font-size: 100%; font-size: 100%;
padding: @alertify_padding-base; padding: @alertify_padding-base;
&[readonly] { &[readonly] {
background-color: @alertify-light-bg; background-color: @cp_forms-readonly;
color: @cryptpad_text_col; color: @cp_forms-fg;
border-color: @alertify-input-fg;
} }
} }
@ -76,9 +70,9 @@
height: 3px; height: 3px;
& > div { & > div {
height: 100%; height: 100%;
background-color: @colortheme_alertify-primary; background-color: @cp_buttons-primary;
&.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt { &.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt {
background-color: @colortheme_alertify-red; background-color: @cp_buttons-red;
} }
} }
} }
@ -89,7 +83,7 @@
button.btn { button.btn {
background-color: @colortheme_alertify-cancel; background-color: @cp_buttons-cancel;
box-sizing: border-box; box-sizing: border-box;
outline: 0; outline: 0;
align-items: center; align-items: center;
@ -111,80 +105,63 @@
vertical-align: middle; vertical-align: middle;
} }
color: @alertify-btn-fg; color: @cp_buttons-fg;
border: 1px solid @alertify-btn-fg; border: 1px solid @cp_buttons-fg;
&.no-margin { &.no-margin {
margin: 0; margin: 0;
} }
&:hover, &:not(:disabled):not(.disabled):active, &:focus { &:hover, &:not(:disabled):not(.disabled):active, &:focus {
color: @alertify-btn-fg; color: @cp_buttons-fg;
border: 1px solid @alertify-btn-fg; border: 1px solid @cp_buttons-fg;
background-color: lighten(@alertify-fore, 35%); background-color: lighten(@cp_buttons-fg, 35%);
}
&.safe, &.danger, &.btn-safe, &.btn-danger {
color: @colortheme_old-base;
white-space: normal;
font-weight: bold;
} }
&.btn-default { &.btn-default {
border-color: @cryptpad_text_col; border-color: @cp_buttons-default-border;
color: @cryptpad_text_col; color: @cp_buttons-default-color;
&:hover, &:not(:disabled):active, &:focus { &:hover, &:not(:disabled):active, &:focus {
border-color: @cryptpad_text_col; border-color: @cp_buttons-default-border;
color: @cryptpad_text_col; color: @cp_buttons-default-color;
background-color: #ccc; background-color: @cp_buttons-default;
} }
} }
&.danger, &.btn-danger { &.danger, &.btn-danger {
background-color: @colortheme_alertify-red; background-color: @cp_buttons-red;
border-color: @colortheme_alertify-red-border; border-color: @cp_buttons-red-border;
color: @colortheme_alertify-red-color; color: @cp_buttons-red-color;
&:hover, &:not(:disabled):active, &:focus { &:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-red-border; border-color: @cp_buttons-red-border;
color: @colortheme_alertify-red-color; color: @cp_buttons-red-color;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@colortheme_alertify-red, 10%));
} }
} }
&.danger-alt, &.btn-danger-alt, &.btn-danger-outline { &.danger-alt, &.btn-danger-alt, &.btn-danger-outline {
border-color: @colortheme_alertify-red; border-color: @cp_buttons-red;
color: @colortheme_alertify-red; color: @cp_buttons-red;
&:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-red;
color: @colortheme_alertify-red-color;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
}
}
&.safe, &.btn-safe {
background-color: @colortheme_alertify-green;
border-color: @colortheme_alertify-green-border;
color: @colortheme_alertify-green-color;
&:hover, &:not(:disabled):active, &:focus { &:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-green-border; border-color: @cp_buttons-red;
color: @colortheme_alertify-green-color; color: @cp_buttons-red-color;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%)); background-color: @cp_buttons-red;
} }
} }
&.primary, &.btn-primary, &.btn-success { &.primary, &.btn-primary, &.btn-success {
background-color: @colortheme_alertify-primary; background-color: @cp_buttons-primary;
color: @colortheme_alertify-primary-text; color: @cp_buttons-primary-text;
border-color: @colortheme_alertify-primary-border; border-color: @cp_buttons-primary-border;
font-weight: bold; font-weight: bold;
&:hover, &:not(:disabled):active, &:focus { &:hover, &:not(:disabled):active, &:focus {
color: @colortheme_alertify-primary-text; color: @cp_buttons-primary-text;
border-color: @colortheme_alertify-primary-border; border-color: @cp_buttons-primary-border;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); background-color: contrast(@colortheme_modal-bg, darken(@cp_buttons-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
} }
} }
&.btn-light { &.btn-light { // XXX DARK
border-color: @cryptpad_text_col; border-color: @cryptpad_text_col;
color: @cryptpad_text_col; color: @cryptpad_text_col;
background-color: transparent; background-color: transparent;
@ -196,12 +173,12 @@
} }
&.cancel, &.btn-cancel { &.cancel, &.btn-cancel {
border-color: @colortheme_alertify-cancel-border; border-color: @cp_buttons-cancel-border;
color: @colortheme_alertify-cancel-border; color: @cp_buttons-cancel-border;
&:hover, &:not(:disabled):active, &:focus { &:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-cancel-border; border-color: @cp_buttons-cancel-border;
color: @colortheme_alertify-cancel-border; color: @cp_buttons-cancel-border;
background-color: fade(@colortheme_alertify-cancel-border, 25%); background-color: fade(@cp_buttons-cancel-border, 25%);
} }
} }
&.btn-register { &.btn-register {
@ -212,7 +189,7 @@
&:focus { &:focus {
//border: 1px dotted @alertify-base; //border: 1px dotted @alertify-base;
box-shadow: 0px 0px 5px @colortheme_alertify-primary !important; box-shadow: 0px 0px 5px @cp_buttons-primary !important;
outline: none; outline: none;
} }
&::-moz-focus-inner { &::-moz-focus-inner {
@ -221,11 +198,11 @@
&:disabled { &:disabled {
cursor: not-allowed !important; cursor: not-allowed !important;
background-color: @colortheme_alertify-disabled; background-color: @cp_buttons-disabled;
color: @colortheme_alertify-disabled-text; color: @cp_buttons-disabled-text;
border-color: @colortheme_alertify-disabled-border; border-color: @cp_buttons-disabled-border;
&:hover, &:active { &:hover, &:active {
background-color: @colortheme_alertify-disabled; background-color: @cp_buttons-disabled;
} }
} }
} }

@ -1,16 +1,13 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
.markdown_main() { .markdown_main() {
@nice-grey: #f3f3f3;
@accent-grey: rgba(0, 0, 0, 0.2);
hr { hr {
border-top: 1px solid @accent-grey; border-top: 1px solid @cp_markdown-border;
} }
blockquote { blockquote {
background: @nice-grey; background: @cp_markdown-bg;
background: rgba(144, 144, 144, 0.2);
padding: 10px; padding: 10px;
border-left: 2px solid @accent-grey; border-left: 2px solid @cp_markdown-border;
padding-right: 0; padding-right: 0;
p { margin: 0; } p { margin: 0; }
blockquote { margin: 0; } blockquote { margin: 0; }
@ -21,7 +18,7 @@
// todo ul, ol // todo ul, ol
// TOC // TOC
div.cp-md-toc { div.cp-md-toc {
background: @nice-grey; background: @cp_markdown-bg;
padding: 20px; padding: 20px;
* { * {
margin: 5px; margin: 5px;
@ -57,7 +54,7 @@
} }
div.plain-text-reader { div.plain-text-reader {
background: #f3f3f3; background: @cp_markdown-bg;
padding: 10px; padding: 10px;
color: black; color: black;
text-align: left; text-align: left;
@ -111,7 +108,7 @@
width: 100px; width: 100px;
height: 100px; height: 100px;
display: inline-block; display: inline-block;
border: 1px solid #BBB; border: 1px solid @cp_markdown-border;
} }
} }
@ -121,7 +118,7 @@
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: bold; font-weight: bold;
padding-bottom: 0.3em; padding-bottom: 0.3em;
border-bottom: 1px solid #eee; border-bottom: 1px solid @cp_markdown-border;
} }
li { li {
min-height: 22px; min-height: 22px;
@ -139,7 +136,7 @@
.mediatag_cryptpad(); .mediatag_cryptpad();
pre.markmap { pre.markmap {
border: 1px solid #ddd; border: 1px solid @cp_markdown-border;
svg { svg {
height: 400px; height: 400px;
} }
@ -153,11 +150,11 @@
} }
} }
.markdown_preformatted-code (@color: #333) { .markdown_preformatted-code () {
pre > code { pre > code {
display: block; display: block;
position: relative; position: relative;
border: 1px solid @color; border: 1px solid @cp_markdown-border;
width: 90%; width: 90%;
margin: auto; margin: auto;
padding-left: .25vw; padding-left: .25vw;
@ -166,16 +163,16 @@
} }
} }
.markdown_gfm-table (@color: black) { .markdown_gfm-table () {
table { table {
border-collapse: collapse; border-collapse: collapse;
tr { tr {
th { th {
border: 1px solid @color; border: 1px solid @cryptpad_color_black;
padding: 15px; padding: 15px;
} }
td { td {
border: 1px solid @color; border: 1px solid @cryptpad_color_black;
} }
} }
} }

@ -4,15 +4,15 @@
.modal_base() { .modal_base() {
font-family: @colortheme_font; font-family: @colortheme_font;
background-color: @colortheme_modal-bg; background-color: @cp_alertify-bg;
color: @colortheme_modal-fg; color: @cp_alertify-fg;
box-shadow: @variables_shadow; box-shadow: @variables_shadow;
a { a {
color: @colortheme_modal-link; color: @colortheme_link-color;
&:visited { &:visited {
color: @colortheme_modal-link-visited; color: @colortheme_link-color-visited;
} }
} }
} }
@ -33,11 +33,11 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: @colortheme_modal-dim; background-color: @cp_alertify-overlay;
.cp-modal { .cp-modal {
background-color: @colortheme_modal-bg; background-color: @cp_alertify-bg;
color: @colortheme_modal-fg; color: @cp_alertify-fg;
box-shadow: @variables_shadow; box-shadow: @variables_shadow;
padding: @variables_padding; padding: @variables_padding;
@ -71,16 +71,10 @@
} }
input { input {
background-color: @colortheme_modal-input;
color: @colortheme_modal-input-fg;
border: 0;
padding: 8px 12px; padding: 8px 12px;
margin: 1em; margin: 1em;
width: 300px; width: 300px;
&[type="text"] { &[type="text"] {
background-color: @colortheme_modal-input-fg;
color: @cryptpad_text_col;
border: 1px solid @colortheme_modal-input;
width: auto; width: auto;
} }
} }

@ -5,19 +5,16 @@
} }
& { & {
.tippy-tooltip.cryptpad-theme { .tippy-tooltip.cryptpad-theme {
/* Your styling here. Example: */ background-color: @cp_tooltip-bg;
background-color: @cryptpad_color_light_grey;
border-radius: 0px; border-radius: 0px;
// box-shadow: 2px 2px 10px #000; color: @cp_tooltip-fg;
// font-weight: bold;
color: #333;
overflow-wrap: break-word; overflow-wrap: break-word;
[x-circle] { [x-circle] {
background-color: unset; background-color: unset;
} }
} }
.tippy-popper { .tippy-popper {
@arrow-color: @cryptpad_color_light_grey; @arrow-color: @cp_tooltip-bg;
&[x-placement^='top'] .tippy-arrow { &[x-placement^='top'] .tippy-arrow {
border-top-color: @arrow-color; border-top-color: @arrow-color;
} }

@ -570,9 +570,6 @@
.cp-toolbar-limit { .cp-toolbar-limit {
color: @colortheme_toolbar-warn; color: @colortheme_toolbar-warn;
} }
.cp-dropdown-content.cp-dropdown-left a {
color: black;
}
} }
.cp-toolbar-top { .cp-toolbar-top {
@ -1076,7 +1073,7 @@
top: @toolbar_line-height; top: @toolbar_line-height;
margin: -1px; margin: -1px;
min-width: 50px; min-width: 50px;
background: @colortheme_dropdown-bg; background: @cp_dropdown-bg;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
z-index: 10000; //Z cp-toolbar-drawer-content z-index: 10000; //Z cp-toolbar-drawer-content
@ -1111,8 +1108,8 @@
vertical-align: baseline; vertical-align: baseline;
} }
&:hover { &:hover {
background-color: @colortheme_dropdown-bg-hover !important; background-color: @cp_dropdown-bg-hover !important;
color: @colortheme_dropdown-color; color: @cp_dropdown-fg;
} }
} }
} }

@ -1,6 +1,9 @@
.tools_placeholder-color (@color) { @import (reference) "./colortheme-all.less";
.tools_placeholder-color () {
@color: @cp_forms-placeholder;
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */ &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: @color;; color: @color;
} }
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @color; color: @color;

@ -33,10 +33,7 @@
margin: 0; margin: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
height: 38px; height: 38px;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ .tools_placeholder-color();
color: @cryptpad_color_grey;
opacity: 1; /* Firefox */
}
} }
margin-bottom: 10px; margin-bottom: 10px;
&:empty { &:empty {

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

@ -102,7 +102,7 @@
margin: 1em auto; margin: 1em auto;
.markdown_preformatted-code; .markdown_preformatted-code;
.markdown_gfm-table(black); .markdown_gfm-table();
table { table {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -135,7 +135,7 @@
position: relative; position: relative;
display: none; display: none;
.markdown_preformatted-code; .markdown_preformatted-code;
.markdown_gfm-table(black); .markdown_gfm-table();
} }
} }

@ -1,27 +0,0 @@
.markdown_preformatted-code (@color: #333) {
pre > code {
display: block;
position: relative;
border: 1px solid @color;
width: 90%;
margin: auto;
padding-left: .25vw;
overflow-x: auto;
overflow-y: hidden;
}
}
.markdown_gfm-table (@color: black) {
table {
border-collapse: collapse;
tr {
th {
border: 3px solid @color;
padding: 15px;
}
}
}
}
// todo ul, ol

@ -183,7 +183,7 @@
.markdown_main(); .markdown_main();
.markdown_cryptpad(); .markdown_cryptpad();
.markdown_preformatted-code; .markdown_preformatted-code;
.markdown_gfm-table(black); .markdown_gfm-table();
p { p {
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -197,7 +197,7 @@
border: none; border: none;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
background-color: @cryptpad_color_light_grey; background-color: @cryptpad_color_grey;
width: 100%; width: 100%;
} }
table { table {

@ -655,7 +655,6 @@ define([
}, { }, {
ok: Messages.register_writtenPassword, ok: Messages.register_writtenPassword,
cancel: Messages.register_cancel, cancel: Messages.register_cancel,
cancelClass: 'btn.btn-safe',
okClass: 'btn.btn-danger', okClass: 'btn.btn-danger',
reverseOrder: true, reverseOrder: true,
done: function($dialog) { done: function($dialog) {

@ -369,7 +369,7 @@
.markdown_main(); .markdown_main();
.markdown_preformatted-code; .markdown_preformatted-code;
.markdown_gfm-table(#ddd); .markdown_gfm-table();
ul, ol { ul, ol {
min-width: 50%; min-width: 50%;

Loading…
Cancel
Save