revert palette, add WIP skin
This commit is contained in:
Martin Rotter
parent
795043c176
commit
9f70325177
19 changed files with 1365 additions and 87 deletions
4
resources/skins/solarized-dark/html_adblocked.html
Normal file
4
resources/skins/solarized-dark/html_adblocked.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div>
|
||||||
|
<h4><span>Error: </span>%1</h4>
|
||||||
|
<div role="alert">%2</div>
|
||||||
|
</div>
|
||||||
1
resources/skins/solarized-dark/html_enclosure_every.html
Normal file
1
resources/skins/solarized-dark/html_enclosure_every.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
 / <a class="menc" href="%1"><span style="text-transform: uppercase;">%2</span></a>
|
||||||
5
resources/skins/solarized-dark/html_enclosure_image.html
Normal file
5
resources/skins/solarized-dark/html_enclosure_image.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<a href="%1">
|
||||||
|
<img alt="%2"
|
||||||
|
src="%1"
|
||||||
|
style="max-height: %3px;">
|
||||||
|
</a>
|
||||||
16
resources/skins/solarized-dark/html_single_message.html
Normal file
16
resources/skins/solarized-dark/html_single_message.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<div class="rssguard-mwrapper" dir="%9" id="%8">
|
||||||
|
|
||||||
|
<section class="rssguard-mhead">
|
||||||
|
<div style="float: right; margin: 10px;"><!-- Should it remain here??? -->%7</div>
|
||||||
|
<span class="msmall">%2</span>
|
||||||
|
<h1>%1<span class="mlinks">%6<span class="mwrapurl"><span> / </span><a href="%3">URL</a></span></h1>
|
||||||
|
<span class="msmall">%5</span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="rssguard-mbody">
|
||||||
|
%4
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
393
resources/skins/solarized-dark/html_style.css
Normal file
393
resources/skins/solarized-dark/html_style.css
Normal file
|
|
@ -0,0 +1,393 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
* {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit; }
|
||||||
|
|
||||||
|
body, h1, h2, h3, h4, h5, h6,
|
||||||
|
p, blockquote, pre, hr,
|
||||||
|
dl, dd, ol, ul, figure {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #2F3134;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #f5f5f5;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-font-feature-settings: "kern" 1;
|
||||||
|
font-feature-settings: "kern" 1;
|
||||||
|
font-kerning: normal;
|
||||||
|
padding: 10px !important;
|
||||||
|
min-height: 100vh; }
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: #647595;
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
p, blockquote, pre,
|
||||||
|
ul, ol, dl, figure,
|
||||||
|
details {
|
||||||
|
margin-bottom: 10px; }
|
||||||
|
|
||||||
|
hr {
|
||||||
|
background-color: #545556;
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
margin: 10px 0; }
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 600 !important; }
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.25rem !important; }
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.20rem !important; }
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.15rem !important; }
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.1rem !important; }
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1rem !important; }
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: .95rem !important; }
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-weight: bold !important; }
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: italic !important; }
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 800 !important; }
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: oblique !important; }
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: #f8d08c66; }
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: .8rem !important; }
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: .9rem !important; }
|
||||||
|
|
||||||
|
abbr {
|
||||||
|
cursor: help;
|
||||||
|
font-style: italic !important;
|
||||||
|
font-weight: 100 !important; }
|
||||||
|
|
||||||
|
q {
|
||||||
|
font-style: italic !important; }
|
||||||
|
q::before {
|
||||||
|
content: '“'; }
|
||||||
|
q::after {
|
||||||
|
content: '”'; }
|
||||||
|
|
||||||
|
time {
|
||||||
|
font-weight: 450 !important; }
|
||||||
|
|
||||||
|
var {
|
||||||
|
font-style: oblique !important;
|
||||||
|
font-weight: 500 !important; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #647595; }
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none; }
|
||||||
|
a:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none; }
|
||||||
|
|
||||||
|
cite {
|
||||||
|
font-style: italic !important;
|
||||||
|
font-weight: bold !important; }
|
||||||
|
|
||||||
|
figure {
|
||||||
|
max-width: 100%; }
|
||||||
|
|
||||||
|
figure > img {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
font-size: .8rem !important; }
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: 0.3em solid #545556;
|
||||||
|
margin-left: 0;
|
||||||
|
padding: 0 10px; }
|
||||||
|
blockquote,
|
||||||
|
blockquote p {
|
||||||
|
color: #E2E2E2; }
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
border: 1px solid #222325;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
color: #E2E2E2;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: .95rem !important; }
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: rgba(33, 35, 39, 0.4);
|
||||||
|
padding: 0 .25em;
|
||||||
|
word-break: break-word; }
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: rgba(33, 35, 39, 0.4);
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 7px 13px;
|
||||||
|
tab-size: 2;
|
||||||
|
white-space: pre !important;
|
||||||
|
width: unset !important; }
|
||||||
|
pre > code {
|
||||||
|
background-color: unset;
|
||||||
|
border: none;
|
||||||
|
color: unset;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
tab-size: 2; }
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: rgba(33, 35, 39, 0.4);
|
||||||
|
border: 1px solid #222325;
|
||||||
|
border-bottom: 3px solid #1b1c1d;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
box-shadow: 0 2px 4px #202224, inset 0 1px #2F3134;
|
||||||
|
font-size: .9rem !important;
|
||||||
|
padding: .1em .4em .2em .4em; }
|
||||||
|
|
||||||
|
select {
|
||||||
|
background-color: rgba(33, 35, 39, 0.4);
|
||||||
|
border: 1px solid #222325;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
color: #f5f5f5;
|
||||||
|
padding: .04em .25em;
|
||||||
|
width: 100%; }
|
||||||
|
select:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
background-color: #2F3134; }
|
||||||
|
select > option {
|
||||||
|
background-color: #2F3134; }
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100% !important; }
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: list-item; }
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 1.5em; }
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: disc; }
|
||||||
|
ul li ul {
|
||||||
|
list-style-type: square; }
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal; }
|
||||||
|
ol li ol {
|
||||||
|
list-style-type: lower-roman; }
|
||||||
|
|
||||||
|
details {
|
||||||
|
border: 1px solid rgba(33, 35, 39, 0.4);
|
||||||
|
border-radius: 0.3em;
|
||||||
|
padding: .5em .5em 0; }
|
||||||
|
details > summary {
|
||||||
|
background-color: rgba(33, 35, 39, 0.4);
|
||||||
|
border-radius: 0.27em;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: -.5em -.5em 0;
|
||||||
|
padding-left: .5em; }
|
||||||
|
details > summary:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none; }
|
||||||
|
details *:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
|
details[open] {
|
||||||
|
border-color: #222325;
|
||||||
|
padding: .5em; }
|
||||||
|
details[open] > summary {
|
||||||
|
border-bottom: 1px solid #222325;
|
||||||
|
border-radius: 0.27em 0.27em 0 0;
|
||||||
|
margin-bottom: .5em; }
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
width: auto; }
|
||||||
|
|
||||||
|
a:focus,
|
||||||
|
select:focus,
|
||||||
|
summary:focus {
|
||||||
|
background-color: #222325;
|
||||||
|
text-shadow: 0 -1px #2F3134; }
|
||||||
|
|
||||||
|
:target {
|
||||||
|
outline: 1px solid #647595; }
|
||||||
|
|
||||||
|
.rssguard-mwrapper {
|
||||||
|
padding: 0px !important; }
|
||||||
|
.rssguard-mwrapper .rssguard-mhead .msmall,
|
||||||
|
.rssguard-mwrapper .rssguard-mhead .mlinks {
|
||||||
|
opacity: .8; }
|
||||||
|
.rssguard-mwrapper .rssguard-mhead > h1 {
|
||||||
|
margin: 0; }
|
||||||
|
.rssguard-mwrapper .rssguard-mhead .msmall {
|
||||||
|
font-size: .9em; }
|
||||||
|
.rssguard-mwrapper .rssguard-mhead .mlinks .menc {
|
||||||
|
word-break: break-word; }
|
||||||
|
.rssguard-mwrapper .rssguard-mhead .mlinks .mwrapurl {
|
||||||
|
display: inline-flex; }
|
||||||
|
.rssguard-mwrapper .rssguard-mhead .mlinks .mwrapurl a[href=""], .rssguard-mwrapper .rssguard-mhead .mlinks .mwrapurl a[href=""] + span {
|
||||||
|
display: none; }
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.rssguard-mwrapper img, .rssguard-mwrapper video {
|
||||||
|
max-width: 100% !important; } }
|
||||||
|
|
||||||
|
.rssguard-mbody {
|
||||||
|
word-break: break-word; }
|
||||||
|
|
||||||
|
table {
|
||||||
|
word-break: normal; }
|
||||||
|
|
||||||
|
html::before,
|
||||||
|
html::after,
|
||||||
|
body::before,
|
||||||
|
body::after {
|
||||||
|
content: "";
|
||||||
|
background-color: #222325;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 5; }
|
||||||
|
|
||||||
|
html::before {
|
||||||
|
height: 1px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0; }
|
||||||
|
|
||||||
|
html::after {
|
||||||
|
width: 1px;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0; }
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
height: 1px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
body::after {
|
||||||
|
width: 1px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 13px;
|
||||||
|
width: 14px; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track,
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background-color: #313235;
|
||||||
|
box-shadow: inset 1px 1px #2c2d30; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
border-radius: 0 0 0.3em 0; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
box-shadow: inset 1px 1px #515258, inset -1px -1px #515258, inset 0px 1px #515258, inset 0px -1px #515258, inset 1px 0px #515258, inset 1px -1px #515258, inset -1px 0px #515258, inset -1px 1px #515258; }
|
||||||
|
::-webkit-scrollbar-thumb:horizontal {
|
||||||
|
background-image: linear-gradient(#3b3c40 5%, #36373b);
|
||||||
|
min-width: 25px; }
|
||||||
|
::-webkit-scrollbar-thumb:horizontal:hover {
|
||||||
|
background-image: linear-gradient(#3d3e43 25%, #36373b); }
|
||||||
|
::-webkit-scrollbar-thumb:vertical {
|
||||||
|
background-image: linear-gradient(to right, #3b3c40 5%, #36373b);
|
||||||
|
min-height: 25px; }
|
||||||
|
::-webkit-scrollbar-thumb:vertical:hover {
|
||||||
|
background-image: linear-gradient(to right, #3d3e43 25%, #36373b); }
|
||||||
|
::-webkit-scrollbar-thumb:active {
|
||||||
|
background-image: linear-gradient(#36373b, #36373b) !important; }
|
||||||
|
|
||||||
|
:not(body)::-webkit-scrollbar-thumb:horizontal {
|
||||||
|
box-shadow: inset 1px 1px #515258, inset -1px -1px #515258, inset 0px 1px #515258, inset 0px -1px #515258, inset 1px 0px #515258, inset 1px -1px #515258, inset -1px 0px #515258, inset -1px 1px #515258, 1px 0px #222325, 1px 1px #222325, -1px 1px #222325, -1px 0px #222325; }
|
||||||
|
:not(body)::-webkit-scrollbar-thumb:vertical {
|
||||||
|
box-shadow: inset 1px 1px #515258, inset -1px -1px #515258, inset 0px 1px #515258, inset 0px -1px #515258, inset 1px 0px #515258, inset 1px -1px #515258, inset -1px 0px #515258, inset -1px 1px #515258, 0px -1px #222325, 1px -1px #222325, 1px 1px #222325, 0px 1px #222325; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:horizontal,
|
||||||
|
::-webkit-scrollbar-track:horizontal {
|
||||||
|
border-top: 1px solid #222325; }
|
||||||
|
::-webkit-scrollbar-thumb:vertical,
|
||||||
|
::-webkit-scrollbar-track:vertical {
|
||||||
|
border-left: 1px solid #222325; }
|
||||||
|
|
||||||
|
body::-webkit-scrollbar-thumb:horizontal, body::-webkit-scrollbar-thumb:vertical,
|
||||||
|
body::-webkit-scrollbar-track:horizontal,
|
||||||
|
body::-webkit-scrollbar-track:vertical {
|
||||||
|
border: 1px solid #222325; }
|
||||||
|
body::-webkit-scrollbar-thumb:horizontal,
|
||||||
|
body::-webkit-scrollbar-track:horizontal {
|
||||||
|
border-top: none; }
|
||||||
|
body::-webkit-scrollbar-thumb:vertical,
|
||||||
|
body::-webkit-scrollbar-track:vertical {
|
||||||
|
border-left: none; }
|
||||||
|
|
||||||
|
body::-webkit-scrollbar-corner {
|
||||||
|
border: 1px solid #222325;
|
||||||
|
border-top: none;
|
||||||
|
border-left: none; }
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track:corner-present:horizontal,
|
||||||
|
::-webkit-scrollbar-thumb:corner-present:horizontal {
|
||||||
|
border-radius: 0 0 0 0.3em; }
|
||||||
|
::-webkit-scrollbar-track:corner-present:vertical,
|
||||||
|
::-webkit-scrollbar-thumb:corner-present:vertical {
|
||||||
|
border-radius: 0 0.3em 0 0; }
|
||||||
|
::-webkit-scrollbar-track:horizontal,
|
||||||
|
::-webkit-scrollbar-thumb:horizontal {
|
||||||
|
border-radius: 0 0 0.3em 0.3em; }
|
||||||
|
::-webkit-scrollbar-track:vertical,
|
||||||
|
::-webkit-scrollbar-thumb:vertical {
|
||||||
|
border-radius: 0 0.3em 0.3em 0; }
|
||||||
|
|
||||||
|
/* Please enable JS for additional colouring features */
|
||||||
|
:root {
|
||||||
|
--rssguard-red: 0;
|
||||||
|
--rssguard-green: 0;
|
||||||
|
--rssguard-blue: 0;
|
||||||
|
--rssguard-threshold: 0.5; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--rssguard-r: calc(var(--rssguard-red) * 0.2126);
|
||||||
|
--rssguard-g: calc(var(--rssguard-green) * 0.7152);
|
||||||
|
--rssguard-b: calc(var(--rssguard-blue) * 0.0722);
|
||||||
|
--rssguard-sum:
|
||||||
|
calc(
|
||||||
|
var(--rssguard-r) +
|
||||||
|
var(--rssguard-g) +
|
||||||
|
var(--rssguard-b)
|
||||||
|
);
|
||||||
|
--rssguard-perceived-lightness: calc(var(--rssguard-sum) / 255); }
|
||||||
|
|
||||||
|
body,
|
||||||
|
::selection,
|
||||||
|
mark, code, pre, pre > code,
|
||||||
|
blockquote, blockquote p {
|
||||||
|
color: hsla(0, 0%, calc( ( var(--rssguard-perceived-lightness) - var(--rssguard-threshold) ) * -10000000% ), 0.9); }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=html_style.css.map */
|
||||||
309
resources/skins/solarized-dark/html_style.scss
Normal file
309
resources/skins/solarized-dark/html_style.scss
Normal file
|
|
@ -0,0 +1,309 @@
|
||||||
|
@charset "utf-8";
|
||||||
|
|
||||||
|
$qtbg-base: #2F3134 !default; // clr_basbg
|
||||||
|
$qtbg-button: #2C2D30 !default; // clr_altbg // button bg (scrollbar, alt bg)
|
||||||
|
$qcselbg: #647595 !default; // clr_selbg
|
||||||
|
|
||||||
|
// {{{ Emulate Fusion colour processing (dark only)
|
||||||
|
|
||||||
|
// Scrollbar colours
|
||||||
|
|
||||||
|
//$qcbgbg: lighten($qtbg-button, 6%); // See toolbar bg
|
||||||
|
$bgscroll: lighten($qtbg-button, 2%) !default; // track and corner bg
|
||||||
|
$tr-border: darken($qtbg-button, 4%) !default; // track brdr
|
||||||
|
|
||||||
|
// {{{ Scrollbar thumb
|
||||||
|
|
||||||
|
// Thumb bg gradient
|
||||||
|
|
||||||
|
// Normal
|
||||||
|
$thscrlin: lighten($qtbg-button, 6%) !default;
|
||||||
|
$thscrlout: lighten($qtbg-button, 4%) !default;
|
||||||
|
|
||||||
|
// Hover
|
||||||
|
$thscrlhvin: lighten($qtbg-button, 7%) !default;
|
||||||
|
$thscrlhvout: $thscrlout;
|
||||||
|
|
||||||
|
// Light outline
|
||||||
|
$th-border: lighten($qtbg-button, 15%) !default;
|
||||||
|
|
||||||
|
// }}}
|
||||||
|
|
||||||
|
// }}}
|
||||||
|
|
||||||
|
// {{{ HTML palette (Colours)
|
||||||
|
|
||||||
|
$cbg00: $qtbg-base;
|
||||||
|
|
||||||
|
// {{{ Irrelevant, because colour switcher (see below) overrides all fg colours (either with JS on or off)
|
||||||
|
$cfg00: #f5f5f5 !default;
|
||||||
|
$cfg10: #E2E2E2 !default;
|
||||||
|
$cfg11: $cfg10;
|
||||||
|
// }}}
|
||||||
|
|
||||||
|
$cbor2: #545556 !default;
|
||||||
|
|
||||||
|
$ccodeblock: rgba(33, 35, 39, 0.4) !default;
|
||||||
|
$ccode: $ccodeblock;
|
||||||
|
$cbor3: $tr-border;
|
||||||
|
$cmark: #f8d08c66 !default; // 40% transparency
|
||||||
|
|
||||||
|
$clink: $qcselbg;
|
||||||
|
|
||||||
|
// }}}
|
||||||
|
|
||||||
|
// Other
|
||||||
|
|
||||||
|
$radius-unit: .3em !default;
|
||||||
|
|
||||||
|
@import
|
||||||
|
"../nudus-base/html_style_base"
|
||||||
|
;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Dark CSS style has following additions:
|
||||||
|
//
|
||||||
|
|
||||||
|
// {{{ Border around viewport
|
||||||
|
|
||||||
|
// https://csswizardry.com/2010/12/simplified-page-borders-in-pure-css/
|
||||||
|
|
||||||
|
html::before,
|
||||||
|
html::after,
|
||||||
|
body::before,
|
||||||
|
body::after {
|
||||||
|
content: "";
|
||||||
|
background-color: $tr-border;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
html::before {
|
||||||
|
height: 1px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html::after {
|
||||||
|
width: 1px;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
height: 1px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::after {
|
||||||
|
width: 1px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// }}}
|
||||||
|
|
||||||
|
// {{{ Dark-coloured scrollbar
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 13px;
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track,
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background-color: $bgscroll;
|
||||||
|
box-shadow: inset 1px 1px lighten($tr-border, 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Part where vertical and horizontal scrollbars meet
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
border-radius: 0 0 $radius-unit 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Can be simplified to @include and function
|
||||||
|
$th-outline:
|
||||||
|
inset 1px 1px $th-border,
|
||||||
|
inset -1px -1px $th-border,
|
||||||
|
|
||||||
|
inset 0px 1px $th-border,
|
||||||
|
inset 0px -1px $th-border,
|
||||||
|
|
||||||
|
inset 1px 0px $th-border,
|
||||||
|
inset 1px -1px $th-border,
|
||||||
|
|
||||||
|
inset -1px 0px $th-border,
|
||||||
|
inset -1px 1px $th-border
|
||||||
|
;
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
$th-min-unit: 25px;
|
||||||
|
box-shadow: $th-outline;
|
||||||
|
|
||||||
|
&:horizontal {
|
||||||
|
background-image: linear-gradient($thscrlin 5%, $thscrlout);
|
||||||
|
min-width: $th-min-unit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-image: linear-gradient($thscrlhvin 25%, $thscrlhvout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:vertical {
|
||||||
|
background-image: linear-gradient(to right, $thscrlin 5%, $thscrlout);
|
||||||
|
min-height: $th-min-unit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-image: linear-gradient(to right, $thscrlhvin 25%, $thscrlhvout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-image: linear-gradient($thscrlout, $thscrlout) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Light and dark borders to outline the thumb
|
||||||
|
// Clockwise (x y)
|
||||||
|
:not(body)::-webkit-scrollbar-thumb {
|
||||||
|
|
||||||
|
&:horizontal {
|
||||||
|
box-shadow:
|
||||||
|
$th-outline,
|
||||||
|
1px 0px $tr-border,
|
||||||
|
1px 1px $tr-border,
|
||||||
|
-1px 1px $tr-border,
|
||||||
|
-1px 0px $tr-border
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:vertical {
|
||||||
|
box-shadow:
|
||||||
|
$th-outline,
|
||||||
|
0px -1px $tr-border,
|
||||||
|
1px -1px $tr-border,
|
||||||
|
1px 1px $tr-border,
|
||||||
|
0px 1px $tr-border
|
||||||
|
;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb,
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
|
||||||
|
&:horizontal {
|
||||||
|
border-top: 1px solid $tr-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:vertical {
|
||||||
|
border-left: 1px solid $tr-border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Complete the borders for body scrollbar
|
||||||
|
body::-webkit-scrollbar-thumb,
|
||||||
|
body::-webkit-scrollbar-track {
|
||||||
|
|
||||||
|
&:horizontal,
|
||||||
|
&:vertical {
|
||||||
|
border: 1px solid $tr-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:horizontal {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:vertical {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body::-webkit-scrollbar-corner {
|
||||||
|
border: 1px solid $tr-border;
|
||||||
|
border-top: none;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track,
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
|
||||||
|
&:corner-present {
|
||||||
|
|
||||||
|
&:horizontal {
|
||||||
|
border-radius: 0 0 0 $radius-unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:vertical {
|
||||||
|
border-radius: 0 $radius-unit 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:horizontal {
|
||||||
|
border-radius: 0 0 $radius-unit $radius-unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:vertical {
|
||||||
|
border-radius: 0 $radius-unit $radius-unit 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// }}}
|
||||||
|
|
||||||
|
// {{{ Fg colour switcher
|
||||||
|
|
||||||
|
// Thank you so much!!
|
||||||
|
// https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/
|
||||||
|
|
||||||
|
/* Please enable JS for additional colouring features */
|
||||||
|
:root {
|
||||||
|
// Default RGB values for background colour
|
||||||
|
--rssguard-red: 0;
|
||||||
|
--rssguard-green: 0;
|
||||||
|
--rssguard-blue: 0;
|
||||||
|
// The threshold at which colours are considered "light
|
||||||
|
// Range: decimals from 0 to 1, recommended 0.5 - 0.6
|
||||||
|
--rssguard-threshold: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
// Calculates perceived lightness using the sRGB Luma method
|
||||||
|
// Luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
|
||||||
|
--rssguard-r: calc(var(--rssguard-red) * 0.2126);
|
||||||
|
--rssguard-g: calc(var(--rssguard-green) * 0.7152);
|
||||||
|
--rssguard-b: calc(var(--rssguard-blue) * 0.0722);
|
||||||
|
--rssguard-sum:
|
||||||
|
calc(
|
||||||
|
var(--rssguard-r) +
|
||||||
|
var(--rssguard-g) +
|
||||||
|
var(--rssguard-b)
|
||||||
|
);
|
||||||
|
--rssguard-perceived-lightness: calc(var(--rssguard-sum) / 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shows either white or black colour depending on perceived lightness
|
||||||
|
body,
|
||||||
|
::selection,
|
||||||
|
mark, code, pre, pre > code,
|
||||||
|
blockquote, blockquote p { // TODO: why did not I add 'blockquote p' here before?
|
||||||
|
color:
|
||||||
|
hsla(
|
||||||
|
0,
|
||||||
|
0%,
|
||||||
|
calc(
|
||||||
|
(
|
||||||
|
var(--rssguard-perceived-lightness) -
|
||||||
|
var(--rssguard-threshold)
|
||||||
|
) *
|
||||||
|
-10000000%
|
||||||
|
),
|
||||||
|
.9
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// }}}
|
||||||
|
// vim:foldmethod=marker
|
||||||
423
resources/skins/solarized-dark/html_style_base.scss
Normal file
423
resources/skins/solarized-dark/html_style_base.scss
Normal file
|
|
@ -0,0 +1,423 @@
|
||||||
|
// ___________________________
|
||||||
|
// < I'm an expert in my field. >
|
||||||
|
// ---------------------------
|
||||||
|
// \ ^__^
|
||||||
|
// \ (oo)\_______
|
||||||
|
// (__)\ )\/\
|
||||||
|
// ||----w |
|
||||||
|
// || ||
|
||||||
|
|
||||||
|
//
|
||||||
|
// Variables
|
||||||
|
//
|
||||||
|
|
||||||
|
$base-unit: 10px !default;
|
||||||
|
|
||||||
|
//
|
||||||
|
// Styling
|
||||||
|
//
|
||||||
|
|
||||||
|
// Let the font be customised via RSS Guard settings
|
||||||
|
* {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reset some basic elements
|
||||||
|
//
|
||||||
|
|
||||||
|
body, h1, h2, h3, h4, h5, h6,
|
||||||
|
p, blockquote, pre, hr,
|
||||||
|
dl, dd, ol, ul, figure {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Add some basic styling
|
||||||
|
//
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $cbg00;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $cfg00;
|
||||||
|
//cursor: default;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-webkit-font-feature-settings: "kern" 1;
|
||||||
|
font-feature-settings: "kern" 1;
|
||||||
|
font-kerning: normal;
|
||||||
|
padding: 10px !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: $clink;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
p, blockquote, pre,
|
||||||
|
ul, ol, dl, figure,
|
||||||
|
details {
|
||||||
|
margin-bottom: $base-unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
background-color: $cbor2;
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
margin: $base-unit 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 1.25rem !important; }
|
||||||
|
h2 { font-size: 1.20rem !important; }
|
||||||
|
h3 { font-size: 1.15rem !important; }
|
||||||
|
h4 { font-size: 1.1rem !important; }
|
||||||
|
h5 { font-size: 1rem !important; }
|
||||||
|
h6 { font-size: .95rem !important; }
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: italic !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 800 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: oblique !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: $cmark;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: .8rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: .9rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr {
|
||||||
|
cursor: help;
|
||||||
|
font-style: italic !important;
|
||||||
|
font-weight: 100 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
q {
|
||||||
|
font-style: italic !important;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '“';
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '”';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
time {
|
||||||
|
font-weight: 450 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
var {
|
||||||
|
font-style: oblique !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $clink;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cite {
|
||||||
|
font-style: italic !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// override if width is defined in element's style attribute
|
||||||
|
figure {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure > img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
font-size: .8rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: .3em solid $cbor2;
|
||||||
|
margin-left: 0;
|
||||||
|
padding: 0 $base-unit;
|
||||||
|
|
||||||
|
&,
|
||||||
|
p {
|
||||||
|
color: $cfg11;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
border: 1px solid $cbor3;
|
||||||
|
border-radius: $radius-unit;
|
||||||
|
color: $cfg10;
|
||||||
|
//cursor: text;
|
||||||
|
|
||||||
|
// Font for code blocks falls back to system default monospace
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: .95rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: $ccode;
|
||||||
|
padding: 0 .25em;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: $ccodeblock;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 7px 13px;
|
||||||
|
tab-size: 2;
|
||||||
|
// For <pre style='white-space:pre-wrap;'>
|
||||||
|
white-space: pre !important;
|
||||||
|
|
||||||
|
// For <pre style='white-space:pre-wrap;width:81ex'>
|
||||||
|
width: unset !important;
|
||||||
|
|
||||||
|
> code {
|
||||||
|
background-color: unset;
|
||||||
|
border: none;
|
||||||
|
color: unset;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
tab-size: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background: $ccode;
|
||||||
|
border: 1px solid $cbor3;
|
||||||
|
border-bottom: 3px solid darken($cbor3, 3%);
|
||||||
|
border-radius: $radius-unit;
|
||||||
|
box-shadow:
|
||||||
|
0 2px 4px darken($cbg00, 6%),
|
||||||
|
inset 0 1px $cbg00
|
||||||
|
;
|
||||||
|
font-size: .9rem !important;
|
||||||
|
padding: .1em .4em .2em .4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
background-color: $ccodeblock;
|
||||||
|
border: 1px solid $cbor3;
|
||||||
|
border-radius: $radius-unit;
|
||||||
|
color: $cfg00;
|
||||||
|
padding: .04em .25em;
|
||||||
|
// Do not use max-width here
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
background-color: $cbg00;
|
||||||
|
}
|
||||||
|
|
||||||
|
> option {
|
||||||
|
background-color: $cbg00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
// `!important` is set to override something like <table width="900px">
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return this if something goes wrong, and return the JS override for dark theme
|
||||||
|
//table,
|
||||||
|
//th,
|
||||||
|
//td {
|
||||||
|
// color: $cfg00;
|
||||||
|
//}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
|
||||||
|
li ul {
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
|
||||||
|
li ol {
|
||||||
|
list-style-type: lower-roman;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
// Let the width be defined (see .rssguard-mbody img), but keep aspect ratio
|
||||||
|
//height: auto;
|
||||||
|
// `width auto` creates many problems even if set as a fallback
|
||||||
|
//width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
border: 1px solid $ccodeblock;
|
||||||
|
border-radius: $radius-unit;
|
||||||
|
padding: .5em .5em 0;
|
||||||
|
|
||||||
|
> summary {
|
||||||
|
background-color: $ccodeblock;
|
||||||
|
border-radius: $radius-unit * 0.9;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: -.5em -.5em 0;
|
||||||
|
padding-left: .5em;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& *:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] {
|
||||||
|
border-color: $cbor3;
|
||||||
|
padding: .5em;
|
||||||
|
|
||||||
|
> summary {
|
||||||
|
border-bottom: 1px solid $cbor3;
|
||||||
|
border-radius: ($radius-unit * 0.9) ($radius-unit * 0.9) 0 0;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
select,
|
||||||
|
summary {
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: $cbor3;
|
||||||
|
text-shadow: 0 -1px $cbg00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:target {
|
||||||
|
outline: 1px solid $clink;
|
||||||
|
}
|
||||||
|
|
||||||
|
// m* == message*
|
||||||
|
.rssguard-mwrapper {
|
||||||
|
padding: 0px !important;
|
||||||
|
|
||||||
|
.rssguard-mhead {
|
||||||
|
|
||||||
|
.msmall,
|
||||||
|
.mlinks {
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
> h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msmall {
|
||||||
|
font-size: .9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mlinks {
|
||||||
|
|
||||||
|
.menc {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mwrapurl {
|
||||||
|
display: inline-flex;
|
||||||
|
|
||||||
|
a[href=""] {
|
||||||
|
|
||||||
|
&,
|
||||||
|
& + span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img, video {
|
||||||
|
// Needs to be `!important` when max-width is defined by image style
|
||||||
|
// <img src="https://....png" alt="alt" style="max-width: 100%;">
|
||||||
|
//max-width: 450px !important;
|
||||||
|
// For cases when they both are set
|
||||||
|
//max-height: unset !important;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
// `!important` to override `!important` that is set above
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Other
|
||||||
|
//
|
||||||
|
|
||||||
|
// For articles without any html elements;
|
||||||
|
// If not applied to _all_, *must* be applied to links in mbody
|
||||||
|
// mbody == article body
|
||||||
|
.rssguard-mbody {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix at least some mess produced by above
|
||||||
|
table {
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
29
resources/skins/solarized-dark/html_wrapper.html
Normal file
29
resources/skins/solarized-dark/html_wrapper.html
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>%1</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<style>
|
||||||
|
%style%
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
%2
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const rssGuardroot = document.documentElement;
|
||||||
|
rssGuardBody = document.body;
|
||||||
|
let rssGuardColor = window.getComputedStyle(rssGuardBody).backgroundColor;
|
||||||
|
rssGuardMatch = rssGuardColor.match(/(\w+)\((\d+), (\d+), (\d+)\)/);
|
||||||
|
|
||||||
|
if (rssGuardMatch != null) {
|
||||||
|
rssGuardroot.style.setProperty('--rssguard-red', rssGuardMatch[2]);
|
||||||
|
rssGuardroot.style.setProperty('--rssguard-green', rssGuardMatch[3]);
|
||||||
|
rssGuardroot.style.setProperty('--rssguard-blue', rssGuardMatch[4]);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/ <a href="%1"><span style="text-transform: uppercase;">%2</span></a>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<a href="%1">
|
||||||
|
<img alt="%2" src="%1" height="%3">
|
||||||
|
</a>
|
||||||
|
<br/>
|
||||||
15
resources/skins/solarized-dark/lite_html_single_message.html
Normal file
15
resources/skins/solarized-dark/lite_html_single_message.html
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div dir="%9" id="%8">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>%7</div>
|
||||||
|
<span>%2</span>
|
||||||
|
<h2>%1<span>%6</span> / <a href="%3">URL</a></h2>
|
||||||
|
<span>%5</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
%4
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
25
resources/skins/solarized-dark/lite_html_style.css
Normal file
25
resources/skins/solarized-dark/lite_html_style.css
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
body,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
hr,
|
||||||
|
dl,
|
||||||
|
dd,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #2F3134;
|
||||||
|
color: #f5f5f5; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #647595; }
|
||||||
7
resources/skins/solarized-dark/lite_html_style.scss
Normal file
7
resources/skins/solarized-dark/lite_html_style.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@charset "utf-8";
|
||||||
|
|
||||||
|
$col_back: #2F3134 !default;
|
||||||
|
$col_front: #f5f5f5 !default;
|
||||||
|
$col_link: #647595 !default;
|
||||||
|
|
||||||
|
@import "../nudus-base/lite_html_style_base";
|
||||||
28
resources/skins/solarized-dark/lite_html_style_base.scss
Normal file
28
resources/skins/solarized-dark/lite_html_style_base.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
body,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
hr,
|
||||||
|
dl,
|
||||||
|
dd,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $col_back;
|
||||||
|
color: $col_front;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $col_link;
|
||||||
|
}
|
||||||
61
resources/skins/solarized-dark/metadata.xml
Normal file
61
resources/skins/solarized-dark/metadata.xml
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<skin version="6.6.6">
|
||||||
|
<author>
|
||||||
|
<name>martinrotter</name>
|
||||||
|
</author>
|
||||||
|
<description>Dark variation of solarized theme.</description>
|
||||||
|
|
||||||
|
<palette>
|
||||||
|
<color key="FgInteresting">#acc2c5</color>
|
||||||
|
<color key="FgSelectedInteresting">#acc2c5</color>
|
||||||
|
<color key="FgNewMessages">#B58900</color>
|
||||||
|
<color key="FgSelectedNewMessages">#B58900</color>
|
||||||
|
<color key="FgError">#DC322F</color>
|
||||||
|
<color key="FgSelectedError">#DC322F</color>
|
||||||
|
<color key="FgDisabledFeed">#586e75</color>
|
||||||
|
<color key="Allright">#859900</color>
|
||||||
|
</palette>
|
||||||
|
|
||||||
|
<forced-styles>Fusion</forced-styles>
|
||||||
|
<forced-skin-colors>true</forced-skin-colors>
|
||||||
|
|
||||||
|
<style-palette>
|
||||||
|
<group id="All">
|
||||||
|
<color role="Base">#002b36</color>
|
||||||
|
<color role="AlternateBase">#073642</color>
|
||||||
|
<color role="ToolTipBase" brush="Dense1Pattern">#586e75</color>
|
||||||
|
<color role="Dark">#001f27</color>
|
||||||
|
<color role="Midlight">#586e75</color>
|
||||||
|
<color role="Mid">#657b83</color>
|
||||||
|
<color role="Shadow">#073642</color>
|
||||||
|
<color role="Light">#839496</color>
|
||||||
|
<color role="Highlight">#d33682</color>
|
||||||
|
|
||||||
|
<color role="Window">#073642</color>
|
||||||
|
<color role="Button">#073642</color>
|
||||||
|
|
||||||
|
<color role="Text">#96aaac</color>
|
||||||
|
<color role="BrightText">#ffffff</color>
|
||||||
|
<color role="HighlightedText">#ffffff</color>
|
||||||
|
<color role="PlaceholderText">#586e75</color>
|
||||||
|
<color role="ToolTipText">#96aaac</color>
|
||||||
|
<color role="ButtonText">#ffffff</color>
|
||||||
|
<color role="WindowText">#96aaac</color>
|
||||||
|
<color role="Link">#268bd2</color>
|
||||||
|
<color role="LinkVisited">#6c71c4</color>
|
||||||
|
|
||||||
|
<color role="NoRole">#073642</color>
|
||||||
|
</group>
|
||||||
|
|
||||||
|
<group id="Disabled">
|
||||||
|
<color role="Base">#002b36</color>
|
||||||
|
<color role="Dark">#001f27</color>
|
||||||
|
<color role="Shadow">#073642</color>
|
||||||
|
<color role="Text">#586e75</color>
|
||||||
|
<color role="ButtonText">#586e75</color>
|
||||||
|
<color role="WindowText">#586e75</color>
|
||||||
|
<color role="Highlight">#d33682</color>
|
||||||
|
</group>
|
||||||
|
</style-palette>
|
||||||
|
|
||||||
|
</skin>
|
||||||
4
resources/skins/solarized-dark/qt_style.qss
Normal file
4
resources/skins/solarized-dark/qt_style.qss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
QProgressBar {
|
||||||
|
background-color: palette(highlight);
|
||||||
|
color: palette(window);
|
||||||
|
}
|
||||||
24
resources/skins/solarized-dark/qt_style_forced.qss
Normal file
24
resources/skins/solarized-dark/qt_style_forced.qss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
QListWidget,
|
||||||
|
QScrollArea {
|
||||||
|
border: 1px solid palette(light);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
QPlainTextEdit:focus {
|
||||||
|
border: 1px solid palette(highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
QToolTip {
|
||||||
|
background-color: palette(window);
|
||||||
|
color: palette(text);
|
||||||
|
border: 1px solid palette(highlight);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
QSplitter::handle {
|
||||||
|
background: palette(light);
|
||||||
|
}
|
||||||
|
|
||||||
|
QStatusBar::item {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
@ -94,7 +94,7 @@ QIcon MessagesModel::generateUnreadIcon() {
|
||||||
QPointF center(64, 64);
|
QPointF center(64, 64);
|
||||||
qreal radius = 32;
|
qreal radius = 32;
|
||||||
|
|
||||||
QColor custom_clr = qApp->skins()->colorForModel(SkinEnums::PaletteColors::FgNewMessages).value<QColor>();
|
QColor custom_clr = qApp->skins()->colorForModel(SkinEnums::PaletteColors::FgInteresting).value<QColor>();
|
||||||
|
|
||||||
if (!custom_clr.isValid()) {
|
if (!custom_clr.isValid()) {
|
||||||
custom_clr = QColor(RAD_COLOR);
|
custom_clr = QColor(RAD_COLOR);
|
||||||
|
|
|
||||||
|
|
@ -63,34 +63,18 @@ bool SkinFactory::isStyleGoodForAlternativeStylePalette(const QString& style_nam
|
||||||
// This is here because in Qt 6.5.0, they hardcoded
|
// This is here because in Qt 6.5.0, they hardcoded
|
||||||
// DARK palette if user has enabled "dark mode" in OS.
|
// DARK palette if user has enabled "dark mode" in OS.
|
||||||
QPalette qt_fusionPalette(bool dark_appearance) {
|
QPalette qt_fusionPalette(bool dark_appearance) {
|
||||||
// Define Solarized dark and light colors
|
const QColor window_text = dark_appearance ? QColor(240, 240, 240) : Qt::black;
|
||||||
const QColor solarized_base03 = QColor(0, 43, 54); // Dark background for Solarized dark
|
const QColor background = dark_appearance ? QColor(50, 50, 50) : QColor(239, 239, 239);
|
||||||
const QColor solarized_base2 = QColor(238, 232, 213); // Light background for Solarized light
|
const QColor light = background.lighter(150);
|
||||||
const QColor solarized_yellow = QColor(181, 137, 0);
|
const QColor mid = (background.darker(130));
|
||||||
const QColor solarized_orange = QColor(203, 75, 22);
|
const QColor midlight = mid.lighter(110);
|
||||||
const QColor solarized_red = QColor(220, 50, 47);
|
const QColor base = dark_appearance ? background.darker(140) : Qt::white;
|
||||||
const QColor solarized_magenta = QColor(211, 54, 130);
|
const QColor disabled_base(background);
|
||||||
const QColor solarized_violet = QColor(108, 113, 196);
|
|
||||||
const QColor solarized_blue = QColor(38, 139, 210);
|
|
||||||
const QColor solarized_cyan = QColor(42, 161, 152);
|
|
||||||
const QColor solarized_green = QColor(133, 153, 0);
|
|
||||||
|
|
||||||
// Choose background and text colors based on appearance
|
|
||||||
const QColor background = dark_appearance ? solarized_base03 : solarized_base2;
|
|
||||||
const QColor window_text = dark_appearance ? QColor(131, 148, 150) : QColor(0, 43, 54); // Adjusted for contrast
|
|
||||||
const QColor text = window_text;
|
|
||||||
|
|
||||||
// Derive other colors
|
|
||||||
const QColor light_color = background.lighter(150);
|
|
||||||
const QColor middle_color = (background.darker(130));
|
|
||||||
const QColor middle_light_color = middle_color.lighter(110);
|
|
||||||
const QColor base = dark_appearance ? background.darker(140) : QColor(253, 246, 227); // Solarized base2 for light
|
|
||||||
const QColor disabled_base = background;
|
|
||||||
const QColor dark = background.darker(150);
|
const QColor dark = background.darker(150);
|
||||||
const QColor disabled_dark = QColor(209, 209, 209).darker(110);
|
const QColor disabled_dark = QColor(209, 209, 209).darker(110);
|
||||||
const QColor highlight = dark_appearance ? solarized_magenta : solarized_yellow; // Example highlight
|
const QColor text = dark_appearance ? window_text : Qt::black;
|
||||||
const QColor disabled_highlight = QColor(145, 145, 145);
|
const QColor highlight = QColor(48, 140, 198);
|
||||||
const QColor highlighted_text = dark_appearance ? window_text : QColor(0, 43, 54);
|
const QColor hightlighted_text = dark_appearance ? window_text : Qt::white;
|
||||||
const QColor disabled_text = dark_appearance ? QColor(130, 130, 130) : QColor(190, 190, 190);
|
const QColor disabled_text = dark_appearance ? QColor(130, 130, 130) : QColor(190, 190, 190);
|
||||||
const QColor button = background;
|
const QColor button = background;
|
||||||
const QColor shadow = dark.darker(135);
|
const QColor shadow = dark.darker(135);
|
||||||
|
|
@ -99,11 +83,11 @@ QPalette qt_fusionPalette(bool dark_appearance) {
|
||||||
QColor placeholder = text;
|
QColor placeholder = text;
|
||||||
placeholder.setAlpha(128);
|
placeholder.setAlpha(128);
|
||||||
|
|
||||||
QPalette fusion_palette(window_text, background, light_color, dark, middle_color, text, base);
|
QPalette fusion_palette(window_text, background, light, dark, mid, text, base);
|
||||||
fusion_palette.setBrush(QPalette::Midlight, middle_light_color);
|
fusion_palette.setBrush(QPalette::Midlight, midlight);
|
||||||
fusion_palette.setBrush(QPalette::Button, button);
|
fusion_palette.setBrush(QPalette::Button, button);
|
||||||
fusion_palette.setBrush(QPalette::Shadow, shadow);
|
fusion_palette.setBrush(QPalette::Shadow, shadow);
|
||||||
fusion_palette.setBrush(QPalette::HighlightedText, highlighted_text);
|
fusion_palette.setBrush(QPalette::HighlightedText, hightlighted_text);
|
||||||
|
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::Text, disabled_text);
|
fusion_palette.setBrush(QPalette::Disabled, QPalette::Text, disabled_text);
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::WindowText, disabled_text);
|
fusion_palette.setBrush(QPalette::Disabled, QPalette::WindowText, disabled_text);
|
||||||
|
|
@ -114,7 +98,7 @@ QPalette qt_fusionPalette(bool dark_appearance) {
|
||||||
|
|
||||||
fusion_palette.setBrush(QPalette::Active, QPalette::Highlight, highlight);
|
fusion_palette.setBrush(QPalette::Active, QPalette::Highlight, highlight);
|
||||||
fusion_palette.setBrush(QPalette::Inactive, QPalette::Highlight, highlight);
|
fusion_palette.setBrush(QPalette::Inactive, QPalette::Highlight, highlight);
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::Highlight, disabled_highlight);
|
fusion_palette.setBrush(QPalette::Disabled, QPalette::Highlight, QColor(145, 145, 145));
|
||||||
|
|
||||||
fusion_palette.setBrush(QPalette::PlaceholderText, placeholder);
|
fusion_palette.setBrush(QPalette::PlaceholderText, placeholder);
|
||||||
|
|
||||||
|
|
@ -125,61 +109,6 @@ QPalette qt_fusionPalette(bool dark_appearance) {
|
||||||
return fusion_palette;
|
return fusion_palette;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* QPalette qt_fusionPalette(bool dark_appearance) {
|
|
||||||
// Define pastel and well-readable colors depending on appearance
|
|
||||||
const QColor window_text = dark_appearance ? QColor(200, 200, 200) : QColor(30, 30, 30);
|
|
||||||
const QColor background = dark_appearance ? QColor(40, 40, 50) : QColor(245, 245, 245);
|
|
||||||
const QColor light_color = background.lighter(150);
|
|
||||||
const QColor middle_color = background.darker(130);
|
|
||||||
const QColor middle_light_color = middle_color.lighter(110);
|
|
||||||
const QColor base = dark_appearance ? background.darker(140) : QColor(255, 255, 255);
|
|
||||||
const QColor disabled_base = background;
|
|
||||||
const QColor dark = background.darker(150);
|
|
||||||
const QColor disabled_dark = QColor(180, 180, 180).darker(110);
|
|
||||||
|
|
||||||
// Pastel accent colors for highlights
|
|
||||||
const QColor highlight = dark_appearance ? QColor(150, 200, 225) : QColor(100, 180, 220);
|
|
||||||
const QColor disabled_highlight = QColor(180, 180, 180);
|
|
||||||
const QColor highlighted_text = dark_appearance ? window_text : QColor(255, 255, 255);
|
|
||||||
const QColor disabled_text = dark_appearance ? QColor(130, 130, 130) : QColor(180, 180, 180);
|
|
||||||
const QColor button = background;
|
|
||||||
const QColor shadow = dark.darker(135);
|
|
||||||
const QColor disabled_shadow = shadow.lighter(150);
|
|
||||||
|
|
||||||
// Placeholder with semi-transparent effect
|
|
||||||
QColor placeholder = highlighted_text;
|
|
||||||
placeholder.setAlpha(128);
|
|
||||||
|
|
||||||
QPalette fusion_palette(window_text, background, light_color, dark, middle_color, highlighted_text, base);
|
|
||||||
fusion_palette.setBrush(QPalette::Midlight, middle_light_color);
|
|
||||||
fusion_palette.setBrush(QPalette::Button, button);
|
|
||||||
fusion_palette.setBrush(QPalette::Shadow, shadow);
|
|
||||||
fusion_palette.setBrush(QPalette::HighlightedText, highlighted_text);
|
|
||||||
|
|
||||||
// Disabled states
|
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::Text, disabled_text);
|
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::WindowText, disabled_text);
|
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::ButtonText, disabled_text);
|
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::Base, disabled_base);
|
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::Dark, disabled_dark);
|
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::Shadow, disabled_shadow);
|
|
||||||
|
|
||||||
// Highlight states
|
|
||||||
fusion_palette.setBrush(QPalette::Active, QPalette::Highlight, highlight);
|
|
||||||
fusion_palette.setBrush(QPalette::Inactive, QPalette::Highlight, highlight);
|
|
||||||
fusion_palette.setBrush(QPalette::Disabled, QPalette::Highlight, disabled_highlight);
|
|
||||||
|
|
||||||
// Placeholder text
|
|
||||||
fusion_palette.setBrush(QPalette::PlaceholderText, placeholder);
|
|
||||||
|
|
||||||
if (dark_appearance) {
|
|
||||||
fusion_palette.setBrush(QPalette::Link, highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
return fusion_palette;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
void SkinFactory::loadSkinFromData(const Skin& skin, bool replace_existing_qss) {
|
void SkinFactory::loadSkinFromData(const Skin& skin, bool replace_existing_qss) {
|
||||||
#if QT_VERSION >= 0x060500 // Qt >= 6.5.0
|
#if QT_VERSION >= 0x060500 // Qt >= 6.5.0
|
||||||
auto system_color_scheme = qApp->styleHints()->colorScheme();
|
auto system_color_scheme = qApp->styleHints()->colorScheme();
|
||||||
|
|
@ -261,7 +190,7 @@ void SkinFactory::loadSkinFromData(const Skin& skin, bool replace_existing_qss)
|
||||||
// colors are now derived from system.
|
// colors are now derived from system.
|
||||||
#if QT_VERSION >= 0x060500 // Qt >= 6.5.0
|
#if QT_VERSION >= 0x060500 // Qt >= 6.5.0
|
||||||
else /*if (qApp->styleHints()->colorScheme() == Qt::ColorScheme::Light)*/ {
|
else /*if (qApp->styleHints()->colorScheme() == Qt::ColorScheme::Light)*/ {
|
||||||
qApp->setPalette(qt_fusionPalette(true));
|
qApp->setPalette(qt_fusionPalette(false));
|
||||||
}
|
}
|
||||||
#endif
|
#endif
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue