mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-21 07:56:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

css: introduce css variables in Colibris skin

Browse source
This commit is contained in:
Sebastian Castro 2020-04-07 12:13:57 +02:00 • committed by muxator
parent a89503a4dd
commit 99d9752b0a
18 changed files with 158 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -23,6 +23,14 @@ html,
font-family: Cantarell, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif; font-family: Cantarell, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
} }
select {
padding: 2px;
border-radius: 3px;
border: 1px solid #ccc;
outline: none;
width: 120px;
}
.clear { .clear {
clear: both clear: both
} }

1
src/static/css/pad/chat.css
View file

@ -83,7 +83,6 @@
padding: 5px; padding: 5px;
} }
#chatinputbox #chatinput { #chatinputbox #chatinput {
border: 1px solid #ccc;
width: 100%; width: 100%;
} }

2
src/static/css/pad/gritter.css
View file

@ -16,9 +16,11 @@
top: auto; top: auto;
bottom: auto; bottom: auto;
} }
.gritter-item .popup-content { .gritter-item .popup-content {
display: flex; display: flex;
} }
.gritter-item .gritter-content { .gritter-item .gritter-content {
flex: 1 auto; flex: 1 auto;
text-align: center; text-align: center;

9
src/static/css/pad/popup.css
View file

@ -60,15 +60,6 @@
.popup p { .popup p {
margin: 5px 0; margin: 5px 0;
} }
.popup select {
background: #fff;
padding: 2px;
height: 24px;
border-radius: 3px;
border: 1px solid #ccc;
outline: none;
width: 120px;
}
/* Mobile devices */ /* Mobile devices */
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {

11
src/static/css/pad/toolbar.css
View file

@ -56,7 +56,7 @@
background: #ddd; background: #ddd;
} }
.toolbar ul li a.selected { .toolbar ul li a.selected {
background: #dadada !important; background: #dadada;
} }
.toolbar ul li a.grouped-left { .toolbar ul li a.grouped-left {
@ -71,15 +71,6 @@
border-left: 0; border-left: 0;
} }
.toolbar ul li select {
padding: 4px;
line-height: 22px;
height: 28px;
border-radius: 3px;
border: 1px solid #ccc;
outline: none;
}
.toolbar ul li[data-key=showusers] > a { .toolbar ul li[data-key=showusers] > a {
min-width: 35px; min-width: 35px;
} }

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

@ -19,67 +19,46 @@
@import url("src/plugins/tables2.css"); @import url("src/plugins/tables2.css");
@import url("src/plugins/author_hover.css"); @import url("src/plugins/author_hover.css");
html {
font-size: 15px;
}
/* ----------------------------------------------------------------- /* -----------------------------------------------------------------
* COLORS * COLORS
* If you want to change main colors, please replace following rules * If you want to change main colors, please replace following rules
* ----------------------------------------------------------------- * -----------------------------------------------------------------
*/ */
/* NEUTRAL COLOR */ :root {
body, --dark-color: #374256;
.btn-default, --dark-soft-color: #576273;
.color\:black, --primary-color: #64d29b;
[data-color=black] --middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */
{ color: #41484e !important; } --light-soft-color: #f2f3f4; /*#f9f9f9;*/
--light-color: white;
/* MENUS ICONS */ --text-color: var(--dark-color);
#edit_title:before, --text-soft-color: var(--dark-soft-color);
#tbl-menu:before --border-color: var(--middle-color);
{ color: #767676 !important; } --bg-soft-color: var(--light-soft-color);
/* MENU BUTTONS */ --bg-color: var(--light-color);
.timeslider #editbar .buttontext
{ background-color: #767676 !important; }
/* PRIMARY BUTTONS */ --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
.btn-primary
{
background-color: #64d29b;
color: white;
} }
body {
color: var(--text-color);
font-family: var(--main-font-family);
}
/* PRIMARY COLOR */ /* PRIMARY COLOR */
h1, h1 {
#slider-btn-container .stepper, #importmessageabiword, #importmessageabiword > a, color: var(--primary-color);
.toolbar .show-more-icon-btn
{ color: #64d29b; }
#timeslider-slider #ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) .popup-content{
background-color: #64d29b;
}
#slider-btn-container button {
border-color: #64d29b;
}
h2 {
opacity: .9 !important; /* make it a bit less agressive */
}
/* PRIMARY-COLOR VARIANT */
.toolbar ul li a.selected,
.toolbar ul li a.pressed,
.toolbar ul li select:active {
background-color: #f0faf6 !important; /* primary light */
}
.toolbar ul li a.selected .buttonicon,
.toolbar ul li a.pressed .buttonicon,
.toolbar ul li select:active {
color: #5abb89; /* primary a bit darker */
} }
/* BACKGROUND COLOR */ /* BACKGROUND COLOR */
#editorcontainerbox { #editorcontainerbox {
background-color: #f9f9f9 !important; background-color: var(--bg-soft-color);
} }
/* FONT */
body,
#sidedivinner > div:before
{ font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }

15
src/static/skins/colibris/src/components/buttons.css
View file

@ -1,10 +1,10 @@
button, .btn, #yui-picker-panel .button-group .yui-button button button, .btn
{ {
padding: 5px 20px; padding: 5px 20px;
border-radius: 4px; border-radius: 4px;
line-height: 1.5; line-height: 1.5;
width: auto; width: auto;
border: none !important; border: none;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
position: relative; position: relative;
@ -12,10 +12,13 @@ button, .btn, #yui-picker-panel .button-group .yui-button button
cursor: pointer; cursor: pointer;
} }
button, select { .btn-primary
font-family: inherit; {
font-size: inherit; background-color: var(--primary-color);
cursor: pointer; color: var(--bg-color);
}
.btn-default {
color: var(--text-color);
} }

7
src/static/skins/colibris/src/components/chat.css
View file

@ -6,7 +6,7 @@
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
width: 400px; width: 400px;
height: 300px; height: 300px;
background-color: #f9f9f9 !important; background-color: var(--bg-soft-color);
} }
#chatbox.stickyChat { #chatbox.stickyChat {
@ -23,7 +23,7 @@
height: 44px; height: 44px;
padding: 0 7px; padding: 0 7px;
z-index: 20000; z-index: 20000;
border-bottom: 1px solid #d2d2d2; border-bottom: 1px solid var(--border-color);
} }
#titlelabel, #chatlabel { #titlelabel, #chatlabel {
@ -35,8 +35,7 @@
#chatlabel { margin-right: 15px; } #chatlabel { margin-right: 15px; }
#chattext { #chattext {
border-bottom: 1px solid #cccccc; border-bottom: 1px solid var(--border-color);
background-color: #fcfcfc;
} }
.plugin-ep_author_neat #chattext { .plugin-ep_author_neat #chattext {

60
src/static/skins/colibris/src/components/form.css
View file

@ -1,11 +1,19 @@
input[type="text"], #input_title, #chatinput, .hyperlink-dialog>.hyperlink-url, select { input[type="text"], select {
border: none !important;
border-radius: 3px; border-radius: 3px;
box-shadow: none;
border: none;
}
input[type="text"] {
padding: 8px 10px; padding: 8px 10px;
height: 28px; background-color: var(--bg-color);
background: none !important; border: 1px solid var(--border-color);
background-color: rgba(255, 255, 255, 0.1) !important; }
box-shadow: none !important; select {
background-color: var(--bg-soft-color);
border: none;
padding: 4px 10px;
font-weight: bold;
} }
@ -33,42 +41,38 @@ input[type="text"], #input_title, #chatinput, .hyperlink-dialog>.hyperlink-url,
[type="checkbox"] + label:after { [type="checkbox"] + label:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0;
left: 0;
margin-top: 4px; margin-top: 4px;
border-radius: 1rem;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
/* BEFORE, the container*/ /* BEFORE, the container*/
[type="checkbox"] + label:before { [type="checkbox"] + label:before {
width: 1.8rem; width: 24px;
height: 1rem; height: 14px;
border: 2px solid #999ea9; top: 0;
background-color: transparent; left: 0;
} border-radius: 6px;
[type="checkbox"]:not(:checked) + label:before { border: 2px solid var(--text-soft-color);
background-color: var(--bg-soft-color);
opacity: .7;
} }
[type="checkbox"]:checked + label:before { [type="checkbox"]:checked + label:before {
background-color: #808894; background-color: transparent;
border-color: white; border-color: var(--primary-color);
} }
/* AFTER, the circle moving */ /* AFTER, the circle moving */
[type="checkbox"] + label:after { [type="checkbox"] + label:after {
width: calc(1rem - 4px); width: 16px;
height: calc(1rem - 4px); height: 16px;
background-color: #999ea9; border-radius: 50%;
top: 2px; background-color: var(--text-soft-color);
left: 2px; top: -1px;
} left: -3px;
[type="checkbox"]:not(:checked) + label:after {
} }
[type="checkbox"]:checked + label:after { [type="checkbox"]:checked + label:after {
background-color: white; background-color: var(--primary-color);;
transform: translateX(.9rem); transform: translateX(14px);
} }
[type="checkbox"]:checked:disabled + label, [type="checkbox"]:checked:disabled + label,

13
src/static/skins/colibris/src/components/gritter.css
View file

@ -2,8 +2,11 @@
top: 20px; top: 20px;
bottom: auto; bottom: auto;
} }
.gritter-item:not(.error) .popup-content{
background-color: var(--primary-color);
color: var(--bg-color);
}
.gritter-item .popup-content { .gritter-item .popup-content {
color: white;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
} }
@ -18,13 +21,7 @@
margin-right: -5px; margin-right: -5px;
} }
.gritter-item:not(.error) .gritter-close .buttonicon { .gritter-item:not(.error) .gritter-close .buttonicon {
color: white; color: var(--bg-color);
}
@media (max-width: 720px) {
.gritter-item {
margin-top: 10px;
margin-bottom: 0;
}
} }
.gritter-item.popup > .popup-content { .gritter-item.popup > .popup-content {

2
src/static/skins/colibris/src/components/import-export.css
View file

@ -1,9 +1,11 @@
#importmessageabiword { #importmessageabiword {
font-style: italic; font-style: italic;
color: var(--primary-color);
} }
#importmessageabiword > a { #importmessageabiword > a {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
color: var(--primary-color);
} }
#importmessagefail { #importmessagefail {

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

@ -2,7 +2,8 @@
border-radius: 5px; border-radius: 5px;
padding: 25px; padding: 25px;
background: none; background: none;
background-color: white; background-color: var(--bg-color);
color: var(--text-soft-color);
border: none; border: none;
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
} }
@ -19,6 +20,7 @@
.popup h2 { .popup h2 {
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 20px; margin-top: 20px;
color: var(--text-color);
} }
.popup p { .popup p {

16
src/static/skins/colibris/src/components/scrollbars.css
View file

@ -1,8 +1,8 @@
@media (min-width: 721px) { @media (min-width: 721px) {
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: var(--middle-color); background-color: var(--scrollbar-track);
border-radius: 10px; border-radius: 10px;
border: 7px solid var(--light-soft-color); border: 7px solid var(--scrollbar-bg);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -11,15 +11,15 @@
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background-color: var(--dark-soft-color); background-color: var(--scrollbar-thumb);
border: 7px solid var(--light-soft-color); border: 7px solid var(--scrollbar-bg);
} }
} }
.thin-scrollbar::-webkit-scrollbar-track { .thin-scrollbar::-webkit-scrollbar-track {
background-color: var(--light-soft-color); background-color: var(--bg-soft-color);
border-radius: 10px; border-radius: 10px;
border: 5px solid var(--light-color); border: 5px solid var(--bg-color);
} }
.thin-scrollbar::-webkit-scrollbar { .thin-scrollbar::-webkit-scrollbar {
@ -28,6 +28,6 @@
.thin-scrollbar::-webkit-scrollbar-thumb { .thin-scrollbar::-webkit-scrollbar-thumb {
border-radius: 7px; border-radius: 7px;
background-color: var(--middle-color); background-color: var(--border-color);
border: 5px solid var(--light-color); border: 5px solid var(--bg-color);
} }

6
src/static/skins/colibris/src/components/sidediv.css
View file

@ -1,12 +1,14 @@
#sidediv { #sidediv {
background-color: transparent; background-color: transparent;
border: none; border: none;
opacity: .8;
} }
#sidedivinner>div:before { #sidedivinner>div:before {
font-family: var(--main-font-family); /* the parent div have font-family monospace (line number) */
color: var(--text-color);
font-size: 13px; font-size: 13px;
padding-right: 18px !important; padding-right: 18px !important;
color: #818188;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px !important; font-size: 11px !important;
font-weight: bold; font-weight: bold;
@ -22,7 +24,7 @@
#sidedivinner>div { #sidedivinner>div {
line-height: 24px; line-height: 24px;
font-size: 10px !important; font-size: 10px !important;
color: #b2aaaa; color: var(--text-soft-color);
} }
#sidedivinner.authorColors>div, #sidedivinner.authorColors>div.primary-none, #sidedivinner>div { #sidedivinner.authorColors>div, #sidedivinner.authorColors>div.primary-none, #sidedivinner>div {

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

