public-offering
/
pad.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css: introduce css variables in Colibris skin

pull/3886/head
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
Show Stats 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;
}
select {
padding: 2px;
border-radius: 3px;
border: 1px solid #ccc;
outline: none;
width: 120px;
}
.clear {
clear: both
}

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

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

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

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

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

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

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

@ -56,7 +56,7 @@
background: #ddd;
}
.toolbar ul li a.selected {
background: #dadada !important;
background: #dadada;
}
.toolbar ul li a.grouped-left {
@ -71,15 +71,6 @@
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 {
min-width: 35px;
}

77
src/static/skins/colibris/pad.css
View File

@ -19,67 +19,46 @@
@import url("src/plugins/tables2.css");
@import url("src/plugins/author_hover.css");
html {
font-size: 15px;
}
/* -----------------------------------------------------------------
* COLORS
* If you want to change main colors, please replace following rules
* -----------------------------------------------------------------
*/
/* NEUTRAL COLOR */
body,
.btn-default,
.color\:black,
[data-color=black]
{ color: #41484e !important; }
:root {
--dark-color: #374256;
--dark-soft-color: #576273;
--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;
/* MENUS ICONS */
#edit_title:before,
#tbl-menu:before
{ color: #767676 !important; }
/* MENU BUTTONS */
.timeslider #editbar .buttontext
{ background-color: #767676 !important; }
--text-color: var(--dark-color);
--text-soft-color: var(--dark-soft-color);
--border-color: var(--middle-color);
--bg-soft-color: var(--light-soft-color);
--bg-color: var(--light-color);
/* PRIMARY BUTTONS */
.btn-primary
{
background-color: #64d29b;
color: white;
--main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body {
color: var(--text-color);
font-family: var(--main-font-family);
}
/* PRIMARY COLOR */
h1,
#slider-btn-container .stepper, #importmessageabiword, #importmessageabiword > a,
.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 */
h1 {
color: var(--primary-color);
}
/* BACKGROUND COLOR */
#editorcontainerbox {
background-color: #f9f9f9 !important;
}
/* FONT */
body,
#sidedivinner > div:before
{ font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
background-color: var(--bg-soft-color);
}

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;
border-radius: 4px;
line-height: 1.5;
width: auto;
border: none !important;
border: none;
font-weight: bold;
text-transform: uppercase;
position: relative;
@ -12,10 +12,13 @@ button, .btn, #yui-picker-panel .button-group .yui-button button
cursor: pointer;
}
button, select {
font-family: inherit;
font-size: inherit;
cursor: pointer;
.btn-primary
{
background-color: var(--primary-color);
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);
width: 400px;
height: 300px;
background-color: #f9f9f9 !important;
background-color: var(--bg-soft-color);
}
#chatbox.stickyChat {
@ -23,7 +23,7 @@
height: 44px;
padding: 0 7px;
z-index: 20000;
border-bottom: 1px solid #d2d2d2;
border-bottom: 1px solid var(--border-color);
}
#titlelabel, #chatlabel {
@ -35,8 +35,7 @@
#chatlabel { margin-right: 15px; }
#chattext {
border-bottom: 1px solid #cccccc;
background-color: #fcfcfc;
border-bottom: 1px solid var(--border-color);
}
.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 {
border: none !important;
input[type="text"], select {
border-radius: 3px;
box-shadow: none;
border: none;
}
input[type="text"] {
padding: 8px 10px;
height: 28px;
background: none !important;
background-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: none !important;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
}
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 {
content: '';
position: absolute;
top: 0;
left: 0;
margin-top: 4px;
border-radius: 1rem;
transition: all .2s ease-in-out;
}
/* BEFORE, the container*/
[type="checkbox"] + label:before {
width: 1.8rem;
height: 1rem;
border: 2px solid #999ea9;
background-color: transparent;
}
[type="checkbox"]:not(:checked) + label:before {
width: 24px;
height: 14px;
top: 0;
left: 0;
border-radius: 6px;
border: 2px solid var(--text-soft-color);
background-color: var(--bg-soft-color);
opacity: .7;
}
[type="checkbox"]:checked + label:before {
background-color: #808894;
border-color: white;
background-color: transparent;
border-color: var(--primary-color);
}
/* AFTER, the circle moving */
[type="checkbox"] + label:after {
width: calc(1rem - 4px);
height: calc(1rem - 4px);
background-color: #999ea9;
top: 2px;
left: 2px;
}
[type="checkbox"]:not(:checked) + label:after {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--text-soft-color);
top: -1px;
left: -3px;
}
[type="checkbox"]:checked + label:after {
background-color: white;
transform: translateX(.9rem);
background-color: var(--primary-color);;
transform: translateX(14px);
}
[type="checkbox"]:checked:disabled + label,

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

@ -2,8 +2,11 @@
top: 20px;
bottom: auto;
}
.gritter-item:not(.error) .popup-content{
background-color: var(--primary-color);
color: var(--bg-color);
}
.gritter-item .popup-content {
color: white;
margin-bottom: 10px;
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;
}
.gritter-item:not(.error) .gritter-close .buttonicon {
color: white;
}
@media (max-width: 720px) {
.gritter-item {
margin-top: 10px;
margin-bottom: 0;
}
color: var(--bg-color);
}
.gritter-item.popup > .popup-content {

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

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

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

@ -2,7 +2,8 @@
border-radius: 5px;
padding: 25px;
background: none;
background-color: white;
background-color: var(--bg-color);
color: var(--text-soft-color);
border: none;
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 {
margin-bottom: 15px;
margin-top: 20px;
color: var(--text-color);
}
.popup p {

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

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

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

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

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

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

15
src/static/skins/colibris/src/plugins/font_color.css
View File

@ -6,27 +6,32 @@
display: list-item !important;
}
.color\:black,
[data-color=black] {
color: var(--text-color);
}
.color\:red,
[data-color=red] {
color: #F44336;
color: #F44336;
}
.color\:green,
[data-color=green] {
color: #66d29c;
color: #66d29c;
}
.color\:blue,
[data-color=blue] {
color: #2196f3;
color: #2196f3;
}
.color\:yellow,
[data-color=yellow] {
color: #e0d776;
color: #ffeb3b;
}
.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;
width: 12px;
height: 28px;
background-color: var(--primary-color);
}
#timeslider-slider #ui-slider-bar {
border-radius: 3px;
background-color: #e4e4e4;
background-color: var(--border-color);
}
#slider-btn-container {
margin: -18px 15px 0 20px;
}
#slider-btn-container #playpause_button_icon {
color: white;
color: var(--bg-color);
background-color: var(--primary-color);
border: none;
margin-right: 5px;
padding-top: 3px;
width: 45px;
height: 45px;
}
#slider-btn-container #playpause_button_icon:not(.pause) {
padding-left: 4px;
}
#slider-btn-container .stepper {
@ -29,13 +31,16 @@
line-height: 28px;
margin-left: 5px;
font-size: 13px;
color: var(--primary-color);
border-color: var(--primary-color);
}
#slider-btn-container .stepper.disabled {
opacity: .5;
}
.timeslider #editbar .buttontext {
color: white;
background-color: var(--text-soft-color);
color: var(--bg-color);
margin: 0;
}