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

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

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

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

@ -9,18 +9,17 @@
@colortheme_loading_bg: #E7E7E7;
@colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999;
@colortheme_link-color-visited: lighten(@colortheme_link-color, 10%);
@colortheme_info-background: #eeeeee;
@colortheme_old-base: #302B28;
@colortheme_old-fore: #fafafa;
@colortheme_base: #fff;
@colortheme_light-base: lighten(@colortheme_base, 20%);
@colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981;
@colortheme_old-fore: #fafafa;
@colortheme_form-border: #bbbbbb;
@colortheme_form-bg: @colortheme_logo-2;
@colortheme_form-color: #ffffff;
@ -48,9 +47,6 @@
@colortheme_alertify-red: #E55236;
@colortheme_alertify-red-color: #FFF;
@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-text: @colortheme_form-color;
@colortheme_alertify-primary-border: transparent;
@ -60,15 +56,8 @@
@colortheme_alertify-cancel: @colortheme_modal-bg;
@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_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.
@colortheme_toolbar-warn: @colortheme_alertify-red;
@colortheme_pad-toolbar-bg: #eeeeee;
@ -115,11 +104,8 @@
@colortheme_sidebar-button-alt-bg: #fff;
@cryptpad_color_blue: #4591C4;
@cryptpad_color_grey: #999999;
@cryptpad_color_light_grey: #e0e0e0;
@cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141;
@cryptpad_color_light_blue: #00b7d8;
@colortheme_checkmark-back0: @colortheme_form-bg-alt;
@colortheme_checkmark-back0-active: @colortheme_form-border;
@ -128,3 +114,69 @@
@colortheme_checkmark-back2: @colortheme_form-bg-alt;
@colortheme_checkmark-col2: @colortheme_form-color-alt;
@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 {
background: transparent;
color: @colortheme_drive-color;
.tools_placeholder-color(@cryptpad_color_grey);
.tools_placeholder-color();
outline-width: 0px;
border-radius: 0;
width: 100%;

@ -46,7 +46,7 @@
.cp-dropdown-content {
display: none;
position: absolute;
background-color: @colortheme_dropdown-bg;
background-color: @cp_dropdown-bg;
min-width: 250px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000; //Z dropdown content
@ -64,7 +64,7 @@
}
& > a, & > span {
color: @colortheme_dropdown-color;
color: @cp_dropdown-fg;
padding: 5px 16px;
text-decoration: none;
display: flex;
@ -100,13 +100,13 @@
}
&:hover {
background-color: @colortheme_dropdown-bg-hover;
color: @colortheme_dropdown-color;
background-color: @cp_dropdown-bg-hover;
color: @cp_dropdown-fg;
}
&.cp-dropdown-element-active {
background-color: @colortheme_dropdown-bg-active;
color: @colortheme_dropdown-color;
background-color: @cp_dropdown-bg-active;
color: @cp_dropdown-fg;
}
}
&> span {
@ -138,7 +138,7 @@
hr {
margin: 5px 0px;
height: 1px;
background: #bbb;
background: @cp_dropdown-bg-active;
& + hr {
display: none;
}
@ -150,21 +150,11 @@
margin: 0;
white-space: normal;
text-align: left;
color: black;
color: @cp_dropdown-fg;
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-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-input-fg;
input:not(.form-control):not([type="checkbox"]), textarea, div.cp-textarea {
// background-color: @alertify-input-fg;
color: @cryptpad_text_col;
border: 1px solid @alertify-input-bg;
color: @cp_forms-fg;
border: 1px solid @cp_forms-border;
width: 100%;
font-size: 100%;
padding: @alertify_padding-base;
&[readonly] {
background-color: @alertify-light-bg;
color: @cryptpad_text_col;
border-color: @alertify-input-fg;
background-color: @cp_forms-readonly;
color: @cp_forms-fg;
}
}
@ -76,9 +70,9 @@
height: 3px;
& > div {
height: 100%;
background-color: @colortheme_alertify-primary;
background-color: @cp_buttons-primary;
&.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt {
background-color: @colortheme_alertify-red;
background-color: @cp_buttons-red;
}
}
}
@ -89,7 +83,7 @@
button.btn {
background-color: @colortheme_alertify-cancel;
background-color: @cp_buttons-cancel;
box-sizing: border-box;
outline: 0;
align-items: center;
@ -111,80 +105,63 @@
vertical-align: middle;
}
color: @alertify-btn-fg;
border: 1px solid @alertify-btn-fg;
color: @cp_buttons-fg;
border: 1px solid @cp_buttons-fg;
&.no-margin {
margin: 0;
}
&:hover, &:not(:disabled):not(.disabled):active, &:focus {
color: @alertify-btn-fg;
border: 1px solid @alertify-btn-fg;
background-color: lighten(@alertify-fore, 35%);
}
&.safe, &.danger, &.btn-safe, &.btn-danger {
color: @colortheme_old-base;
white-space: normal;
font-weight: bold;
color: @cp_buttons-fg;
border: 1px solid @cp_buttons-fg;
background-color: lighten(@cp_buttons-fg, 35%);
}
&.btn-default {
border-color: @cryptpad_text_col;
color: @cryptpad_text_col;
border-color: @cp_buttons-default-border;
color: @cp_buttons-default-color;
&:hover, &:not(:disabled):active, &:focus {
border-color: @cryptpad_text_col;
color: @cryptpad_text_col;
background-color: #ccc;
border-color: @cp_buttons-default-border;
color: @cp_buttons-default-color;
background-color: @cp_buttons-default;
}
}
&.danger, &.btn-danger {
background-color: @colortheme_alertify-red;
border-color: @colortheme_alertify-red-border;
color: @colortheme_alertify-red-color;
background-color: @cp_buttons-red;
border-color: @cp_buttons-red-border;
color: @cp_buttons-red-color;
&:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-red-border;
color: @colortheme_alertify-red-color;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
border-color: @cp_buttons-red-border;
color: @cp_buttons-red-color;
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 {
border-color: @colortheme_alertify-red;
color: @colortheme_alertify-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;
border-color: @cp_buttons-red;
color: @cp_buttons-red;
&:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-green-border;
color: @colortheme_alertify-green-color;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
border-color: @cp_buttons-red;
color: @cp_buttons-red-color;
background-color: @cp_buttons-red;
}
}
&.primary, &.btn-primary, &.btn-success {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
border-color: @colortheme_alertify-primary-border;
background-color: @cp_buttons-primary;
color: @cp_buttons-primary-text;
border-color: @cp_buttons-primary-border;
font-weight: bold;
&:hover, &:not(:disabled):active, &:focus {
color: @colortheme_alertify-primary-text;
border-color: @colortheme_alertify-primary-border;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
color: @cp_buttons-primary-text;
border-color: @cp_buttons-primary-border;
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;
color: @cryptpad_text_col;
background-color: transparent;
@ -196,12 +173,12 @@
}
&.cancel, &.btn-cancel {
border-color: @colortheme_alertify-cancel-border;
color: @colortheme_alertify-cancel-border;
border-color: @cp_buttons-cancel-border;
color: @cp_buttons-cancel-border;
&:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-cancel-border;
color: @colortheme_alertify-cancel-border;
background-color: fade(@colortheme_alertify-cancel-border, 25%);
border-color: @cp_buttons-cancel-border;
color: @cp_buttons-cancel-border;
background-color: fade(@cp_buttons-cancel-border, 25%);
}
}
&.btn-register {
@ -212,7 +189,7 @@
&:focus {
//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;
}
&::-moz-focus-inner {
@ -221,11 +198,11 @@
&:disabled {
cursor: not-allowed !important;
background-color: @colortheme_alertify-disabled;
color: @colortheme_alertify-disabled-text;
border-color: @colortheme_alertify-disabled-border;
background-color: @cp_buttons-disabled;
color: @cp_buttons-disabled-text;
border-color: @cp_buttons-disabled-border;
&:hover, &:active {
background-color: @colortheme_alertify-disabled;
background-color: @cp_buttons-disabled;
}
}
}

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

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

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

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

@ -33,10 +33,7 @@
margin: 0;
margin-bottom: 0 !important;
height: 38px;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @cryptpad_color_grey;
opacity: 1; /* Firefox */
}
.tools_placeholder-color();
}
margin-bottom: 10px;
&: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.
// However, unlike colortheme, customizing these variables will cause breakage.
@ -7,4 +9,4 @@
// Used in modal.less and alertify.less
@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;
.markdown_preformatted-code;
.markdown_gfm-table(black);
.markdown_gfm-table();
table {
margin-bottom: 1rem;
}
@ -135,7 +135,7 @@
position: relative;
display: none;
.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_cryptpad();
.markdown_preformatted-code;
.markdown_gfm-table(black);
.markdown_gfm-table();
p {
margin-bottom: 5px;
}
@ -197,7 +197,7 @@
border: none;
padding: 5px;
margin: 0;
background-color: @cryptpad_color_light_grey;
background-color: @cryptpad_color_grey;
width: 100%;
}
table {

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

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

Loading…
Cancel
Save