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

css: Still some adjustements to handle all variants properly

Browse source
This commit is contained in:
Sebastian Castro 2020-04-08 18:14:41 +02:00 committed by muxator
parent c6f5ced23c
commit 7fb086edbe
6 changed files with 86 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/static/css/iframe_editor.css
View file

@ -87,7 +87,7 @@ body.doesWrap:not(.noprewrap) > div {
font-size: 11px;
font-family: monospace;
padding-right: 5px;
padding-left: 5px;
padding-left: 12px;
background-color: transparent;
border-right: 1px solid #ccc;
}
@ -99,7 +99,11 @@ body.doesWrap:not(.noprewrap) > div {
color: transparent;
}
.sidedivhidden {
display: none;
/* Do not use display: none to hide the sidediv, otherwise the parent container does not
get its height properly calculated by flexboxes */
visibility: hidden;
width: 0;
padding: 0;
}
#linemetricsdiv {
position: absolute;

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

@ -39,7 +39,7 @@ html {
--primary-color: #64d29b;
--middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */
--light-soft-color: #d8dade;
--light-soft-color: #e5e6e6;
--light-color: #f2f3f4; /*#f9f9f9;*/
--super-light-color: white;
}
@ -52,6 +52,21 @@ html {
--bg-color: var(--super-light-color);
--main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--editor-padding: 40px 55px;
--editor-padding-top: 40px;
}
/* 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);
}
@ -69,4 +84,4 @@ h1 {
/* BACKGROUND COLOR */
#editorcontainerbox {
background-color: #f2f3f4; /* default */
}
}

17
src/static/skins/colibris/src/components/popup.css
View file

@ -47,3 +47,20 @@
min-width: 0;
}
}
/* SKIN Variants Popup */
#skin-variants {
bottom: 0;
left: 0;
right: auto;
top: auto;
}
#skin-variants .popup-content > p {
margin-top: 25px;
}
#skin-variants-result{
background-color: var(--bg-soft-color)
}
.skin-variant-container {
text-transform: capitalize;
}

2
src/static/skins/colibris/src/components/toolbar.css
View file

@ -3,7 +3,7 @@
padding: 0;
background-color: var(--bg-color);
color: var(--text-soft-color);
border-bottom: 1px solid var(--border-color);
border-bottom: none;
}
.toolbar ul {

17
src/static/skins/colibris/src/layout.css
View file

@ -14,15 +14,18 @@
#outerdocbody iframe, #outerdocbody > #innerdocbody {
max-width: 900px;
padding: 55px;
box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52);
padding: 40px 55px;
padding: var(--editor-padding);
padding-top: var(--editor-padding-top);
box-shadow: none;
border: 0;
border-radius: 5px;
border-radius: 8px;
background-color: var(--bg-color);
color: var(--text-color);
}
#sidediv {
padding-top: 55px; /* = #innerdocbody iframe padding-top */
padding-top: 40px; /* = #innerdocbody iframe padding-top */
padding-top: var(--editor-padding-top);
}
/* Fixs author_hover does not take in account the document padding */
@ -36,12 +39,6 @@
#outerdocbody.plugin-ep_author_neat .caretindicator{ margin-left: 17px; }
}
@media (min-width: 1001px) {
#outerdocbody {
min-height: calc(100vh - 20px);
}
}
@media (max-width:1000px) {
#outerdocbody {
padding-top: 0;

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

@ -49,11 +49,6 @@
--bg-soft-color: var(--dark-soft-color);
--bg-color: var(--dark-color);
}
.dark-toolbar #outerdocbody iframe, .dark-toolbar #outerdocbody > #innerdocbody {
box-shadow: none;
border: 1px solid #ececec;
border-radius: 8px;
}
@ -80,6 +75,11 @@
.super-light-background #chatbox.stickyChat .chat-content {
box-shadow: none;
}
.super-light-background body, .full-width-editor.super-light-editor body {
--scrollbar-bg: var(--super-light-color);
--scrollbar-track: var(--light-color);
--scrollbar-thumb: var(--dark-soft-color);
}
/* ====================== */
/* == Light Background == */
/* ====================== */
@ -91,7 +91,7 @@
--bg-color: var(--light-color);
background-color: var(--light-color);
}
.light-background body {
.light-background body, .full-width-editor.light-editor body {
--scrollbar-bg: var(--light-color);
--scrollbar-track: var(--light-soft-color);
--scrollbar-thumb: var(--dark-soft-color);
@ -135,22 +135,17 @@
.super-dark-background #editorcontainerbox {
background-color: var(--super-dark-color);
}
.super-dark-background body {
.super-dark-background body, .full-width-editor.super-dark-editor body {
--scrollbar-bg: var(--super-dark-color);
--scrollbar-track: var(--dark-color);
--scrollbar-thumb: var(--light-soft-color);
}
.super-dark-background .toolbar {
border-bottom: 1px solid var(--super-dark-color);
}
.super-dark-background #outerdocbody iframe, .super-dark-background #outerdocbody > #innerdocbody {
box-shadow: none;
border: none;
border-radius: 8px;
}
.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 input[type="text"] {
background-color: var(--bg-soft-color);
@ -183,23 +178,18 @@
.dark-background #editorcontainerbox {
background-color: var(--dark-color);
}
.dark-background body {
.dark-background body, .full-width-editor.dark-editor body {
--scrollbar-bg: var(--dark-color);
--scrollbar-track: var(--dark-soft-color);
--scrollbar-thumb: var(--light-soft-color);
}
.dark-background .toolbar {
border-bottom: 1px solid var(--dark-color);
}
.dark-background #outerdocbody iframe, .dark-background #outerdocbody > #innerdocbody {
box-shadow: none;
border: none;
border-radius: 8px;
}
.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);
}
.dark-background input[type="text"] {
background-color: var(--dark-soft-color);
@ -213,7 +203,7 @@
box-shadow: 0 0 14px 0px var(--super-dark-color);
}
/* Special combinaison with toolbar */
.dark-background.dark-toolbar .popup-content {
.dark-background.dark-toolbar .popup-content, .dark-editor.dark-toolbar .popup-content {
box-shadow: 0 0 14px 0px var(--super-dark-color);
}
.dark-background.dark-toolbar .toolbar {
@ -265,17 +255,6 @@
/* ============================= */
/* == Combinaison with editor == */
/* ============================= */
.super-light-editor.super-light-background #outerdocbody iframe,
.super-light-editor.super-light-background #outerdocbody > #innerdocbody,
.light-editor.light-background #outerdocbody iframe,
.light-editor.light-background #outerdocbody > #innerdocbody,
.super-dark-editor.super-dark-background #outerdocbody iframe,
.super-dark-editor.super-dark-background #outerdocbody > #innerdocbody,
.dark-editor.dark-background #outerdocbody iframe,
.dark-editor.dark-background #outerdocbody > #innerdocbody {
box-shadow: none;
border: none;
}
.super-light-editor.super-light-background #outerdocbody,
.light-editor.light-background #outerdocbody,
.super-dark-editor.super-dark-background #outerdocbody,
@ -283,36 +262,29 @@
padding-top: 0;
}
@media (min-width: 1001px) {
.super-light-editor.super-light-background #outerdocbody iframe,
.super-light-editor.super-light-background #outerdocbody > #innerdocbody,
.super-light-editor.super-light-background #sidediv,
.light-editor.light-background #outerdocbody iframe,
.light-editor.light-background #outerdocbody > #innerdocbody,
.light-editor.light-background #sidediv,
.super-dark-editor.super-dark-background #outerdocbody iframe,
.super-dark-editor.super-dark-background #outerdocbody > #innerdocbody,
.super-dark-editor.super-dark-background #sidediv,
.dark-editor.dark-background #outerdocbody iframe,
.dark-editor.dark-background #outerdocbody > #innerdocbody,
.dark-editor.dark-background #sidediv {
padding-top: 35px;
.super-light-editor.super-light-background,
.light-editor.light-background,
.super-dark-editor.super-dark-background,
.dark-editor.dark-background {
--editor-padding: 20px 35px;
--editor-padding-top: 20px;
}
}
.super-light-editor.super-light-background #chaticon {
--bg-color: var(--light-color);
--bg-soft-color: var(--light-color);
--text-color: var(--dark-color);
}
.light-editor.light-background #chaticon {
--bg-color: var(--super-light-color);
--bg-soft-color: var(--super-light-color);
--text-color: var(--dark-color);
}
.super-dark-editor.super-dark-background #chaticon {
--bg-color: var(--dark-color);
--bg-soft-color: var(--dark-color);
--text-color: var(--light-color);
}
.dark-editor.dark-background #chaticon {
--bg-color: var(--light-color);
--bg-soft-color: var(--light-color);
--text-color: var(--dark-color);
}
@ -323,9 +295,19 @@
/* ======================= */
.full-width-editor #outerdocbody iframe, .full-width-editor #outerdocbody > #innerdocbody {
max-width: none !important;
border-radius: 0;
}
@media (min-width: 721px) {
.full-width-editor #chaticon {
right: 15px;
.full-width-editor #outerdocbody {
padding: 0;
margin: 0;
}
@media (min-width: 1001px) {
.full-width-editor {
--editor-padding: 20px 35px;
--editor-padding-top: 20px;
}
}
.full-width-editor ::-webkit-scrollbar-track,
.full-width-editor ::-webkit-scrollbar-thumb {
border-radius: 0px;
}