mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-01-19 14:13:34 +01:00
colibris: introduce skin variants, in order to customize the rendering
This provide a nice way to change the colors of main containers from settings file. See comment inside settings for how it works
This commit is contained in:
Sebastian Castro
muxator
parent
913d5fd0d9
commit
709e5d2233
13 changed files with 418 additions and 20 deletions
|
|
@ -95,6 +95,30 @@
|
|||
*/
|
||||
"skinName": "${SKIN_NAME:colibris}",
|
||||
|
||||
/*
|
||||
* Skin Variants
|
||||
*
|
||||
* For the colibris skin only, you can choose how to render the three main
|
||||
* containers:
|
||||
* - toolbar (top menu with icons)
|
||||
* - editor (containing the text of the pad)
|
||||
* - background (area outside of editor, mostly visible when using page style)
|
||||
*
|
||||
* For each of the 3 containers you can choose 4 color combinations:
|
||||
* super-light, light, dark, super-dark.
|
||||
*
|
||||
* For example, to make the toolbar dark, you will include "dark-toolbar" into
|
||||
* skinVariants.
|
||||
*
|
||||
* You can provide multiple skin variants separated by spaces. Default
|
||||
* skinVariant is "super-light-toolbar super-light-editor light-background".
|
||||
*
|
||||
* For the editor container, you can also make it full width by adding
|
||||
* "full-width-editor" variant (by default editor is rendered as a page, with
|
||||
* a max-width of 900px).
|
||||
*/
|
||||
"skinVariants": "super-light-toolbar super-light-editor light-background",
|
||||
|
||||
/*
|
||||
* IP and port which Etherpad should bind at.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -86,6 +86,30 @@
|
|||
*/
|
||||
"skinName": "colibris",
|
||||
|
||||
/*
|
||||
* Skin Variants
|
||||
*
|
||||
* For the colibris skin only, you can choose how to render the three main
|
||||
* containers:
|
||||
* - toolbar (top menu with icons)
|
||||
* - editor (containing the text of the pad)
|
||||
* - background (area outside of editor, mostly visible when using page style)
|
||||
*
|
||||
* For each of the 3 containers you can choose 4 color combinations:
|
||||
* super-light, light, dark, super-dark.
|
||||
*
|
||||
* For example, to make the toolbar dark, you will include "dark-toolbar" into
|
||||
* skinVariants.
|
||||
*
|
||||
* You can provide multiple skin variants separated by spaces. Default
|
||||
* skinVariant is "super-light-toolbar super-light-editor light-background".
|
||||
*
|
||||
* For the editor container, you can also make it full width by adding
|
||||
* "full-width-editor" variant (by default editor is rendered as a page, with
|
||||
* a max-width of 900px).
|
||||
*/
|
||||
"skinVariants": "super-light-toolbar super-light-editor light-background",
|
||||
|
||||
/*
|
||||
* IP and port which Etherpad should bind at.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1065,6 +1065,7 @@ async function handleClientReady(client, message)
|
|||
// mile wide...
|
||||
var clientVars = {
|
||||
"skinName": settings.skinName,
|
||||
"skinVariants": settings.skinVariants,
|
||||
"accountPrivs": {
|
||||
"maxRevisions": 100
|
||||
},
|
||||
|
|
|
|||
|
|
@ -62,6 +62,8 @@ exports.faviconTimeslider = "../../" + exports.favicon;
|
|||
*/
|
||||
exports.skinName = null;
|
||||
|
||||
exports.skinVariants = "super-light-toolbar super-light-editor light-background";
|
||||
|
||||
/**
|
||||
* The IP ep-lite should listen to
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -225,7 +225,7 @@ function Ace2Editor()
|
|||
var iframeHTML = [];
|
||||
|
||||
iframeHTML.push(doctype);
|
||||
iframeHTML.push("<html class='inner-editor'><head>");
|
||||
iframeHTML.push("<html class='inner-editor " + clientVars.skinVariants + "'><head>");
|
||||
|
||||
// calls to these functions ($$INCLUDE_...) are replaced when this file is processed
|
||||
// and compressed, putting the compressed code from the named file directly into the
|
||||
|
|
@ -316,7 +316,7 @@ window.onload = function () {\n\
|
|||
}, 0);\n\
|
||||
}';
|
||||
|
||||
var outerHTML = [doctype, '<html class="inner-editor outerdoc"><head>']
|
||||
var outerHTML = [doctype, '<html class="inner-editor outerdoc ' + clientVars.skinVariants + '"><head>']
|
||||
|
||||
var includedCSS = [];
|
||||
var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@
|
|||
@import url("src/plugins/tables2.css");
|
||||
@import url("src/plugins/author_hover.css");
|
||||
|
||||
@import url("src/pad-variants.css");
|
||||
|
||||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
|
@ -30,18 +32,24 @@ html {
|
|||
*/
|
||||
|
||||
:root {
|
||||
--dark-color: #374256;
|
||||
--dark-soft-color: #576273;
|
||||
--super-dark-color: #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: #f2f3f4; /*#f9f9f9;*/
|
||||
--light-color: white;
|
||||
|
||||
--text-color: var(--dark-color);
|
||||
--text-soft-color: var(--dark-soft-color);
|
||||
--light-soft-color: #d8dade;
|
||||
--light-color: #f2f3f4; /*#f9f9f9;*/
|
||||
--super-light-color: white;
|
||||
}
|
||||
|
||||
html {
|
||||
--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-color: var(--light-color);
|
||||
--bg-soft-color: var(--light-color);
|
||||
--bg-color: var(--super-light-color);
|
||||
|
||||
--main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
|
@ -60,5 +68,5 @@ h1 {
|
|||
|
||||
/* BACKGROUND COLOR */
|
||||
#editorcontainerbox {
|
||||
background-color: var(--bg-soft-color);
|
||||
background-color: #f2f3f4; /* default */
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
#chatbox.stickyChat {
|
||||
border: none;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
|
||||
#chatbox.stickyChat.chatAndUsersChat{
|
||||
|
|
@ -36,6 +37,8 @@
|
|||
|
||||
#chattext {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.plugin-ep_author_neat #chattext {
|
||||
|
|
@ -60,9 +63,10 @@
|
|||
}
|
||||
|
||||
#chaticon {
|
||||
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--bg-soft-color);
|
||||
color: var(--text-color);
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: var(--bg-soft-color);
|
||||
background-color: var(--scrollbar-track);
|
||||
border-radius: 10px;
|
||||
border: 5px solid var(--bg-color);
|
||||
border: 5px solid var(--scrollbar-bg);
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar {
|
||||
|
|
@ -28,6 +28,6 @@
|
|||
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 7px;
|
||||
background-color: var(--border-color);
|
||||
border: 5px solid var(--bg-color);
|
||||
background-color: var(--scrollbar-thumb);
|
||||
border: 5px solid var(--scrollbar-bg);
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ table#otheruserstable {
|
|||
height: 250px;
|
||||
border-left: none;
|
||||
transition: none;
|
||||
border-bottom-color: var(--border-color)
|
||||
}
|
||||
.popup#users.chatAndUsers #mycolorpicker.popup {
|
||||
right: calc(100% + 30px);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52);
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
#sidediv {
|
||||
padding-top: 55px; /* = #innerdocbody iframe padding-top */
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
#innerdocbody, #innerdocbody {
|
||||
#innerdocbody {
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#innerdocbody span, #innerdocbody span {
|
||||
|
|
@ -26,5 +28,5 @@ option {
|
|||
}
|
||||
|
||||
#innerdocbody a {
|
||||
color: #3f51b5;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
331
src/static/skins/colibris/src/pad-variants.css
Normal file
331
src/static/skins/colibris/src/pad-variants.css
Normal file
|
|
@ -0,0 +1,331 @@
|
|||
/* =========================== */
|
||||
/* === Super Light Toolbar === */
|
||||
/* =========================== */
|
||||
.super-light-toolbar .toolbar, .super-light-toolbar .popup-content {
|
||||
--text-color: var(--dark-color);
|
||||
--text-soft-color: var(--dark-soft-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 === */
|
||||
/* ===================== */
|
||||
.light-toolbar .toolbar, .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-soft-color);
|
||||
--bg-color: var(--light-color);
|
||||
}
|
||||
.popup input[type="text"] {
|
||||
background-color: var(--super-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);
|
||||
--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);
|
||||
box-shadow: none;
|
||||
}
|
||||
/* ==================== */
|
||||
/* === Dark Toolbar === */
|
||||
/* ==================== */
|
||||
.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);
|
||||
--bg-color: var(--dark-color);
|
||||
}
|
||||
.dark-toolbar #outerdocbody iframe, .dark-toolbar #outerdocbody > #innerdocbody {
|
||||
box-shadow: none;
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ============================ */
|
||||
/* == Super Light Background == */
|
||||
/* ============================ */
|
||||
.super-light-background #editorcontainerbox, .super-light-background #sidediv {
|
||||
--text-color: var(--dark-color);
|
||||
--text-soft-color: var(--dark-soft-color);
|
||||
--border-color: var(--light-soft-color);
|
||||
--bg-soft-color: var(--light-color);
|
||||
--bg-color: var(--super-light-color);
|
||||
background-color: var(--super-light-color);
|
||||
}
|
||||
.super-light-background.super-light-toolbar .toolbar {
|
||||
--border-color: var(--super-light-color);
|
||||
}
|
||||
.super-light-background #chatbox, .super-light-background #chatbox.stickyChat {
|
||||
--bg-color: var(--super-light-color);
|
||||
--bg-soft-color: var(--super-light-color);
|
||||
}
|
||||
.super-light-background #chatbox.stickyChat {
|
||||
box-shadow: none;
|
||||
}
|
||||
/* ====================== */
|
||||
/* == Light Background == */
|
||||
/* ====================== */
|
||||
.light-background #editorcontainerbox, .light-background #sidediv {
|
||||
--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);
|
||||
--bg-color: var(--light-color);
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
.light-background body {
|
||||
--scrollbar-bg: var(--light-color);
|
||||
--scrollbar-track: var(--light-soft-color);
|
||||
--scrollbar-thumb: var(--dark-soft-color);
|
||||
}
|
||||
.light-background.light-toolbar .toolbar {
|
||||
--border-color: var(--light-color);
|
||||
}
|
||||
.light-background input[type="text"] {
|
||||
background-color: var(--super-light-color);
|
||||
}
|
||||
.light-background #chatbox, .light-background #chatbox.stickyChat {
|
||||
--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 {
|
||||
box-shadow: none;
|
||||
}
|
||||
/* Special combinaison with toolbar */
|
||||
.light-background.light-toolbar .toolbar {
|
||||
--border-color: var(--light-color);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
/* =========================== */
|
||||
/* == Super Dark Background == */
|
||||
/* =========================== */
|
||||
.super-dark-background #editorcontainerbox, .super-dark-background #sidediv {
|
||||
--text-color: var(--light-color);
|
||||
--text-soft-color: var(--light-soft-color);
|
||||
--border-color: var(--dark-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 {
|
||||
--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 #chatbox, .super-dark-background #chatbox.stickyChat {
|
||||
background-color: var(--super-dark-color);
|
||||
color: var(--light-color);
|
||||
}
|
||||
.super-dark-background input[type="text"] {
|
||||
background-color: var(--bg-soft-color);
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.super-dark-background input[type="text"]::placeholder {
|
||||
color: var(--middle-color);
|
||||
}
|
||||
.super-dark-background #chatbox:not(.stickyChat) {
|
||||
border: 1px solid var(--dark-color);
|
||||
}
|
||||
/* Special combinaison with toolbar */
|
||||
.super-dark-background.super-dark-toolbar .popup-content {
|
||||
border: 1px solid var(--dark-color);
|
||||
}
|
||||
.super-dark-background.super-dark-toolbar .toolbar {
|
||||
--border-color: var(--super-dark-color);
|
||||
}
|
||||
/* ===================== */
|
||||
/* == Dark Background == */
|
||||
/* ===================== */
|
||||
.dark-background #editorcontainerbox, .dark-background #sidediv {
|
||||
--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);
|
||||
--bg-color: var(--dark-color);
|
||||
}
|
||||
.dark-background #editorcontainerbox {
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
.dark-background 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 #chatbox, .dark-background #chatbox.stickyChat {
|
||||
background-color: var(--dark-color);
|
||||
color: var(--super-light-color);
|
||||
--border-color: var(--dark-soft-color);
|
||||
}
|
||||
.dark-background input[type="text"] {
|
||||
background-color: var(--dark-soft-color);
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.dark-background input[type="text"]::placeholder {
|
||||
color: var(--middle-color);
|
||||
}
|
||||
.dark-background .popup-content, .dark-background #chatbox:not(.stickyChat) {
|
||||
box-shadow: 0 0 14px 0px var(--super-dark-color);
|
||||
}
|
||||
/* Special combinaison with toolbar */
|
||||
.dark-background.dark-toolbar .popup-content {
|
||||
box-shadow: 0 0 14px 0px var(--super-dark-color);
|
||||
}
|
||||
.dark-background.dark-toolbar .toolbar {
|
||||
--border-color: var(--dark-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ======================== */
|
||||
/* == Super Light Editor == */
|
||||
/* ======================== */
|
||||
.super-light-editor #outerdocbody iframe, .super-light-editor #outerdocbody > #innerdocbody {
|
||||
--bg-color: var(--super-light-color);
|
||||
}
|
||||
.super-light-editor #innerdocbody {
|
||||
--text-color: var(--super-dark-color);
|
||||
}
|
||||
/* ================== */
|
||||
/* == Light Editor == */
|
||||
/* ================== */
|
||||
.light-editor #outerdocbody iframe, .light-editor #outerdocbody > #innerdocbody {
|
||||
--bg-color: var(--light-color);
|
||||
}
|
||||
.light-editor #innerdocbody {
|
||||
--text-color: var(--super-dark-color);
|
||||
}
|
||||
/* ======================= */
|
||||
/* == Super Dark Editor == */
|
||||
/* ======================= */
|
||||
.super-dark-editor #outerdocbody iframe, .super-dark-editor #outerdocbody > #innerdocbody {
|
||||
--bg-color: var(--super-dark-color);
|
||||
}
|
||||
.super-dark-editor #innerdocbody {
|
||||
--text-color: var(--super-light-color);
|
||||
}
|
||||
/* ================= */
|
||||
/* == Dark Editor == */
|
||||
/* ================= */
|
||||
.dark-editor #outerdocbody iframe, .dark-editor #outerdocbody > #innerdocbody {
|
||||
--bg-color: var(--dark-color);
|
||||
}
|
||||
.dark-editor #innerdocbody {
|
||||
--text-color: var(--super-light-color);
|
||||
}
|
||||
|
||||
|
||||
/* ============================= */
|
||||
/* == 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,
|
||||
.dark-editor.dark-background #outerdocbody {
|
||||
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 #chaticon {
|
||||
--bg-color: var(--light-color);
|
||||
--text-color: var(--dark-color);
|
||||
}
|
||||
.light-editor.light-background #chaticon {
|
||||
--bg-color: var(--super-light-color);
|
||||
--text-color: var(--dark-color);
|
||||
}
|
||||
.super-dark-editor.super-dark-background #chaticon {
|
||||
--bg-color: var(--dark-color);
|
||||
--text-color: var(--light-color);
|
||||
}
|
||||
.dark-editor.dark-background #chaticon {
|
||||
--bg-color: var(--light-color);
|
||||
--text-color: var(--dark-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ======================= */
|
||||
/* == Full Width Editor == */
|
||||
/* ======================= */
|
||||
.full-width-editor #outerdocbody iframe, .full-width-editor #outerdocbody > #innerdocbody {
|
||||
max-width: none !important;
|
||||
}
|
||||
@media (min-width: 721px) {
|
||||
.full-width-editor #chaticon {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<!doctype html>
|
||||
|
||||
<% e.begin_block("htmlHead"); %>
|
||||
<html class="<%=hooks.clientPluginNames().join(' '); %>">
|
||||
<html class="<%=hooks.clientPluginNames().join(' '); %> <%=settings.skinVariants%>">
|
||||
<% e.end_block(); %>
|
||||
|
||||
<title><%=settings.title%></title>
|
||||
|
|
|
|||
Loading…
Reference in a new issue