css: simplify new theme and variants
make design simpler so it's less complex to implement remove light-soft-color and dark-soft-color
This commit is contained in:
Sebastian Castro
muxator
parent
ca12287a26
commit
02769bee44
6 changed files with 95 additions and 177 deletions
|
|
@ -33,14 +33,12 @@ html {
|
|||
*/
|
||||
|
||||
:root {
|
||||
--super-dark-color: #374256;
|
||||
--super-dark-color: #485365; /*#374256;*/
|
||||
--dark-color: #576273; /*#4d5d77*/
|
||||
--dark-soft-color: #6d7684; /*#606978;*/
|
||||
|
||||
--primary-color: #64d29b;
|
||||
--middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */
|
||||
|
||||
--light-soft-color: #e5e6e6;
|
||||
--light-color: #f2f3f4; /*#f9f9f9;*/
|
||||
--super-light-color: white;
|
||||
}
|
||||
|
|
@ -61,13 +59,8 @@ html {
|
|||
/* Default scrollbar values */
|
||||
body {
|
||||
--scrollbar-bg: var(--light-color);
|
||||
--scrollbar-track: var(--light-soft-color);
|
||||
--scrollbar-thumb: var(--dark-soft-color);
|
||||
}
|
||||
#chatbox {
|
||||
--scrollbar-bg: var(--super-light-color);
|
||||
--scrollbar-track: var(--light-color);
|
||||
--scrollbar-thumb: var(--middle-color);
|
||||
--scrollbar-thumb: var(--dark-color);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -81,8 +74,3 @@ body {
|
|||
h1 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* BACKGROUND COLOR */
|
||||
#editorcontainerbox {
|
||||
background-color: #f2f3f4; /* default */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,34 @@
|
|||
#chatbox {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.chat-content {
|
||||
background: none;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
|
||||
.chat-content, #chaticon {
|
||||
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
|
||||
border: none;
|
||||
}
|
||||
|
||||
#chaticon {
|
||||
padding: 10px 20px;
|
||||
background-color: var(--bg-soft-color);
|
||||
color: var(--text-color);
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
#chatbox.stickyChat .chat-content {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
|
||||
#chatbox.stickyChat.chatAndUsersChat .chat-content {
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
|
|
@ -24,7 +37,6 @@
|
|||
height: 44px;
|
||||
padding: 0 7px;
|
||||
z-index: 20000;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#titlelabel, #chatlabel {
|
||||
|
|
@ -36,13 +48,14 @@
|
|||
#chatlabel { margin-right: 15px; }
|
||||
|
||||
#chattext {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.plugin-ep_author_neat #chattext {
|
||||
padding: 10px;
|
||||
border-top: 1px solid var(--bg-color);
|
||||
border-bottom: 1px solid var(--bg-color); /*#e5e7ea;*/
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
#chattext.authorColors {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.plugin-ep_author_neat #chattext.authorColors p,
|
||||
|
|
@ -50,26 +63,17 @@
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
#chatbox.stickyChat .chat-content #chattext {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#chatinputbox {
|
||||
padding: 8px;
|
||||
}
|
||||
#chatinputbox #chatinput {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.plugin-ep_author_neat #chatbox.stickyChat .chat-content #chattext {
|
||||
padding: 5px 3px;
|
||||
}
|
||||
|
||||
#chaticon {
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--bg-soft-color);
|
||||
color: var(--text-color);
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
#chaticon {
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -17,31 +17,17 @@
|
|||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-track);
|
||||
border-radius: 10px;
|
||||
border: 5px solid var(--scrollbar-bg);
|
||||
background-color: var(--bg-soft-color);
|
||||
border-radius: 0px;
|
||||
border: 0px solid var(--bg-soft-color);
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 7px;
|
||||
background-color: var(--scrollbar-thumb);
|
||||
border: 5px solid var(--scrollbar-bg);
|
||||
}
|
||||
|
||||
.nice-select .list::-webkit-scrollbar-track {
|
||||
background-color: var(--bg-soft-color);
|
||||
border: 0px solid var(--bg-soft-color);
|
||||
}
|
||||
|
||||
.nice-select .list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.nice-select .list::-webkit-scrollbar-thumb {
|
||||
background-color: var(--text-soft-color);
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 0px;
|
||||
background-color: var(--middle-color);
|
||||
border: 0px solid var(--bg-soft-color);
|
||||
}
|
||||
|
|
@ -4,6 +4,10 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#editorcontainerbox {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
#editorcontainerbox .sticky-container {
|
||||
width: 250px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
/* =========================== */
|
||||
/* === Super Light Toolbar === */
|
||||
/* =========================== */
|
||||
.super-light-toolbar .toolbar, .super-light-toolbar .popup-content {
|
||||
--text-color: var(--dark-color);
|
||||
--text-soft-color: var(--dark-soft-color);
|
||||
.super-light-toolbar .toolbar, .super-light-toolbar .popup-content {
|
||||
--text-color: var(--super-dark-color);
|
||||
--text-soft-color: var(--dark-color);
|
||||
--border-color: var(--middle-color);
|
||||
--bg-soft-color: var(--light-color);
|
||||
--bg-color: var(--super-light-color);
|
||||
}
|
||||
.super-light-toolbar #chat {
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
/* ===================== */
|
||||
/* === Light Toolbar === */
|
||||
/* ===================== */
|
||||
|
|
@ -18,19 +15,18 @@
|
|||
--text-color: var(--super-dark-color);
|
||||
--text-soft-color: var(--dark-color);
|
||||
--border-color: var(--middle-color);
|
||||
--bg-soft-color: var(--light-soft-color);
|
||||
--bg-soft-color: var(--super-light-color);
|
||||
--bg-color: var(--light-color);
|
||||
}
|
||||
/* ========================== */
|
||||
/* === Super Dark Toolbar === */
|
||||
/* ========================== */
|
||||
.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content {
|
||||
--text-color: var(--light-color);
|
||||
--text-soft-color: var(--middle-color);
|
||||
--border-color: var(--dark-soft-color);
|
||||
--text-color: var(--super-light-color);
|
||||
--text-soft-color: var(--light-color);
|
||||
--border-color: var(--middle-color);
|
||||
--bg-soft-color: var(--dark-color);
|
||||
--bg-color: var(--super-dark-color);
|
||||
border: none;
|
||||
}
|
||||
.super-dark-toolbar.super-dark-editor .popup-content {
|
||||
border: 1px solid var(--dark-color);
|
||||
|
|
@ -42,8 +38,8 @@
|
|||
.dark-toolbar .toolbar, .dark-toolbar .popup-content {
|
||||
--text-color: var(--super-light-color);
|
||||
--text-soft-color: var(--light-color);
|
||||
--border-color: var(--dark-soft-color);
|
||||
--bg-soft-color: var(--dark-soft-color);
|
||||
--border-color: var(--middle-color);
|
||||
--bg-soft-color: var(--super-dark-color);
|
||||
--bg-color: var(--dark-color);
|
||||
}
|
||||
|
||||
|
|
@ -54,25 +50,18 @@
|
|||
/* ============================ */
|
||||
/* == Super Light Background == */
|
||||
/* ============================ */
|
||||
.super-light-background #editorcontainerbox, .super-light-background #sidediv, .super-light-background, .light-background.super-light-editor {
|
||||
--text-color: var(--dark-color);
|
||||
--text-soft-color: var(--dark-soft-color);
|
||||
--border-color: var(--light-soft-color);
|
||||
.super-light-background #editorcontainerbox, .super-light-background #sidediv,
|
||||
.super-light-background #chatbox, .super-light-background {
|
||||
--text-color: var(--super-dark-color);
|
||||
--text-soft-color: var(--dark-color);
|
||||
--border-color: var(--middle-color);
|
||||
--bg-soft-color: var(--light-color);
|
||||
--bg-color: var(--super-light-color);
|
||||
background-color: var(--super-light-color);
|
||||
}
|
||||
.super-light-background .chat-content, .super-light-background #chatbox.stickyChat .chat-content {
|
||||
--bg-color: var(--super-light-color);
|
||||
--bg-soft-color: var(--super-light-color);
|
||||
}
|
||||
.super-light-background #chatbox.stickyChat .chat-content {
|
||||
box-shadow: none;
|
||||
}
|
||||
.super-light-background body, .full-width-editor.super-light-editor body:not(.plugin-ep_comments_page) {
|
||||
.super-light-background body, .full-width-editor.super-light-editor body:not(.comments-active) {
|
||||
--scrollbar-bg: var(--super-light-color);
|
||||
--scrollbar-track: var(--light-color);
|
||||
--scrollbar-thumb: var(--dark-soft-color);
|
||||
--scrollbar-thumb: var(--dark-color);
|
||||
}
|
||||
.super-light-background .compact-display-content {
|
||||
background-color: var(--super-light-color);
|
||||
|
|
@ -80,35 +69,18 @@
|
|||
/* ====================== */
|
||||
/* == Light Background == */
|
||||
/* ====================== */
|
||||
.light-background #editorcontainerbox, .light-background #sidediv, .light-background {
|
||||
.light-background #editorcontainerbox, .light-background #sidediv,
|
||||
.light-background #chatbox, .light-background {
|
||||
--text-color: var(--super-dark-color);
|
||||
--text-soft-color: var(--dark-color);
|
||||
--border-color: var(--light-soft-color);
|
||||
--bg-soft-color: var(--light-soft-color);
|
||||
--border-color: var(--middle-color);
|
||||
--bg-soft-color: var(--super-light-color);
|
||||
--bg-color: var(--light-color);
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
.light-background body, .full-width-editor.light-editor body:not(.plugin-ep_comments_page) {
|
||||
.light-background body, .full-width-editor.light-editor body:not(.comments-active) {
|
||||
--scrollbar-bg: var(--light-color);
|
||||
--scrollbar-track: var(--light-soft-color);
|
||||
--scrollbar-thumb: var(--dark-soft-color);
|
||||
}
|
||||
.light-background .chat-content, .light-background #chatbox.stickyChat .chat-content {
|
||||
--bg-color: var(--super-light-color);
|
||||
--bg-soft-color: var(--light-color);
|
||||
--scrollbar-bg: var(--super-light-color);
|
||||
--scrollbar-track: var(--light-color);
|
||||
--scrollbar-thumb: var(--middle-color);
|
||||
}
|
||||
.light-background #chatbox.stickyChat .chat-content {
|
||||
box-shadow: none;
|
||||
}
|
||||
/* Special combinaison with toolbar */
|
||||
.light-background.light-editor #chattext {
|
||||
background-color: var(--light-color);
|
||||
--scrollbar-bg: var(--light-color);
|
||||
--scrollbar-track: var(--light-soft-color);
|
||||
--scrollbar-thumb: var(--dark-soft-color);
|
||||
--scrollbar-track: var(--super-light-color);
|
||||
--scrollbar-thumb: var(--dark-color);
|
||||
}
|
||||
.light-background .compact-display-content {
|
||||
background-color: var(--light-color);
|
||||
|
|
@ -116,72 +88,46 @@
|
|||
/* =========================== */
|
||||
/* == Super Dark Background == */
|
||||
/* =========================== */
|
||||
.super-dark-background #editorcontainerbox, .super-dark-background #sidediv, .super-dark-background {
|
||||
--text-color: var(--light-color);
|
||||
--text-soft-color: var(--light-soft-color);
|
||||
--border-color: var(--dark-color);
|
||||
.super-dark-background #editorcontainerbox, .super-dark-background #sidediv,
|
||||
.super-dark-background #chatbox, .super-dark-background {
|
||||
--text-color: var(--super-light-color);
|
||||
--text-soft-color: var(--light-color);
|
||||
--border-color: var(--middle-color);
|
||||
--bg-soft-color: var(--dark-color);
|
||||
--bg-color: var(--super-dark-color);
|
||||
}
|
||||
.super-dark-background #editorcontainerbox {
|
||||
background-color: var(--super-dark-color);
|
||||
}
|
||||
.super-dark-background body, .full-width-editor.super-dark-editor body:not(.plugin-ep_comments_page) {
|
||||
.super-dark-background body, .full-width-editor.super-dark-editor body:not(.comments-active) {
|
||||
--scrollbar-bg: var(--super-dark-color);
|
||||
--scrollbar-track: var(--dark-color);
|
||||
--scrollbar-thumb: var(--light-soft-color);
|
||||
}
|
||||
.super-dark-background .chat-content, .super-dark-background #chatbox.stickyChat .chat-content {
|
||||
background-color: var(--super-dark-color);
|
||||
color: var(--light-color);
|
||||
--scrollbar-bg: var(--super-dark-color);
|
||||
--scrollbar-track: var(--dark-color);
|
||||
--scrollbar-thumb: var(--light-soft-color);
|
||||
}
|
||||
.super-dark-background #chatbox:not(.stickyChat) .chat-content {
|
||||
border: 1px solid var(--dark-color);
|
||||
}
|
||||
/* Special combinaison with toolbar */
|
||||
.super-dark-background.super-dark-toolbar .popup-content, .super-dark-background .full-display-content {
|
||||
border: 1px solid var(--dark-color);
|
||||
box-shadow: none;
|
||||
--scrollbar-thumb: var(--light-color);
|
||||
}
|
||||
.super-dark-background .compact-display-content {
|
||||
background-color: var(--super-dark-color);
|
||||
}
|
||||
/* Special combinaison with toolbar */
|
||||
.super-dark-background.super-dark-toolbar .popup-content {
|
||||
border: 1px solid var(--dark-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
/* ===================== */
|
||||
/* == Dark Background == */
|
||||
/* ===================== */
|
||||
.dark-background #editorcontainerbox, .dark-background #sidediv, .dark-background {
|
||||
.dark-background #editorcontainerbox, .dark-background #sidediv,
|
||||
.dark-background #chatbox, .dark-background {
|
||||
--text-color: var(--super-light-color);
|
||||
--text-soft-color: var(--light-color);
|
||||
--border-color: var(--dark-soft-color);
|
||||
--bg-soft-color: var(--dark-soft-color);
|
||||
--border-color: var(--middle-color);
|
||||
--bg-soft-color: var(--super-dark-color);
|
||||
--bg-color: var(--dark-color);
|
||||
}
|
||||
.dark-background #editorcontainerbox {
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
.dark-background body, .full-width-editor.dark-editor body:not(.plugin-ep_comments_page) {
|
||||
.dark-background body, .full-width-editor.dark-editor body:not(.comments-active) {
|
||||
--scrollbar-bg: var(--dark-color);
|
||||
--scrollbar-track: var(--dark-soft-color);
|
||||
--scrollbar-thumb: var(--light-soft-color);
|
||||
}
|
||||
.dark-background .chat-content, .dark-background #chatbox.stickyChat .chat-content {
|
||||
background-color: var(--dark-color);
|
||||
color: var(--super-light-color);
|
||||
--border-color: var(--dark-soft-color);
|
||||
--scrollbar-bg: var(--dark-color);
|
||||
--scrollbar-track: var(--dark-soft-color);
|
||||
--scrollbar-thumb: var(--light-soft-color);
|
||||
--scrollbar-track: var(--super-dark-color);
|
||||
--scrollbar-thumb: var(--light-color);
|
||||
}
|
||||
.dark-background .compact-display-content {
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
.dark-background .full-display-content {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--dark-soft-color);
|
||||
}
|
||||
/* Special combinaison with toolbar */
|
||||
.dark-background.dark-toolbar .popup-content, .dark-editor.dark-toolbar .popup-content {
|
||||
box-shadow: 0 0 14px 0px var(--super-dark-color);
|
||||
|
|
@ -248,24 +194,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.super-light-editor.super-light-background #chaticon {
|
||||
--bg-soft-color: var(--light-color);
|
||||
--text-color: var(--dark-color);
|
||||
}
|
||||
.light-editor.light-background #chaticon {
|
||||
--bg-soft-color: var(--super-light-color);
|
||||
--text-color: var(--dark-color);
|
||||
}
|
||||
.super-dark-editor.super-dark-background #chaticon {
|
||||
--bg-soft-color: var(--dark-color);
|
||||
--text-color: var(--light-color);
|
||||
}
|
||||
.dark-editor.dark-background #chaticon {
|
||||
--bg-soft-color: var(--light-color);
|
||||
--text-color: var(--dark-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ======================= */
|
||||
/* == Full Width Editor == */
|
||||
|
|
|
|||
|
|
@ -33,12 +33,13 @@
|
|||
}
|
||||
.sidebar-comment .full-display-content {
|
||||
margin-left: -10px;
|
||||
box-shadow: 0 2px 9px 2px rgba(130, 130, 130, 0.2);
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: none;
|
||||
background-color: var(--bg-soft-color);
|
||||
border: 1px solid var(--bg-color);
|
||||
}
|
||||
.comment-reply {
|
||||
background-color: var(--bg-soft-color);
|
||||
border: none;
|
||||
border-top: 1px solid var(--bg-color);
|
||||
background-color: inherit;
|
||||
}
|
||||
.comment-reply textarea, .comment-reply input[type="text"] {
|
||||
background-color: var(--bg-color);
|
||||
|
|
@ -52,13 +53,20 @@
|
|||
.comment-modal .full-display-content {
|
||||
box-shadow: none;
|
||||
margin: 0 !important;
|
||||
border: none;
|
||||
background-color: var(--bg-color)
|
||||
}
|
||||
.comment-modal .comment-modal-comment {
|
||||
padding: 0;
|
||||
}
|
||||
.ace-line .comment {
|
||||
background-color: rgba(255, 235, 59, 0.5);
|
||||
.comment-modal .comment-reply textarea, .comment-modal .comment-reply input[type="text"] {
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
.comment-modal .comment-reply {
|
||||
border-top: 1px solid var(--bg-soft-color);
|
||||
}
|
||||
|
||||
|
||||
.new-comment-popup textarea {
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue