diff --git a/src/static/css/iframe_editor.css b/src/static/css/iframe_editor.css index 2c50e37bb..7c3a8862f 100644 --- a/src/static/css/iframe_editor.css +++ b/src/static/css/iframe_editor.css @@ -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; diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css index 7f648dbcd..c8f179580 100644 --- a/src/static/skins/colibris/pad.css +++ b/src/static/skins/colibris/pad.css @@ -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 */ -} \ No newline at end of file +} diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css index 3fac71eb2..c34dee37c 100644 --- a/src/static/skins/colibris/src/components/popup.css +++ b/src/static/skins/colibris/src/components/popup.css @@ -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; +} diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css index ce83a908e..dc4a0fc18 100644 --- a/src/static/skins/colibris/src/components/toolbar.css +++ b/src/static/skins/colibris/src/components/toolbar.css @@ -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 { diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index f433e6bd3..9a9bd4d34 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/src/static/skins/colibris/src/layout.css @@ -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; diff --git a/src/static/skins/colibris/src/pad-variants.css b/src/static/skins/colibris/src/pad-variants.css index 3c51f3900..5db91efa0 100644 --- a/src/static/skins/colibris/src/pad-variants.css +++ b/src/static/skins/colibris/src/pad-variants.css @@ -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; } \ No newline at end of file