@ -1,8 +1,9 @@
.toolbar { .toolbar {
background-color: white; border-bottom: none;
border-bottom: 1px solid #d2d2d2;
padding: 0; padding: 0;
color: #5f6368; background-color: var(--bg-color);
color: var(--text-soft-color);
border-bottom: 1px solid var(--border-color);
} }
.toolbar ul { .toolbar ul {
@ -16,6 +17,7 @@
.toolbar ul li { .toolbar ul li {
margin: 7px 1px; margin: 7px 1px;
} }
.toolbar ul li a, .toolbar .buttonicon { .toolbar ul li a, .toolbar .buttonicon {
color: inherit; color: inherit;
} }
@ -41,10 +43,10 @@
.toolbar ul li.separator:after { .toolbar ul li.separator:after {
content: ""; content: "";
position: absolute; position: absolute;
top: -20px; top: -25px;
height: 40px; height: 50px;
width: 1px; width: 1px;
background-color: rgba(78, 85, 92, 0.22); background-color: var(--border-color);
} }
.toolbar.condensed ul li { .toolbar.condensed ul li {
@ -60,26 +62,30 @@
background: none; background: none;
border: none; border: none;
border-radius: 3px !important; border-radius: 3px !important;
transition: background-color .1s;
} }
.toolbar ul li a:hover, .toolbar ul li select:hover { .toolbar ul li a:hover, .toolbar ul li select:hover {
background-color: #f1f3f3; background-color: var(--bg-soft-color);
color: var(--text-color);
}
.toolbar ul li a.selected {
background-color: var(--bg-soft-color);
}
.toolbar ul li a.pressed,
.toolbar ul li select:active {
color: var(--primary-color);
} }
.toolbar ul li select:active option { .toolbar ul li select:active option {
background-color: white !important; background-color: var(--bg-color);
color: #44464a; color: var(--text-soft-color);
padding: 5px; padding: 5px;
} }
.toolbar ul li select { .toolbar .menu_right li a.selected {
cursor: pointer; background-color: var(--text-soft-color);
border: none; color: var(--bg-color);
background-color: inherit;
border-radius: 3px;
width: auto;
font-weight: bold;
font-size: 14px;
} }
.toolbar ul li[data-key=showusers] { .toolbar ul li[data-key=showusers] {
@ -87,6 +93,8 @@
margin-left: 10px; margin-left: 10px;
width: 45px; width: 45px;
height: 100%; height: 100%;
background-color: var(--bg-color);
color: var(--text-color);
} }
.toolbar ul li[data-key=showusers] > a { .toolbar ul li[data-key=showusers] > a {
width: 100%; width: 100%;
@ -98,8 +106,7 @@
display: none; display: none;
} }
.toolbar .menu_right li { .toolbar .menu_right li {
margin-left: 8px; margin-left: 10px;
opacity: .9;
} }
.toolbar.cropped .menu_left { .toolbar.cropped .menu_left {
@ -110,6 +117,7 @@
width: 35px; width: 35px;
line-height: 35px; line-height: 35px;
font-size: 1.8rem; font-size: 1.8rem;
color: var(--primary-color);
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
@ -122,9 +130,13 @@
@media (max-width: 720px) { @media (max-width: 720px) {
.toolbar ul li {
margin: 5px 1px;
}
.toolbar .menu_right { .toolbar .menu_right {
border-top: 1px solid #d2d2d2; border-top: 1px solid var(--border-color);
background-color: white; background-color: var(--bg-color);
padding: 0; padding: 0;
} }

9
src/static/skins/colibris/src/components/users.css
View file

@ -8,17 +8,10 @@ table#otheruserstable {
border-left: none; border-left: none;
transition: none; transition: none;
} }
.popup#users.chatAndUsers .popup-content {
background-color: white;
color: #374256;
}
.popup#users.chatAndUsers #mycolorpicker.popup { .popup#users.chatAndUsers #mycolorpicker.popup {
right: calc(100% + 30px); right: calc(100% + 30px);
top: 15px; top: 15px;
} }
.popup#users.chatAndUsers #mycolorpicker.popup .btn-default {
color: #374256;
}
#otheruserstable .swatch { #otheruserstable .swatch {
border: none !important; border: none !important;
@ -38,7 +31,7 @@ input#myusernameedit {
min-width: 110px; min-width: 110px;
border: none !important; border: none !important;
background-color: transparent !important; background-color: transparent !important;
border-bottom: 1px solid #ddd !important; border-bottom: 1px solid var(--border-color) !important;
border-radius: 0; border-radius: 0;
padding-bottom: 5px; padding-bottom: 5px;
} }

