initial color adjustments - disroot palette (#12)
Reviewed-on: #12 Reviewed-by: meaz <meaz@no-reply@disroot.org> Co-authored-by: antilopa <antilopa@disroot.org> Co-committed-by: antilopa <antilopa@disroot.org>
This commit is contained in:
parent
60200b3640
commit
aab2da9c83
|
|
@ -1,23 +1,28 @@
|
|||
// Beetroot and Darkbeet colors
|
||||
@color-main: #50162d;
|
||||
@color-link: #bd139a;
|
||||
@color-success: #50162d;
|
||||
@color-warning: #F6609D;
|
||||
@color-light-main: #61273E;
|
||||
@color-lighter-main: #72384F;
|
||||
@color-link: #BD899E;
|
||||
@color-highlight: #1F5C60;
|
||||
@color-success: #4F8F93;
|
||||
@color-warning: #8eb726;
|
||||
@color-error: #8eb726;
|
||||
@color-white: #DDDDDD;
|
||||
@color-link-secondary: lighten(@color-font, 60%);
|
||||
@color-layout-header-background: #50162d;
|
||||
|
||||
// Task menu
|
||||
@color-taskmenu-background: #50162d;
|
||||
@color-taskmenu-button-action: #E0548D;
|
||||
@color-taskmenu-button-action: #72384f;
|
||||
@color-taskmenu-button-special: @color-taskmenu-button;
|
||||
@color-taskmenu-button-special-background: @color-taskmenu-background;
|
||||
@color-taskmenu-button-action-hover: #fff;
|
||||
@color-taskmenu-button-action-hover: #DDDDDD;
|
||||
@color-taskmenu-button-special-hover: lighten(@color-taskmenu-button-special, 10%);
|
||||
// @color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%);
|
||||
|
||||
// Toolbar
|
||||
@color-toolbar-button-background-hover: lighten(@color-layout-header-background, 10%);
|
||||
@color-searchbar-icon-active: green;
|
||||
@color-searchbar-icon-active: #8eb726;
|
||||
|
||||
// Popovers (menus)
|
||||
@color-popover-header: @color-black-shade-text;
|
||||
|
|
@ -27,20 +32,26 @@
|
|||
@color-btn-secondary-background: lighten(@color-main, 10%);
|
||||
|
||||
// Dark mode colors
|
||||
@color-dark-main: darken(@color-main, 10%);
|
||||
@color-dark-background: #252121;
|
||||
@color-dark-main: @color-main;
|
||||
@color-dark-background: #2b2f3b;
|
||||
@color-darker-background: #1f222b;
|
||||
@color-dark-font: #DDDDDD;
|
||||
@color-dark-border: #292525;
|
||||
@color-dark-border: #1f222b;
|
||||
@color-dark-taskmenu-button-action: #4F8F93;
|
||||
@color-dark-taskmenu-button-action-hover: @color-dark-font;
|
||||
@color-dark-input-background: @color-darker-background;
|
||||
|
||||
@color-dark-list-selected: #FFFFFF;
|
||||
@color-dark-list-selected: #DDDDDD;
|
||||
@color-dark-list-selected-background: #50162D;
|
||||
@color-dark-list-droptarget-background: #353131;
|
||||
@color-dark-list-border: #353131;
|
||||
@color-dark-list-droptarget-background: #383c4a;
|
||||
@color-dark-list-border: #383c4a;
|
||||
@color-dark-input-border: #471328;
|
||||
@color-dark-input-addon-background: #292525;
|
||||
@color-dark-popover-background: #201c1c;
|
||||
@color-dark-input-addon-background: #1f222b;
|
||||
@color-dark-popover-background: #1f222b;
|
||||
@color-dark-popover-border: #50162d;
|
||||
|
||||
// @color-taskmenu-background: @color-darker-background;
|
||||
@color-taskmenu-button-action: @color-white;
|
||||
@color-taskmenu-button-logout: @color-error;
|
||||
@color-taskmenu-button-logout-hover: @color-error;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// Darkbeet modifications based on elastic skin
|
||||
@import "_darkc";
|
||||
@import "_colors";
|
||||
|
||||
html.dark-mode {
|
||||
|
||||
|
|
@ -7,42 +8,51 @@ html.dark-mode {
|
|||
// .tox {
|
||||
// .tox-edit-area__iframe {
|
||||
// background-color: @color-dark-popover-background;
|
||||
// color: white;
|
||||
// color: @color-white;
|
||||
// }
|
||||
// }
|
||||
|
||||
#taskmenu {
|
||||
a {
|
||||
&.selected {
|
||||
color: white;
|
||||
color: @color-white;
|
||||
background-color: @color-dark-list-selected-background;
|
||||
}
|
||||
}
|
||||
.action-buttons a {
|
||||
color: white;
|
||||
color: @color-white;
|
||||
}
|
||||
}
|
||||
.menu
|
||||
a.compose::before {
|
||||
color: white;
|
||||
color: @color-white;
|
||||
}
|
||||
#layout > div > .header,
|
||||
#layout-menu {
|
||||
background-color: @color-dark-popover-background;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
#layout-menu .special-buttons a:not(:focus) {
|
||||
background: @color-dark-border;
|
||||
}
|
||||
|
||||
// The two following are to get lighter borders when composing message (to: and subject:), when focus
|
||||
.custom-file-label:focus:not(.is-invalid), .form-control:focus:not(.is-invalid) {
|
||||
border-color: #741d3f;
|
||||
border-color: 3f;
|
||||
}
|
||||
|
||||
.recipient-input.focus {
|
||||
border-color: #911648 !important;
|
||||
border-color: @color-light-main !important;
|
||||
}
|
||||
|
||||
// Get dotted line around attachment brighter
|
||||
.file-upload {
|
||||
border: .2rem dashed @color-main;
|
||||
}
|
||||
|
||||
#messagelist {
|
||||
border: @color-dark-border 1px solid;
|
||||
background-color: @color-darker-background;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,184 @@
|
|||
.popover,.rcmail-inline-message,body,button,input,optgroup,select,textarea{font-family:Roboto,sans-serif}@font-face{font-family:Icons;font-style:normal;font-weight:900;src:url(../fonts/fa-solid-900.woff2) format('woff2'),url(../fonts/fa-solid-900.woff) format('woff')}@font-face{font-family:Icons;font-style:normal;font-weight:400;src:url(../fonts/fa-regular-400.woff2) format('woff2'),url(../fonts/fa-regular-400.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(../fonts/roboto-v29-regular.woff2) format('woff2'),url(../fonts/roboto-v29-regular.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(../fonts/roboto-v29-italic.woff2) format('woff2'),url(../fonts/roboto-v29-italic.woff) format('woff')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(../fonts/roboto-v29-regular-700.woff2) format('woff2'),url(../fonts/roboto-v29-regular-700.woff) format('woff')}@font-face{font-family:Roboto;font-style:italic;font-weight:700;src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(../fonts/roboto-v29-italic-700.woff2) format('woff2'),url(../fonts/roboto-v29-italic-700.woff) format('woff')}button,input,select,textarea{line-height:initial}input{vertical-align:middle}a{color:#bd139a}a:hover{color:#8f0e74}a.disabled{pointer-events:none}a.disabled:not(.btn){opacity:.5}html:not(.touch) ::-webkit-scrollbar{width:6px}html{scrollbar-color:#c1c1c1 #f1f1f1}html:not(.touch) ::-webkit-scrollbar-track{background-color:#f1f1f1}html:not(.touch) ::-webkit-scrollbar-thumb{background-color:#c1c1c1}.mce-content-body{margin:4px;color:#2c363a}.mce-content-body div.pre{font-family:monospace}.mce-content-body blockquote{border-left:#1010ff 2px solid;margin:0;padding:0 .4em}.rcmail-inline-message{font-size:14px;padding:.5em;margin:0 0 .5em;opacity:.95;color:#2c363a;background-color:rgba(246,96,157,.2);display:flex;align-items:center}.rcmail-inline-message:before{display:block;float:left;margin:0 .3em 0 0;height:1em;font-family:Icons;font-style:normal;font-weight:900;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:1.5em;line-height:1;width:1em;content:"\f071";color:#F6609D}.rcmail-inline-message span{line-height:1.5}.rcmail-inline-message a{color:#bd139a}.rcmail-inline-message a:hover{color:#8f0e74}.rcmail-inline-message button{vertical-align:middle;white-space:nowrap;padding:.375em .75em;margin-left:.5em;font-size:1em;line-height:1.5;border-radius:.25em;border:1px solid transparent;color:#fff;background:#50162d}.rcmail-inline-message button:focus{box-shadow:0 0 0 .2rem rgba(80,22,45,.5)}.rcmail-inline-message button:hover{background:#300d1b;border-color:#280b17}.rcmail-inline-message button:not([disabled]):not(.disabled):active{background:#240a14;border-color:#1c0810;box-shadow:0 0 0 .2rem rgba(80,22,45,.53)}.rcmail-inline-buttons{margin:0}
|
||||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
/* Style for embedded pages and TinyMCE editor content page */
|
||||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
/*** Fonts ***/
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("../fonts/fa-solid-900.woff2") format('woff2'), url("../fonts/fa-solid-900.woff") format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/fa-regular-400.woff2") format('woff2'), url("../fonts/fa-regular-400.woff") format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-v29-regular.woff2') format('woff2'), url('../fonts/roboto-v29-regular.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/roboto-v29-italic.woff2') format('woff2'), url('../fonts/roboto-v29-italic.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/roboto-v29-regular-700.woff2') format('woff2'), url('../fonts/roboto-v29-regular-700.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('../fonts/roboto-v29-italic-700.woff2') format('woff2'), url('../fonts/roboto-v29-italic-700.woff') format('woff');
|
||||
}
|
||||
/* Reset some Bootstrap style */
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea,
|
||||
.popover {
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
line-height: initial;
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
a {
|
||||
color: #BD899E;
|
||||
}
|
||||
a:hover {
|
||||
color: #ab6883;
|
||||
}
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
a.disabled:not(.btn) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* Scrollbar styles */
|
||||
html:not(.touch) ::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
html {
|
||||
scrollbar-color: #c1c1c1 #f1f1f1;
|
||||
}
|
||||
html:not(.touch) ::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
html:not(.touch) ::-webkit-scrollbar-thumb {
|
||||
background-color: #c1c1c1;
|
||||
}
|
||||
.mce-content-body {
|
||||
margin: 4px;
|
||||
color: #2c363a;
|
||||
}
|
||||
.mce-content-body div.pre {
|
||||
font-family: monospace;
|
||||
}
|
||||
.mce-content-body blockquote {
|
||||
border-left: #1010ff 2px solid;
|
||||
margin: 0;
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
.rcmail-inline-message {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 0.5em;
|
||||
margin: 0 0 0.5em 0;
|
||||
opacity: 0.95;
|
||||
color: #2c363a;
|
||||
background-color: rgba(142, 183, 38, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.rcmail-inline-message:before {
|
||||
font-size: 1.25em;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 0.25rem 0 0;
|
||||
width: 1.18em;
|
||||
height: 1em;
|
||||
font-family: 'Icons';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
text-decoration: inherit;
|
||||
text-align: center;
|
||||
speak: none;
|
||||
font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
width: 1em;
|
||||
margin-right: 0.3em;
|
||||
content: "\f071";
|
||||
color: #8eb726;
|
||||
}
|
||||
.rcmail-inline-message span {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.rcmail-inline-message a {
|
||||
color: #BD899E;
|
||||
}
|
||||
.rcmail-inline-message a:hover {
|
||||
color: #ab6883;
|
||||
}
|
||||
.rcmail-inline-message button {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
padding: 0.375em 0.75em;
|
||||
margin-left: 0.5em;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.25em;
|
||||
border: 1px solid transparent;
|
||||
color: #fff;
|
||||
background: #50162d;
|
||||
}
|
||||
.rcmail-inline-message button:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(80, 22, 45, 0.5);
|
||||
}
|
||||
.rcmail-inline-message button:hover {
|
||||
background: #300d1b;
|
||||
border-color: #280b17;
|
||||
}
|
||||
.rcmail-inline-message button:not([disabled]):not(.disabled):active {
|
||||
background: #240a14;
|
||||
border-color: #1c0810;
|
||||
box-shadow: 0 0 0 0.2rem rgba(80, 22, 45, 0.53);
|
||||
}
|
||||
.rcmail-inline-buttons {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,57 @@
|
|||
#print-layout #message-header,#print-layout .image-attachment .image-link{margin-bottom:.5rem}body{overflow:auto;height:auto}#print-layout{margin:1rem}#print-layout #logo{max-height:80px}#print-layout .image-attachment .attachment-links{display:none}#print-layout .attachment-size{padding-left:.1rem}#print-layout blockquote{page-break-inside:auto}#print-layout .formcontent{padding:0}#print-layout .formcontent legend{margin-top:.5rem}#print-layout .formcontent .row .form-control-plaintext{padding:.1rem}#print-layout .formcontent .contactfield{padding:.2rem 0}#print-layout .propform.grouped .row.input-group .input-group-text{padding:0;min-width:12rem;background:#fff;border:0}#print-layout .contact-header{margin-bottom:0}
|
||||
/**
|
||||
* Roundcube Webmail styles for the Elastic skin
|
||||
*
|
||||
* Copyright (c) The Roundcube Dev Team
|
||||
*
|
||||
* The contents are subject to the Creative Commons Attribution-ShareAlike
|
||||
* License. It is allowed to copy, distribute, transmit and to adapt the work
|
||||
* by keeping credits to the original authors in the README.md file.
|
||||
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
|
||||
*/
|
||||
/*** Additional styles for printouts ***/
|
||||
body {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
#print-layout {
|
||||
margin: 1rem;
|
||||
}
|
||||
#print-layout #logo {
|
||||
max-height: 80px;
|
||||
}
|
||||
#print-layout .image-attachment .image-link {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#print-layout .image-attachment .attachment-links {
|
||||
display: none;
|
||||
}
|
||||
#print-layout #message-header {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#print-layout .attachment-size {
|
||||
padding-left: 0.1rem;
|
||||
}
|
||||
#print-layout blockquote {
|
||||
page-break-inside: auto;
|
||||
}
|
||||
#print-layout .formcontent {
|
||||
padding: 0;
|
||||
}
|
||||
#print-layout .formcontent legend {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
#print-layout .formcontent .row .form-control-plaintext {
|
||||
padding: 0.1rem;
|
||||
}
|
||||
#print-layout .formcontent .contactfield {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
#print-layout .propform.grouped .row.input-group .input-group-text {
|
||||
padding: 0;
|
||||
min-width: 12rem;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
}
|
||||
#print-layout .contact-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -21,8 +21,8 @@ html:not(.dark-mode) body:before {
|
|||
background: rgba(255, 255, 255, .85);
|
||||
}
|
||||
html.dark-mode > body {
|
||||
background-color: #21292c;
|
||||
background-blend-mode: soft-light;
|
||||
background-color: #2b2f3b;
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue