mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-05-16 20:34:34 -04:00
Improved: template.css (colors) (#4641)
* font colors * html, body color: moved to the themes * finished font-color * background-colors * fix scrollbar-colors * background colors modal/darken-hover * background-color * loading image * template-background-color-transparent * background-colors (inkl. modal background) * box-shadow * fix:: toggle_aside:hover * background-color * border-color * rgba -> # * improvements * RTL.css
This commit is contained in:
maTh
@@ -1346,6 +1346,7 @@ main.prompt {
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #f5f0ec;
|
||||
color: #161a38;
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -1346,6 +1346,7 @@ main.prompt {
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #f5f0ec;
|
||||
color: #161a38;
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$unread-font-color;
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 92%;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 92%;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -1377,6 +1377,7 @@ main.prompt {
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #eff0f2;
|
||||
color: #36c;
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -1377,6 +1377,7 @@ main.prompt {
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #eff0f2;
|
||||
color: #36c;
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$unread-font-color;
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 92%;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 92%;
|
||||
}
|
||||
|
||||
@@ -46,6 +46,7 @@ select:invalid {
|
||||
|
||||
html,
|
||||
body {
|
||||
color: black;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -46,6 +46,7 @@ select:invalid {
|
||||
|
||||
html,
|
||||
body {
|
||||
color: black;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -60,6 +60,7 @@ $color_hover: #fff;
|
||||
// /@extend-elements
|
||||
html,
|
||||
body {
|
||||
color: black;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,11 +6,13 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
height: 100%;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/*=== Links */
|
||||
a, button.as-link {
|
||||
color: blue;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,11 +6,13 @@
|
||||
/*============*/
|
||||
html, body {
|
||||
height: 100%;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/*=== Links */
|
||||
a, button.as-link {
|
||||
color: blue;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,42 @@
|
||||
|
||||
/*=== GENERAL */
|
||||
/*============*/
|
||||
:root {
|
||||
--template-font-color-dark: #000;
|
||||
--template-font-color-grey-dark: #666;
|
||||
--template-font-color-grey-light: #aaa;
|
||||
--template-font-color-light: #fff;
|
||||
--template-background-color-error-transparent: #ff000040;
|
||||
--template-font-color-error: #f00;
|
||||
|
||||
--template-background-color: #fff;
|
||||
--template-background-color-transparent: #ffffff7f;
|
||||
--template-background-color-middle: #eee;
|
||||
--template-background-color-dark: #ccc;
|
||||
|
||||
--template-border-color: #999;
|
||||
--template-border-color-error: #f00;
|
||||
|
||||
--template-switch-accent-color: #85d885;
|
||||
|
||||
--template-dragdrop-color: #ff0;
|
||||
--template-dragdrop-color-transparent: #ff02;
|
||||
|
||||
--template-noThumbnailImage-background-color: #ddd;
|
||||
|
||||
--template-darken-background-hover-transparent: #6662;
|
||||
|
||||
--template-modal-background-color-transparent: #0007;
|
||||
|
||||
--template-box-shadow-color-transparent: #0003;
|
||||
|
||||
--template-scrollbar-handle: #0002;
|
||||
--template-scrollbar-handle-hover: #0005;
|
||||
--template-scrollbar-track: #0001;
|
||||
--template-scrollbar-track-hover: #0001;
|
||||
|
||||
--template-loading-image: url("loader.gif");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
@@ -15,9 +51,8 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
background-color: var(--template-background-color);
|
||||
height: 100%;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 100%;
|
||||
}
|
||||
@@ -88,11 +123,11 @@ sup {
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: #eee;
|
||||
background-color: var(--template-background-color-middle);
|
||||
padding: 2px 4px 2px 24px;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
border: 1px solid #b4b4b4;
|
||||
color: var(--template-font-color-grey-dark);
|
||||
border: 1px solid var(--template-border-color);
|
||||
border-radius: 3px;
|
||||
text-indent: -20px;
|
||||
white-space: pre-wrap;
|
||||
@@ -211,7 +246,7 @@ textarea[rows="2"] {
|
||||
}
|
||||
|
||||
textarea:invalid {
|
||||
border: 2px dashed red;
|
||||
border: 2px dashed var(--template-border-color-error);
|
||||
}
|
||||
|
||||
.prompt textarea,
|
||||
@@ -227,9 +262,9 @@ input:disabled,
|
||||
select:disabled {
|
||||
background-color: transparent;
|
||||
min-width: 75px;
|
||||
color: lightgray;
|
||||
color: var(--template-font-color-grey-light);
|
||||
font-style: italic;
|
||||
border: 1px dashed lightgray;
|
||||
border: 1px dashed var(--template-border-color);
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
@@ -282,7 +317,7 @@ button.as-link:active {
|
||||
}
|
||||
|
||||
button.as-link[disabled] {
|
||||
color: #ddd !important;
|
||||
color: var(--template-font-color-grey-light) !important;
|
||||
}
|
||||
|
||||
/*=== Tables */
|
||||
@@ -420,7 +455,7 @@ a.btn {
|
||||
height: 1.75em;
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
background-color: #ccc;
|
||||
background-color: var(--template-background-color-dark);
|
||||
cursor: pointer;
|
||||
box-sizing: content-box;
|
||||
background-repeat: no-repeat;
|
||||
@@ -436,7 +471,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.switch.active {
|
||||
background-color: rgb(133, 216, 133);
|
||||
background-color: var(--template-switch-accent-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-image: url('../icons/enabled.svg');
|
||||
@@ -467,7 +502,7 @@ a.btn {
|
||||
top: 0.2em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
background-color: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
background-image: url('../icons/disabled.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
@@ -476,7 +511,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.switch:not([disabled]):hover::before {
|
||||
background-color: #eee;
|
||||
background-color: var(--template-background-color-middle);
|
||||
}
|
||||
|
||||
.switch.active::before {
|
||||
@@ -509,7 +544,7 @@ a.btn {
|
||||
|
||||
.btn:focus-visible,
|
||||
input[type="checkbox"]:focus-visible {
|
||||
outline: 2px solid #ccc;
|
||||
outline: 2px solid var(--template-border-color);
|
||||
}
|
||||
|
||||
/*=== Navigation */
|
||||
@@ -579,9 +614,9 @@ input[type="checkbox"]:focus-visible {
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
display: none;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid var(--template-border-color);
|
||||
min-width: 200px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -593,6 +628,7 @@ input[type="checkbox"]:focus-visible {
|
||||
height: 10px;
|
||||
border-width: 1px 0 0 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--template-border-color);
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
@@ -660,7 +696,7 @@ input[type="checkbox"]:focus-visible {
|
||||
.separator {
|
||||
display: block;
|
||||
height: 0;
|
||||
border-bottom: 1px solid #aaa;
|
||||
border-bottom: 1px solid var(--template-border-color);
|
||||
}
|
||||
|
||||
/*=== Alerts */
|
||||
@@ -705,7 +741,7 @@ input[type="checkbox"]:focus-visible {
|
||||
margin: 0 0 5em;
|
||||
padding: 1em 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #aaa;
|
||||
border-top: 1px solid var(--template-border-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -756,7 +792,6 @@ input[type="checkbox"]:focus-visible {
|
||||
display: inline-block;
|
||||
max-width: 95%;
|
||||
width: 20rem;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@@ -815,7 +850,7 @@ input[type="checkbox"]:focus-visible {
|
||||
}
|
||||
|
||||
.dragging {
|
||||
background-color: rgba(255, 255, 0, 0.7);
|
||||
background-color: var(--template-dragdrop-color)
|
||||
}
|
||||
|
||||
.dragging .icon {
|
||||
@@ -827,17 +862,17 @@ input[type="checkbox"]:focus-visible {
|
||||
}
|
||||
|
||||
.drag-active .drop-zone:not(.drag-disallowed) {
|
||||
background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(250,250,210, 0.7) 40px, rgba(250,250,210, 0.7) 60px);
|
||||
background: repeating-linear-gradient(45deg, transparent, transparent 40px, var(--template-dragdrop-color-transparent) 40px, var(--template-dragdrop-color-transparent) 60px);
|
||||
}
|
||||
|
||||
.drag-active .drag-hover.drop-zone {
|
||||
background: rgba(250,250,210, 0.7);
|
||||
background-color: var(--template-dragdrop-color-transparent);
|
||||
transition: background 0.5s;
|
||||
}
|
||||
|
||||
li.drag-hover {
|
||||
margin: 0 0 5px;
|
||||
border-bottom: 2px solid #ccc;
|
||||
border-bottom: 2px solid var(--template-border-color);
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
@@ -847,11 +882,11 @@ li.drag-hover {
|
||||
|
||||
@keyframes droppedKeyframe {
|
||||
0% {
|
||||
background-color: rgba(250,250,210, 0.7);
|
||||
background-color: var(--template-dragdrop-color-transparent);
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: yellow;
|
||||
background-color: var(--template-dragdrop-color);
|
||||
}
|
||||
|
||||
100% {
|
||||
@@ -864,33 +899,38 @@ li.drag-hover {
|
||||
@supports (scrollbar-width: thin) {
|
||||
#sidebar,
|
||||
.scrollbar-thin {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
|
||||
scrollbar-color: var(--template-scrollbar-handle) var(--template-scrollbar-track);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#sidebar:hover,
|
||||
.scrollbar-thin:hover {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
|
||||
scrollbar-color: var(--template-scrollbar-handle-hover) var(--template-scrollbar-track-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (scrollbar-width: thin) {
|
||||
#sidebar::-webkit-scrollbar,
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background-color: var(--template-scrollbar-track);
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#sidebar:hover::-webkit-scrollbar,
|
||||
.scrollbar-thin:hover::-webkit-scrollbar {
|
||||
background-color: var(--template-scrollbar-track-hover);
|
||||
}
|
||||
|
||||
#sidebar::-webkit-scrollbar-thumb,
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--template-scrollbar-handle);
|
||||
display: unset;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#sidebar:hover::-webkit-scrollbar-thumb,
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
.scrollbar-thin:hover::-webkit-scrollbar-thumb {
|
||||
background-color: var(--template-scrollbar-handle-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1045,6 +1085,13 @@ input[type="search"] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.aside .toggle_aside:hover,
|
||||
#panel .close:hover,
|
||||
#slider .toggle_aside:hover,
|
||||
.dropdown-menu .toggle_aside:hover {
|
||||
background-color: var(--template-darken-background-hover-transparent);
|
||||
}
|
||||
|
||||
/*=== New article notification */
|
||||
#new-article {
|
||||
display: none;
|
||||
@@ -1101,7 +1148,7 @@ a.website:hover .favicon {
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
background: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
max-width: calc(100% - 320px);
|
||||
position: absolute;
|
||||
}
|
||||
@@ -1111,7 +1158,7 @@ a.website:hover .favicon {
|
||||
}
|
||||
|
||||
.flux .item.title a {
|
||||
color: #000;
|
||||
color: var(--template-font-color-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1150,7 +1197,7 @@ a.website:hover .favicon {
|
||||
}
|
||||
|
||||
.flux .item.thumbnail img {
|
||||
background: repeating-linear-gradient( -45deg, #ddd, #ddd 5px, transparent 5px, transparent 10px );
|
||||
background: repeating-linear-gradient( -45deg, var(--template-noThumbnailImage-background-color), var(--template-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px );
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -1160,7 +1207,7 @@ a.website:hover .favicon {
|
||||
|
||||
.flux .item.title .summary {
|
||||
max-height: 3em;
|
||||
color: #666;
|
||||
color: var(--template-font-color-grey-dark);
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5em;
|
||||
font-weight: normal;
|
||||
@@ -1171,7 +1218,7 @@ a.website:hover .favicon {
|
||||
|
||||
.flux .item.title .author {
|
||||
padding-left: 1rem;
|
||||
color: #555;
|
||||
color: var(--template-font-color-grey-dark);
|
||||
font-size: .9rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
@@ -1229,14 +1276,14 @@ a.website:hover .favicon {
|
||||
|
||||
.content > header,
|
||||
.content > footer {
|
||||
color: #666;
|
||||
color: var(--template-font-color-grey-light);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.content > footer {
|
||||
margin: 2rem 0 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 2px solid #ccc;
|
||||
border-top: 2px solid var(--template-border-color);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@@ -1309,8 +1356,8 @@ br {
|
||||
top: 1em;
|
||||
left: 25%; right: 25%;
|
||||
z-index: 9999;
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
background-color: var(--template-background-color);
|
||||
border: 1px solid var(--template-border-color);
|
||||
opacity: 1;
|
||||
line-height: 2;
|
||||
visibility: visible;
|
||||
@@ -1330,7 +1377,7 @@ br {
|
||||
}
|
||||
|
||||
.notification a.close:hover {
|
||||
background: rgba(10,10,10,0.05);
|
||||
background-color: var(--template-darken-background-hover-transparent);
|
||||
}
|
||||
|
||||
.notification a.close:hover .icon {
|
||||
@@ -1360,8 +1407,7 @@ br {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: #eee;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
background-color: var(--template-modal-background-color-transparent);
|
||||
}
|
||||
|
||||
#popup-content {
|
||||
@@ -1370,9 +1416,9 @@ br {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
background-color: #fafafa;
|
||||
background-color: var(--template-background-color);
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 0 1px #737373, 1px 2px 3px #4a4a4f;
|
||||
box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent);
|
||||
}
|
||||
|
||||
.popup-row {
|
||||
@@ -1385,14 +1431,14 @@ br {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
padding-bottom: 5px;
|
||||
color: #aaa;
|
||||
color: var(--template-font-color-grey-light);
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#popup-close:hover,
|
||||
#popup-close:focus {
|
||||
color: #000;
|
||||
color: var(--template-font-color-dark);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1414,7 +1460,6 @@ br {
|
||||
|
||||
/*=== Navigation menu (for articles) */
|
||||
#nav_entries {
|
||||
background: #fff;
|
||||
display: table;
|
||||
position: fixed;
|
||||
bottom: 0; left: 0;
|
||||
@@ -1444,12 +1489,12 @@ br {
|
||||
#load_more.loading,
|
||||
#load_more.loading:hover {
|
||||
padding: 10px 20px;
|
||||
background: url("loader.gif") center center no-repeat #fff;
|
||||
background: var(--template-loading-image) center center no-repeat var(--template-background-color);
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
background: url("loader.gif") center center no-repeat;
|
||||
background: var(--template-loading-image) center center no-repeat;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@@ -1516,7 +1561,7 @@ br {
|
||||
position: fixed;
|
||||
top: 0; bottom: 0;
|
||||
left: 0; right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--template-modal-background-color-transparent);
|
||||
opacity: 0;
|
||||
transition: visibility .3s, opacity .3s;
|
||||
visibility: hidden;
|
||||
@@ -1528,7 +1573,7 @@ br {
|
||||
}
|
||||
|
||||
#panel {
|
||||
background: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 2%; bottom: 2%;
|
||||
@@ -1549,18 +1594,18 @@ br {
|
||||
|
||||
/*=== Slider */
|
||||
#slider {
|
||||
background: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
width: 0;
|
||||
position: fixed;
|
||||
top: 0; bottom: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
border-left: 1px solid #aaa;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#slider.active:target {
|
||||
width: 750px;
|
||||
box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent);
|
||||
}
|
||||
|
||||
#slider.sliding {
|
||||
@@ -1575,7 +1620,7 @@ br {
|
||||
}
|
||||
|
||||
#slider.active:target + #close-slider {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background-color: var(--template-modal-background-color-transparent);
|
||||
font-size: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
@@ -1608,7 +1653,7 @@ br {
|
||||
display: block;
|
||||
max-width: 640px;
|
||||
height: 320px;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid var(--template-border-color);
|
||||
position: relative;
|
||||
min-width: 260px;
|
||||
margin-bottom: 30px;
|
||||
@@ -1643,7 +1688,7 @@ br {
|
||||
display: none;
|
||||
width: 65px;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
color: var(--template-font-color-light);
|
||||
font-family: "Varela Round", sans-serif;
|
||||
font-size: 1000%;
|
||||
position: absolute;
|
||||
@@ -1653,20 +1698,20 @@ br {
|
||||
transition: opacity .2s;
|
||||
text-align: center;
|
||||
line-height: 225%;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
background-color: var(--template-background-color-transparent);
|
||||
text-shadow: 0px 0px 15px rgb(119, 119, 119);
|
||||
}
|
||||
|
||||
.properties {
|
||||
padding: 5px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background-color: var(--template-background-color-transparent);
|
||||
display: none;
|
||||
color: #000;
|
||||
border-top: 1px solid #aaa;
|
||||
border-top: 1px solid var(--template-border-color);
|
||||
bottom: 0;
|
||||
left: 0; right: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.properties .page-number {
|
||||
@@ -1708,18 +1753,18 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
.log-item.log-error {
|
||||
background-color: #bd362f44;
|
||||
background-color: var(--template-background-color-error-transparent);
|
||||
}
|
||||
|
||||
.item.share.error a::after,
|
||||
.category .title.error::before,
|
||||
.item.feed.error .item-title::before {
|
||||
content: " ⚠ ";
|
||||
color: #bd362f;
|
||||
color: var(--template-font-color-error);
|
||||
}
|
||||
|
||||
.feed.item.error.active .item-title::before {
|
||||
color: white;
|
||||
color: var(--template-font-color-light);
|
||||
}
|
||||
|
||||
.aside .category .title:not([data-unread="0"])::after,
|
||||
@@ -1760,9 +1805,8 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
.feed.active .item-title:not([data-unread="0"])::after {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: 1px solid #fff;
|
||||
color: var(--template-font-color-light);
|
||||
border: 1px solid var(--template-border-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -1859,15 +1903,18 @@ input:checked + .slide-container .properties {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aside:target {
|
||||
box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent);
|
||||
}
|
||||
|
||||
.aside .toggle_aside,
|
||||
#panel .close,
|
||||
.dropdown-menu .toggle_aside,
|
||||
#slider .toggle_aside {
|
||||
background: #f6f6f6;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid var(--template-border-color);
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1916,7 +1963,7 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
.dropdown-target:target ~ .dropdown-toggle::after {
|
||||
background-color: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
@@ -1943,7 +1990,7 @@ input:checked + .slide-container .properties {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
overflow: auto;
|
||||
box-shadow: -3px 0 3px #aaa;
|
||||
box-shadow: -3px 0 3px var(--template-box-shadow-color-transparent);
|
||||
}
|
||||
|
||||
.configure .dropdown-target:target ~ .dropdown-toggle::after {
|
||||
@@ -1974,7 +2021,7 @@ input:checked + .slide-container .properties {
|
||||
|
||||
.aside:target + .close-aside,
|
||||
.configure .dropdown-target:target ~ .dropdown-close {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background-color: var(--template-modal-background-color-transparent);
|
||||
display: block;
|
||||
font-size: 0;
|
||||
position: fixed;
|
||||
@@ -2080,8 +2127,7 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
background-color: var(--template-background-color);
|
||||
font-family: Serif;
|
||||
}
|
||||
|
||||
@@ -2095,7 +2141,7 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
.flux_content .content a {
|
||||
color: #000;
|
||||
color: var(--template-font-color-dark);
|
||||
}
|
||||
|
||||
.flux_content .content a::after {
|
||||
@@ -2112,8 +2158,8 @@ input:checked + .slide-container .properties {
|
||||
padding: 1rem;
|
||||
max-width: 1000px;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: var(--template-background-color-middle);
|
||||
border: 1px solid var(--template-border-color);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
@@ -2129,10 +2175,6 @@ input:checked + .slide-container .properties {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.preview_background {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.drag-drop-marker {
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,42 @@
|
||||
|
||||
/*=== GENERAL */
|
||||
/*============*/
|
||||
:root {
|
||||
--template-font-color-dark: #000;
|
||||
--template-font-color-grey-dark: #666;
|
||||
--template-font-color-grey-light: #aaa;
|
||||
--template-font-color-light: #fff;
|
||||
--template-background-color-error-transparent: #ff000040;
|
||||
--template-font-color-error: #f00;
|
||||
|
||||
--template-background-color: #fff;
|
||||
--template-background-color-transparent: #ffffff7f;
|
||||
--template-background-color-middle: #eee;
|
||||
--template-background-color-dark: #ccc;
|
||||
|
||||
--template-border-color: #999;
|
||||
--template-border-color-error: #f00;
|
||||
|
||||
--template-switch-accent-color: #85d885;
|
||||
|
||||
--template-dragdrop-color: #ff0;
|
||||
--template-dragdrop-color-transparent: #ff02;
|
||||
|
||||
--template-noThumbnailImage-background-color: #ddd;
|
||||
|
||||
--template-darken-background-hover-transparent: #6662;
|
||||
|
||||
--template-modal-background-color-transparent: #0007;
|
||||
|
||||
--template-box-shadow-color-transparent: #0003;
|
||||
|
||||
--template-scrollbar-handle: #0002;
|
||||
--template-scrollbar-handle-hover: #0005;
|
||||
--template-scrollbar-track: #0001;
|
||||
--template-scrollbar-track-hover: #0001;
|
||||
|
||||
--template-loading-image: url("loader.gif");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
@@ -15,9 +51,8 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
background-color: var(--template-background-color);
|
||||
height: 100%;
|
||||
color: black;
|
||||
font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 100%;
|
||||
}
|
||||
@@ -88,11 +123,11 @@ sup {
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: #eee;
|
||||
background-color: var(--template-background-color-middle);
|
||||
padding: 2px 24px 2px 4px;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
border: 1px solid #b4b4b4;
|
||||
color: var(--template-font-color-grey-dark);
|
||||
border: 1px solid var(--template-border-color);
|
||||
border-radius: 3px;
|
||||
text-indent: -20px;
|
||||
white-space: pre-wrap;
|
||||
@@ -211,7 +246,7 @@ textarea[rows="2"] {
|
||||
}
|
||||
|
||||
textarea:invalid {
|
||||
border: 2px dashed red;
|
||||
border: 2px dashed var(--template-border-color-error);
|
||||
}
|
||||
|
||||
.prompt textarea,
|
||||
@@ -227,9 +262,9 @@ input:disabled,
|
||||
select:disabled {
|
||||
background-color: transparent;
|
||||
min-width: 75px;
|
||||
color: lightgray;
|
||||
color: var(--template-font-color-grey-light);
|
||||
font-style: italic;
|
||||
border: 1px dashed lightgray;
|
||||
border: 1px dashed var(--template-border-color);
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
@@ -282,7 +317,7 @@ button.as-link:active {
|
||||
}
|
||||
|
||||
button.as-link[disabled] {
|
||||
color: #ddd !important;
|
||||
color: var(--template-font-color-grey-light) !important;
|
||||
}
|
||||
|
||||
/*=== Tables */
|
||||
@@ -420,7 +455,7 @@ a.btn {
|
||||
height: 1.75em;
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
background-color: #ccc;
|
||||
background-color: var(--template-background-color-dark);
|
||||
cursor: pointer;
|
||||
box-sizing: content-box;
|
||||
background-repeat: no-repeat;
|
||||
@@ -436,7 +471,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.switch.active {
|
||||
background-color: rgb(133, 216, 133);
|
||||
background-color: var(--template-switch-accent-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-image: url('../icons/enabled.svg');
|
||||
@@ -467,7 +502,7 @@ a.btn {
|
||||
top: 0.2em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
background-color: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
background-image: url('../icons/disabled.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
@@ -476,7 +511,7 @@ a.btn {
|
||||
}
|
||||
|
||||
.switch:not([disabled]):hover::before {
|
||||
background-color: #eee;
|
||||
background-color: var(--template-background-color-middle);
|
||||
}
|
||||
|
||||
.switch.active::before {
|
||||
@@ -509,7 +544,7 @@ a.btn {
|
||||
|
||||
.btn:focus-visible,
|
||||
input[type="checkbox"]:focus-visible {
|
||||
outline: 2px solid #ccc;
|
||||
outline: 2px solid var(--template-border-color);
|
||||
}
|
||||
|
||||
/*=== Navigation */
|
||||
@@ -579,9 +614,9 @@ input[type="checkbox"]:focus-visible {
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
display: none;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid var(--template-border-color);
|
||||
min-width: 200px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -593,6 +628,7 @@ input[type="checkbox"]:focus-visible {
|
||||
height: 10px;
|
||||
border-width: 1px 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: var(--template-border-color);
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
@@ -660,7 +696,7 @@ input[type="checkbox"]:focus-visible {
|
||||
.separator {
|
||||
display: block;
|
||||
height: 0;
|
||||
border-bottom: 1px solid #aaa;
|
||||
border-bottom: 1px solid var(--template-border-color);
|
||||
}
|
||||
|
||||
/*=== Alerts */
|
||||
@@ -705,7 +741,7 @@ input[type="checkbox"]:focus-visible {
|
||||
margin: 0 0 5em;
|
||||
padding: 1em 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #aaa;
|
||||
border-top: 1px solid var(--template-border-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -756,7 +792,6 @@ input[type="checkbox"]:focus-visible {
|
||||
display: inline-block;
|
||||
max-width: 95%;
|
||||
width: 20rem;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@@ -815,7 +850,7 @@ input[type="checkbox"]:focus-visible {
|
||||
}
|
||||
|
||||
.dragging {
|
||||
background-color: rgba(255, 255, 0, 0.7);
|
||||
background-color: var(--template-dragdrop-color)
|
||||
}
|
||||
|
||||
.dragging .icon {
|
||||
@@ -827,17 +862,17 @@ input[type="checkbox"]:focus-visible {
|
||||
}
|
||||
|
||||
.drag-active .drop-zone:not(.drag-disallowed) {
|
||||
background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(250,250,210, 0.7) 40px, rgba(250,250,210, 0.7) 60px);
|
||||
background: repeating-linear-gradient(-45deg, transparent, transparent 40px, var(--template-dragdrop-color-transparent) 40px, var(--template-dragdrop-color-transparent) 60px);
|
||||
}
|
||||
|
||||
.drag-active .drag-hover.drop-zone {
|
||||
background: rgba(250,250,210, 0.7);
|
||||
background-color: var(--template-dragdrop-color-transparent);
|
||||
transition: background 0.5s;
|
||||
}
|
||||
|
||||
li.drag-hover {
|
||||
margin: 0 0 5px;
|
||||
border-bottom: 2px solid #ccc;
|
||||
border-bottom: 2px solid var(--template-border-color);
|
||||
}
|
||||
|
||||
.drag-drop {
|
||||
@@ -847,11 +882,11 @@ li.drag-hover {
|
||||
|
||||
@keyframes droppedKeyframe {
|
||||
0% {
|
||||
background-color: rgba(250,250,210, 0.7);
|
||||
background-color: var(--template-dragdrop-color-transparent);
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: yellow;
|
||||
background-color: var(--template-dragdrop-color);
|
||||
}
|
||||
|
||||
100% {
|
||||
@@ -864,33 +899,38 @@ li.drag-hover {
|
||||
@supports (scrollbar-width: thin) {
|
||||
#sidebar,
|
||||
.scrollbar-thin {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
|
||||
scrollbar-color: var(--template-scrollbar-handle) var(--template-scrollbar-track);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#sidebar:hover,
|
||||
.scrollbar-thin:hover {
|
||||
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
|
||||
scrollbar-color: var(--template-scrollbar-handle-hover) var(--template-scrollbar-track-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (scrollbar-width: thin) {
|
||||
#sidebar::-webkit-scrollbar,
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background-color: var(--template-scrollbar-track);
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#sidebar:hover::-webkit-scrollbar,
|
||||
.scrollbar-thin:hover::-webkit-scrollbar {
|
||||
background-color: var(--template-scrollbar-track-hover);
|
||||
}
|
||||
|
||||
#sidebar::-webkit-scrollbar-thumb,
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--template-scrollbar-handle);
|
||||
display: unset;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#sidebar:hover::-webkit-scrollbar-thumb,
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
.scrollbar-thin:hover::-webkit-scrollbar-thumb {
|
||||
background-color: var(--template-scrollbar-handle-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1045,6 +1085,13 @@ input[type="search"] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.aside .toggle_aside:hover,
|
||||
#panel .close:hover,
|
||||
#slider .toggle_aside:hover,
|
||||
.dropdown-menu .toggle_aside:hover {
|
||||
background-color: var(--template-darken-background-hover-transparent);
|
||||
}
|
||||
|
||||
/*=== New article notification */
|
||||
#new-article {
|
||||
display: none;
|
||||
@@ -1101,7 +1148,7 @@ a.website:hover .favicon {
|
||||
}
|
||||
|
||||
.flux:not(.current):hover .item.title {
|
||||
background: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
max-width: calc(100% - 320px);
|
||||
position: absolute;
|
||||
}
|
||||
@@ -1111,7 +1158,7 @@ a.website:hover .favicon {
|
||||
}
|
||||
|
||||
.flux .item.title a {
|
||||
color: #000;
|
||||
color: var(--template-font-color-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1150,7 +1197,7 @@ a.website:hover .favicon {
|
||||
}
|
||||
|
||||
.flux .item.thumbnail img {
|
||||
background: repeating-linear-gradient( 45deg, #ddd, #ddd 5px, transparent 5px, transparent 10px );
|
||||
background: repeating-linear-gradient( 45deg, var(--template-noThumbnailImage-background-color), var(--template-noThumbnailImage-background-color) 5px, transparent 5px, transparent 10px );
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -1160,7 +1207,7 @@ a.website:hover .favicon {
|
||||
|
||||
.flux .item.title .summary {
|
||||
max-height: 3em;
|
||||
color: #666;
|
||||
color: var(--template-font-color-grey-dark);
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5em;
|
||||
font-weight: normal;
|
||||
@@ -1171,7 +1218,7 @@ a.website:hover .favicon {
|
||||
|
||||
.flux .item.title .author {
|
||||
padding-right: 1rem;
|
||||
color: #555;
|
||||
color: var(--template-font-color-grey-dark);
|
||||
font-size: .9rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
@@ -1229,14 +1276,14 @@ a.website:hover .favicon {
|
||||
|
||||
.content > header,
|
||||
.content > footer {
|
||||
color: #666;
|
||||
color: var(--template-font-color-grey-light);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.content > footer {
|
||||
margin: 2rem 0 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 2px solid #ccc;
|
||||
border-top: 2px solid var(--template-border-color);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@@ -1309,8 +1356,8 @@ br {
|
||||
top: 1em;
|
||||
right: 25%; left: 25%;
|
||||
z-index: 9999;
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
background-color: var(--template-background-color);
|
||||
border: 1px solid var(--template-border-color);
|
||||
opacity: 1;
|
||||
line-height: 2;
|
||||
visibility: visible;
|
||||
@@ -1330,7 +1377,7 @@ br {
|
||||
}
|
||||
|
||||
.notification a.close:hover {
|
||||
background: rgba(10,10,10,0.05);
|
||||
background-color: var(--template-darken-background-hover-transparent);
|
||||
}
|
||||
|
||||
.notification a.close:hover .icon {
|
||||
@@ -1360,8 +1407,7 @@ br {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: #eee;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
background-color: var(--template-modal-background-color-transparent);
|
||||
}
|
||||
|
||||
#popup-content {
|
||||
@@ -1370,9 +1416,9 @@ br {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
background-color: #fafafa;
|
||||
background-color: var(--template-background-color);
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 0 1px #737373, -1px 2px 3px #4a4a4f;
|
||||
box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent);
|
||||
}
|
||||
|
||||
.popup-row {
|
||||
@@ -1385,14 +1431,14 @@ br {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
padding-bottom: 5px;
|
||||
color: #aaa;
|
||||
color: var(--template-font-color-grey-light);
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#popup-close:hover,
|
||||
#popup-close:focus {
|
||||
color: #000;
|
||||
color: var(--template-font-color-dark);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1414,7 +1460,6 @@ br {
|
||||
|
||||
/*=== Navigation menu (for articles) */
|
||||
#nav_entries {
|
||||
background: #fff;
|
||||
display: table;
|
||||
position: fixed;
|
||||
bottom: 0; right: 0;
|
||||
@@ -1444,12 +1489,12 @@ br {
|
||||
#load_more.loading,
|
||||
#load_more.loading:hover {
|
||||
padding: 10px 20px;
|
||||
background: url("loader.gif") center center no-repeat #fff;
|
||||
background: var(--template-loading-image) center center no-repeat var(--template-background-color);
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
background: url("loader.gif") center center no-repeat;
|
||||
background: var(--template-loading-image) center center no-repeat;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@@ -1516,7 +1561,7 @@ br {
|
||||
position: fixed;
|
||||
top: 0; bottom: 0;
|
||||
right: 0; left: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--template-modal-background-color-transparent);
|
||||
opacity: 0;
|
||||
transition: visibility .3s, opacity .3s;
|
||||
visibility: hidden;
|
||||
@@ -1528,7 +1573,7 @@ br {
|
||||
}
|
||||
|
||||
#panel {
|
||||
background: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 2%; bottom: 2%;
|
||||
@@ -1549,18 +1594,18 @@ br {
|
||||
|
||||
/*=== Slider */
|
||||
#slider {
|
||||
background: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
width: 0;
|
||||
position: fixed;
|
||||
top: 0; bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
border-right: 1px solid #aaa;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#slider.active:target {
|
||||
width: 750px;
|
||||
box-shadow: 3px 3px 5px var(--template-box-shadow-color-transparent);
|
||||
}
|
||||
|
||||
#slider.sliding {
|
||||
@@ -1575,7 +1620,7 @@ br {
|
||||
}
|
||||
|
||||
#slider.active:target + #close-slider {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background-color: var(--template-modal-background-color-transparent);
|
||||
font-size: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
@@ -1608,7 +1653,7 @@ br {
|
||||
display: block;
|
||||
max-width: 640px;
|
||||
height: 320px;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid var(--template-border-color);
|
||||
position: relative;
|
||||
min-width: 260px;
|
||||
margin-bottom: 30px;
|
||||
@@ -1643,7 +1688,7 @@ br {
|
||||
display: none;
|
||||
width: 65px;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
color: var(--template-font-color-light);
|
||||
font-family: "Varela Round", sans-serif;
|
||||
font-size: 1000%;
|
||||
position: absolute;
|
||||
@@ -1653,20 +1698,20 @@ br {
|
||||
transition: opacity .2s;
|
||||
text-align: center;
|
||||
line-height: 225%;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
background-color: var(--template-background-color-transparent);
|
||||
text-shadow: 0px 0px 15px rgb(119, 119, 119);
|
||||
}
|
||||
|
||||
.properties {
|
||||
padding: 5px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background-color: var(--template-background-color-transparent);
|
||||
display: none;
|
||||
color: #000;
|
||||
border-top: 1px solid #aaa;
|
||||
border-top: 1px solid var(--template-border-color);
|
||||
bottom: 0;
|
||||
right: 0; left: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.properties .page-number {
|
||||
@@ -1708,18 +1753,18 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
.log-item.log-error {
|
||||
background-color: #bd362f44;
|
||||
background-color: var(--template-background-color-error-transparent);
|
||||
}
|
||||
|
||||
.item.share.error a::after,
|
||||
.category .title.error::before,
|
||||
.item.feed.error .item-title::before {
|
||||
content: " ⚠ ";
|
||||
color: #bd362f;
|
||||
color: var(--template-font-color-error);
|
||||
}
|
||||
|
||||
.feed.item.error.active .item-title::before {
|
||||
color: white;
|
||||
color: var(--template-font-color-light);
|
||||
}
|
||||
|
||||
.aside .category .title:not([data-unread="0"])::after,
|
||||
@@ -1760,9 +1805,8 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
.feed.active .item-title:not([data-unread="0"])::after {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: 1px solid #fff;
|
||||
color: var(--template-font-color-light);
|
||||
border: 1px solid var(--template-border-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -1859,15 +1903,18 @@ input:checked + .slide-container .properties {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aside:target {
|
||||
box-shadow: -3px 3px 5px var(--template-box-shadow-color-transparent);
|
||||
}
|
||||
|
||||
.aside .toggle_aside,
|
||||
#panel .close,
|
||||
.dropdown-menu .toggle_aside,
|
||||
#slider .toggle_aside {
|
||||
background: #f6f6f6;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid var(--template-border-color);
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1916,7 +1963,7 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
.dropdown-target:target ~ .dropdown-toggle::after {
|
||||
background-color: #fff;
|
||||
background-color: var(--template-background-color);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
@@ -1943,7 +1990,7 @@ input:checked + .slide-container .properties {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
overflow: auto;
|
||||
box-shadow: 3px 0 3px #aaa;
|
||||
box-shadow: 3px 0 3px var(--template-box-shadow-color-transparent);
|
||||
}
|
||||
|
||||
.configure .dropdown-target:target ~ .dropdown-toggle::after {
|
||||
@@ -1974,7 +2021,7 @@ input:checked + .slide-container .properties {
|
||||
|
||||
.aside:target + .close-aside,
|
||||
.configure .dropdown-target:target ~ .dropdown-close {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background-color: var(--template-modal-background-color-transparent);
|
||||
display: block;
|
||||
font-size: 0;
|
||||
position: fixed;
|
||||
@@ -2080,8 +2127,7 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
background-color: var(--template-background-color);
|
||||
font-family: Serif;
|
||||
}
|
||||
|
||||
@@ -2095,7 +2141,7 @@ input:checked + .slide-container .properties {
|
||||
}
|
||||
|
||||
.flux_content .content a {
|
||||
color: #000;
|
||||
color: var(--template-font-color-dark);
|
||||
}
|
||||
|
||||
.flux_content .content a::after {
|
||||
@@ -2112,8 +2158,8 @@ input:checked + .slide-container .properties {
|
||||
padding: 1rem;
|
||||
max-width: 1000px;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: var(--template-background-color-middle);
|
||||
border: 1px solid var(--template-border-color);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
@@ -2129,10 +2175,6 @@ input:checked + .slide-container .properties {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.preview_background {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.drag-drop-marker {
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user