9
src/static/skins/colibris/src/plugins/font_color.css
View file

@ -6,6 +6,11 @@
display: list-item !important; display: list-item !important;
} }
.color\:black,
[data-color=black] {
color: var(--text-color);
}
.color\:red, .color\:red,
[data-color=red] { [data-color=red] {
color: #F44336; color: #F44336;
@ -23,10 +28,10 @@
.color\:yellow, .color\:yellow,
[data-color=yellow] { [data-color=yellow] {
color: #e0d776; color: #ffeb3b;
} }
.color\:orange, .color\:orange,
[data-color=orange] { [data-color=orange] {
color: #d2a564; color: #FF9800;
} }

13
src/static/skins/colibris/timeslider.css
View file

@ -2,24 +2,26 @@
border-radius: 3px; border-radius: 3px;
width: 12px; width: 12px;
height: 28px; height: 28px;
background-color: var(--primary-color);
} }
#timeslider-slider #ui-slider-bar { #timeslider-slider #ui-slider-bar {
border-radius: 3px; border-radius: 3px;
background-color: #e4e4e4; background-color: var(--border-color);
} }
#slider-btn-container { #slider-btn-container {
margin: -18px 15px 0 20px; margin: -18px 15px 0 20px;
} }
#slider-btn-container #playpause_button_icon { #slider-btn-container #playpause_button_icon {
color: white; color: var(--bg-color);
background-color: var(--primary-color);
border: none;
margin-right: 5px; margin-right: 5px;
padding-top: 3px; padding-top: 3px;
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
#slider-btn-container #playpause_button_icon:not(.pause) { #slider-btn-container #playpause_button_icon:not(.pause) {
padding-left: 4px; padding-left: 4px;
} }
#slider-btn-container .stepper { #slider-btn-container .stepper {
@ -29,13 +31,16 @@
line-height: 28px; line-height: 28px;
margin-left: 5px; margin-left: 5px;
font-size: 13px; font-size: 13px;
color: var(--primary-color);
border-color: var(--primary-color);
} }
#slider-btn-container .stepper.disabled { #slider-btn-container .stepper.disabled {
opacity: .5; opacity: .5;
} }
.timeslider #editbar .buttontext { .timeslider #editbar .buttontext {
color: white; background-color: var(--text-soft-color);
color: var(--bg-color);
margin: 0; margin: 0;
} }