mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-01-31 19:02:59 +01:00
css: add default color/variable for browsers non supporting css variables
This commit is contained in:
Sebastian Castro
muxator
parent
6de996c973
commit
621448b92f
17 changed files with 103 additions and 27 deletions
|
|
@ -1,3 +1,4 @@
|
|||
@import url("src/general.css");
|
||||
@import url("src/layout.css");
|
||||
@import url("src/pad-editor.css");
|
||||
|
||||
|
|
@ -22,13 +23,9 @@
|
|||
|
||||
@import url("src/pad-variants.css");
|
||||
|
||||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
* COLORS
|
||||
* If you want to change main colors, please replace following rules
|
||||
* If you want to change main colors, please replace following CSS variables
|
||||
* -----------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
|
@ -41,9 +38,7 @@ html {
|
|||
|
||||
--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);
|
||||
|
|
@ -59,18 +54,6 @@ html {
|
|||
/* Default scrollbar values */
|
||||
body {
|
||||
--scrollbar-bg: var(--light-color);
|
||||
--scrollbar-track: var(--light-color);
|
||||
--scrollbar-track: var(--super-light-color);
|
||||
--scrollbar-thumb: var(--dark-color);
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
color: var(--text-color);
|
||||
font-family: var(--main-font-family);
|
||||
}
|
||||
|
||||
|
||||
/* PRIMARY COLOR */
|
||||
h1 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,13 @@ button, .btn
|
|||
|
||||
.btn-primary
|
||||
{
|
||||
background-color: #64d29b;
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
.btn-default {
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
padding: 0;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
|
||||
|
|
@ -16,7 +17,9 @@
|
|||
|
||||
#chaticon {
|
||||
padding: 10px 20px;
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
right: 30px;
|
||||
}
|
||||
|
|
@ -24,6 +27,7 @@
|
|||
#chatbox.stickyChat .chat-content {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
|
||||
|
|
@ -45,8 +49,10 @@
|
|||
|
||||
#chattext {
|
||||
padding: 0;
|
||||
border-top: 1px solid #ffffff;
|
||||
border-top: 1px solid var(--bg-color);
|
||||
border-bottom: 1px solid var(--bg-color); /*#e5e7ea;*/
|
||||
border-bottom: 1px solid #ffffff;
|
||||
border-bottom: 1px solid var(--bg-color);
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -69,6 +75,7 @@
|
|||
padding: 8px;
|
||||
}
|
||||
#chatinputbox #chatinput {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,14 +7,18 @@ input[type="text"], select, textarea, .nice-select {
|
|||
|
||||
input[type="text"], textarea {
|
||||
padding: 8px 10px;
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
border: none;
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
input[type="text"]::placeholder, textarea::placeholder {
|
||||
color: #576273;
|
||||
color: var(--text-soft-color);
|
||||
}
|
||||
select, .nice-select {
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
border: none;
|
||||
padding: 4px 10px;
|
||||
|
|
@ -23,9 +27,11 @@ select, .nice-select {
|
|||
line-height: inherit;
|
||||
}
|
||||
.nice-select .list {
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
.nice-select .option {
|
||||
|
|
@ -72,12 +78,15 @@ select, .nice-select {
|
|||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #576273;
|
||||
border: 2px solid var(--text-soft-color);
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
opacity: .7;
|
||||
}
|
||||
[type="checkbox"]:checked + label:before {
|
||||
background-color: transparent;
|
||||
border-color: #64d29b;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
|
@ -86,12 +95,14 @@ select, .nice-select {
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background-color: #576273;
|
||||
background-color: var(--text-soft-color);
|
||||
top: -1px;
|
||||
left: -3px;
|
||||
}
|
||||
[type="checkbox"]:checked + label:after {
|
||||
background-color: var(--primary-color);;
|
||||
background-color: #64d29b;
|
||||
background-color: var(--primary-color);
|
||||
transform: translateX(14px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
bottom: auto;
|
||||
}
|
||||
.gritter-item:not(.error) .popup-content{
|
||||
background-color: #64d29b;
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
.gritter-item .popup-content {
|
||||
|
|
@ -21,6 +23,7 @@
|
|||
margin-right: -5px;
|
||||
}
|
||||
.gritter-item:not(.error) .gritter-close .buttonicon {
|
||||
color: #ffffff;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
#importmessageabiword {
|
||||
font-style: italic;
|
||||
color: #64d29b;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
#importmessageabiword > a {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
color: #64d29b;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
border-radius: 5px;
|
||||
padding: 25px;
|
||||
background: none;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
color: #576273;
|
||||
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);
|
||||
|
|
@ -20,6 +22,7 @@
|
|||
.popup h2 {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 20px;
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +62,8 @@
|
|||
margin-top: 25px;
|
||||
}
|
||||
#skin-variants-result{
|
||||
background-color: var(--bg-soft-color)
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
.skin-variant-container {
|
||||
text-transform: capitalize;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@media (min-width: 721px) {
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: white;
|
||||
background-color: var(--scrollbar-track);
|
||||
border-radius: 10px;
|
||||
border: 7px solid #f2f3f4;
|
||||
border: 7px solid var(--scrollbar-bg);
|
||||
}
|
||||
|
||||
|
|
@ -11,15 +13,18 @@
|
|||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #576273;
|
||||
background-color: var(--scrollbar-thumb);
|
||||
border: 7px solid #f2f3f4;
|
||||
border: 7px solid var(--scrollbar-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar-track {
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
border-radius: 0px;
|
||||
border: 0px solid var(--bg-soft-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.thin-scrollbar::-webkit-scrollbar {
|
||||
|
|
@ -28,6 +33,7 @@
|
|||
|
||||
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 0px;
|
||||
background-color: #d2d2d2;
|
||||
background-color: var(--middle-color);
|
||||
border: 0px solid var(--bg-soft-color);
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
#sidedivinner>div:before {
|
||||
font-family: var(--main-font-family); /* the parent div have font-family monospace (line number) */
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
font-size: 13px;
|
||||
padding-right: 18px !important;
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
#sidedivinner>div {
|
||||
line-height: 24px;
|
||||
font-size: 10px !important;
|
||||
color: #576273;
|
||||
color: var(--text-soft-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
.toolbar {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
color: #576273;
|
||||
color: var(--text-soft-color);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -57,25 +59,33 @@
|
|||
}
|
||||
|
||||
.toolbar ul li a:hover, .toolbar ul li select:hover {
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.toolbar ul li a.selected {
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
.toolbar ul li a.pressed,
|
||||
.toolbar ul li select:active {
|
||||
color: #64d29b;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.toolbar ul li select:active option {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
color: #576273;
|
||||
color: var(--text-soft-color);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.toolbar .menu_right li a.selected {
|
||||
background-color: #576273;
|
||||
background-color: var(--text-soft-color);
|
||||
color: #ffffff;
|
||||
color: var(--bg-color);
|
||||
}
|
||||
|
||||
|
|
@ -104,6 +114,7 @@
|
|||
}
|
||||
.toolbar .show-more-icon-btn {
|
||||
font-size: 1.8rem;
|
||||
color: #64d29b;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
|
@ -122,7 +133,9 @@
|
|||
}
|
||||
|
||||
.toolbar .menu_right {
|
||||
border-top: 1px solid #d2d2d2;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ table#otheruserstable {
|
|||
height: 250px;
|
||||
border-left: none;
|
||||
transition: none;
|
||||
border-bottom-color: var(--border-color)
|
||||
border-bottom-color: #d2d2d2;
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
.popup#users.chatAndUsers #mycolorpicker.popup {
|
||||
right: calc(100% + 30px);
|
||||
|
|
@ -32,6 +33,7 @@ input#myusernameedit {
|
|||
min-width: 110px;
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
border-bottom: 1px solid #d2d2d2 !important;
|
||||
border-bottom: 1px solid var(--border-color) !important;
|
||||
border-radius: 0;
|
||||
padding-bottom: 5px;
|
||||
|
|
|
|||
15
src/static/skins/colibris/src/general.css
Normal file
15
src/static/skins/colibris/src/general.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-family: var(--main-font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #64d29b;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
}
|
||||
|
||||
#editorcontainerbox {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
|
|
@ -20,11 +21,14 @@
|
|||
max-width: 900px;
|
||||
padding: 40px 55px;
|
||||
padding: var(--editor-padding);
|
||||
padding-top: 40px;
|
||||
padding-top: var(--editor-padding-top);
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
#sidediv {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
line-height: 25px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
|
@ -28,5 +29,6 @@ option {
|
|||
}
|
||||
|
||||
#innerdocbody a {
|
||||
color: #64d29b;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
|
@ -5,12 +5,14 @@
|
|||
margin: 10px 0 5px 0;
|
||||
}
|
||||
.sidebar-comment .btn.btn-primary:not(#comment-create-btn) {
|
||||
background-color: #576273;
|
||||
background-color: var(--text-soft-color);
|
||||
}
|
||||
.sidebar-comment .suggestion-create {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.suggestion-display .from-value, .suggestion-display .to-value {
|
||||
color: #64d29b;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
|
|
@ -34,14 +36,18 @@
|
|||
.sidebar-comment .full-display-content {
|
||||
margin-left: -10px;
|
||||
box-shadow: none;
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
border: 1px solid #ffffff;
|
||||
border: 1px solid var(--bg-color);
|
||||
}
|
||||
.comment-reply {
|
||||
border-top: 1px solid #ffffff;
|
||||
border-top: 1px solid var(--bg-color);
|
||||
background-color: inherit;
|
||||
}
|
||||
.comment-reply textarea, .comment-reply input[type="text"] {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
.btn.revert-suggestion-btn {
|
||||
|
|
@ -56,15 +62,18 @@
|
|||
box-shadow: none;
|
||||
margin: 0 !important;
|
||||
border: none;
|
||||
background-color: var(--bg-color)
|
||||
background-color: #ffffff;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
.comment-modal .comment-modal-comment {
|
||||
padding: 0;
|
||||
}
|
||||
.comment-modal .comment-reply textarea, .comment-modal .comment-reply input[type="text"] {
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
.comment-modal .comment-reply {
|
||||
border-top: 1px solid #f2f3f4;
|
||||
border-top: 1px solid var(--bg-soft-color);
|
||||
}
|
||||
.comment-modal .full-display-content .comment-title-wrapper,
|
||||
|
|
@ -75,6 +84,7 @@
|
|||
|
||||
/* NEW COMMENT POPUP */
|
||||
.new-comment-popup textarea {
|
||||
background-color: #f2f3f4;
|
||||
background-color: var(--bg-soft-color);
|
||||
}
|
||||
.new-comment-popup .suggestion {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
.color\:black,
|
||||
[data-color=black] {
|
||||
color: #485365;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,18 +2,22 @@
|
|||
border-radius: 3px;
|
||||
width: 12px;
|
||||
height: 28px;
|
||||
background-color: #64d29b;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
#timeslider-slider #ui-slider-bar {
|
||||
border-radius: 3px;
|
||||
background-color: #d2d2d2;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
#slider-btn-container {
|
||||
margin: -18px 15px 0 20px;
|
||||
}
|
||||
#slider-btn-container #playpause_button_icon {
|
||||
color: #ffffff;
|
||||
color: var(--bg-color);
|
||||
background-color: #64d29b;
|
||||
background-color: var(--primary-color);
|
||||
border: none;
|
||||
margin-right: 5px;
|
||||
|
|
@ -31,7 +35,9 @@
|
|||
line-height: 28px;
|
||||
margin-left: 5px;
|
||||
font-size: 13px;
|
||||
color: #64d29b;
|
||||
color: var(--primary-color);
|
||||
border-color: #64d29b;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
#slider-btn-container .stepper.disabled {
|
||||
|
|
@ -39,7 +45,9 @@
|
|||
}
|
||||
|
||||
.timeslider #editbar .buttontext {
|
||||
background-color: #576273;
|
||||
background-color: var(--text-soft-color);
|
||||
color: #ffffff;
|
||||
color: var(--bg-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue