libretic/etherpad-lite
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

colibris: style ep_comments

Browse source
This commit is contained in:
Sebastian Castro 2020-04-14 17:23:37 +02:00 committed by muxator
parent ce1e9672f9
commit 12da4f751f
3 changed files with 105 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/static/skins/colibris/pad.css
View file

@ -18,6 +18,7 @@
@import url("src/plugins/font_color.css");
@import url("src/plugins/tables2.css");
@import url("src/plugins/author_hover.css");
@import url("src/plugins/comments.css");
@import url("src/pad-variants.css");

39
src/static/skins/colibris/src/pad-variants.css
View file

@ -57,7 +57,7 @@
/* ============================ */
/* == Super Light Background == */
/* ============================ */
.super-light-background #editorcontainerbox, .super-light-background #sidediv {
.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);
@ -75,15 +75,18 @@
.super-light-background #chatbox.stickyChat .chat-content {
box-shadow: none;
}
.super-light-background body, .full-width-editor.super-light-editor body {
.super-light-background body, .full-width-editor.super-light-editor body:not(.plugin-ep_comments_page) {
--scrollbar-bg: var(--super-light-color);
--scrollbar-track: var(--light-color);
--scrollbar-thumb: var(--dark-soft-color);
}
.super-light-background .compact-display-content {
background-color: var(--super-light-color);
}
/* ====================== */
/* == Light Background == */
/* ====================== */
.light-background #editorcontainerbox, .light-background #sidediv {
.light-background #editorcontainerbox, .light-background #sidediv, .light-background {
--text-color: var(--super-dark-color);
--text-soft-color: var(--dark-color);
--border-color: var(--light-soft-color);
@ -91,7 +94,7 @@
--bg-color: var(--light-color);
background-color: var(--light-color);
}
.light-background body, .full-width-editor.light-editor body {
.light-background body, .full-width-editor.light-editor body:not(.plugin-ep_comments_page) {
--scrollbar-bg: var(--light-color);
--scrollbar-track: var(--light-soft-color);
--scrollbar-thumb: var(--dark-soft-color);
@ -122,10 +125,13 @@
--scrollbar-track: var(--light-soft-color);
--scrollbar-thumb: var(--dark-soft-color);
}
.light-background .compact-display-content {
background-color: var(--light-color);
}
/* =========================== */
/* == Super Dark Background == */
/* =========================== */
.super-dark-background #editorcontainerbox, .super-dark-background #sidediv {
.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);
@ -135,7 +141,7 @@
.super-dark-background #editorcontainerbox {
background-color: var(--super-dark-color);
}
.super-dark-background body, .full-width-editor.super-dark-editor body {
.super-dark-background body, .full-width-editor.super-dark-editor body:not(.plugin-ep_comments_page) {
--scrollbar-bg: var(--super-dark-color);
--scrollbar-track: var(--dark-color);
--scrollbar-thumb: var(--light-soft-color);
@ -147,7 +153,7 @@
--scrollbar-track: var(--dark-color);
--scrollbar-thumb: var(--light-soft-color);
}
.super-dark-background input[type="text"] {
.super-dark-background input[type="text"]:not(.comment-content) {
background-color: var(--bg-soft-color);
border: none;
color: var(--text-color);
@ -159,16 +165,20 @@
border: 1px solid var(--dark-color);
}
/* Special combinaison with toolbar */
.super-dark-background.super-dark-toolbar .popup-content {
.super-dark-background.super-dark-toolbar .popup-content, .super-dark-background .full-display-content {
border: 1px solid var(--dark-color);
box-shadow: none;
}
.super-dark-background.super-dark-toolbar .toolbar {
--border-color: var(--super-dark-color);
}
.super-dark-background .compact-display-content {
background-color: var(--super-dark-color);
}
/* ===================== */
/* == Dark Background == */
/* ===================== */
.dark-background #editorcontainerbox, .dark-background #sidediv {
.dark-background #editorcontainerbox, .dark-background #sidediv, .dark-background {
--text-color: var(--super-light-color);
--text-soft-color: var(--light-color);
--border-color: var(--dark-soft-color);
@ -178,7 +188,7 @@
.dark-background #editorcontainerbox {
background-color: var(--dark-color);
}
.dark-background body, .full-width-editor.dark-editor body {
.dark-background body, .full-width-editor.dark-editor body:not(.plugin-ep_comments_page) {
--scrollbar-bg: var(--dark-color);
--scrollbar-track: var(--dark-soft-color);
--scrollbar-thumb: var(--light-soft-color);
@ -191,7 +201,7 @@
--scrollbar-track: var(--dark-soft-color);
--scrollbar-thumb: var(--light-soft-color);
}
.dark-background input[type="text"] {
.dark-background input[type="text"]:not(.comment-content) {
background-color: var(--dark-soft-color);
border: none;
color: var(--text-color);
@ -202,6 +212,13 @@
.dark-background .popup-content, .dark-background #chatbox:not(.stickyChat) .chat-content {
box-shadow: 0 0 14px 0px var(--super-dark-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);

76
src/static/skins/colibris/src/plugins/comments.css Normal file
View file

@ -0,0 +1,76 @@
.sidebar-comment .btn {
margin-top: 10px;
padding: 3px 8px;
font-size: .9rem;
margin: 10px 0 5px 0;
}
.sidebar-comment .suggestion-create {
margin-top: 10px;
}
.suggestion-display .from-value, .suggestion-display .to-value {
color: var(--primary-color);
font-weight: bold;
opacity: 1;
}
.suggestion-display .from-value {
margin-right: 5px;
}
.comment-actions-wrapper .buttonicon {
opacity: .8;
}
.comment-actions-wrapper .buttonicon:hover {
opacity: 1;
}
.comment-actions-wrapper .comment-edit {
margin-right: 5px;
}
[type="checkbox"] + label[for="suggestion-checkbox"] {
margin-left: 5px;
padding-left: 2.4rem;
}
.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);
}
.comment-reply {
background-color: var(--bg-soft-color);
border: none;
}
.comment-reply textarea, .comment-reply input[type="text"] {
background-color: var(--bg-color);
}
.btn.revert-suggestion-btn {
padding-left: 0;
}
.comment-edit-form {
margin-top: 15px;
}
.comment-modal .full-display-content {
box-shadow: none;
margin: 0 !important;
}
.comment-modal .comment-modal-comment {
padding: 0;
}
.ace-line .comment {
background-color: rgba(255, 235, 59, 0.5);
}
.new-comment-popup textarea {
background-color: var(--bg-soft-color);
}
.new-comment-popup .suggestion {
margin-bottom: 10px;
}
@media (min-width: 1200px) {
#comments {
width: 300px;
}
.sidebar-comment .full-display-content {
margin-left: 10px;
}
.compact-display-content {
padding-left: 20px;
}
}