diff --git a/unicorn.nnwtheme/stylesheet.css b/unicorn.nnwtheme/stylesheet.css index e74d39b..1340c29 100644 --- a/unicorn.nnwtheme/stylesheet.css +++ b/unicorn.nnwtheme/stylesheet.css @@ -3,7 +3,8 @@ body { margin-left: auto; margin-right: auto; - background-color: var(--background-color); + /* background-color: var(--background-color); */ + background: linear-gradient(120deg, #f9e7e9, #fdb2ce, #ffa5c7, #feb4b4, #faf1ca, #bdfcda, #affbff, #d2c8ff, #e3afff, #f4bdff 100%); word-wrap: break-word; max-width: 44em; } @@ -69,11 +70,14 @@ strong, b { } /* rainbow text */ .articleBody { - background: linear-gradient(180deg, #f9e7e9, #fa9cc0, #f87dac, #f38282, #f7d54d, #bdfcda, #affbff, #d2c8ff, #e3afff, #f4bdff 100%); + background: linear-gradient(120deg, #f9e7e9, #fa9cc0, #f87dac, #f38282, #f7d54d, #bdfcda, #affbff, #d2c8ff, #e3afff, #f4bdff 100%); background-clip: text; -webkit-background-clip: text; color: transparent; } + body { + background: linear-gradient(to bottom, #282a36, #29212f ); + } strong, b { color: #282a36; padding: 0.1rem; @@ -197,7 +201,9 @@ h1, h2, h3, h4 { font-family: var(--header-font); text-align: left; color: var(--header-color); + /* background: linear-gradient(90deg, #faa0c7, #fa9cc0, #f87dac, #f38282, #f7d54d, #bdfcda, #affbff, #d2c8ff, #e3afff, #f4bdff 100%); */ } + pre { max-width: 100%; margin: 0; @@ -282,7 +288,13 @@ img, figure, video, div, object { margin: 0 auto; } figure img { - border: solid 0.2rem #faa0c7; + border: solid 0.3rem #faa0c7; + border-image: linear-gradient(90deg, #faa0c7, #fa9cc0, #f87dac, #f38282, #f7d54d, #bdfcda, #affbff, #d2c8ff, #e3afff, #f4bdff 100%); + border-image-slice: 1; + border-top: 0.3rem solid #FC8EAC; + border-right: 0.3rem solid #FC8EAC; + border-left: 0.3rem solid #FC8EAC; + border-bottom: 0.3rem solid #FC8EAC; } iframe { @@ -318,7 +330,13 @@ sub { } hr { - border: 1.5px solid var(--table-cell-border-color); + border: solid 1pt #FC8EAC; + border-image: linear-gradient(90deg, #faa0c7, #fa9cc0, #f87dac, #f38282, #f7d54d, #bdfcda, #affbff, #d2c8ff, #e3afff, #f4bdff 100%); + border-image-slice: 1; + border-top: 0.2rem solid #FC8EAC; + border-right: 0.2rem solid #FC8EAC; + border-left: 0.2rem solid #FC8EAC; + border-bottom: 0.2rem solid #FC8EAC; } .iframeWrap { @@ -340,6 +358,8 @@ blockquote { margin-inline-end: 0; padding-inline-start: 15px; border-inline-start: 3px solid var(--block-quote-border-color); + background-color: var(--block-quote-background-color); + padding: 0.2rem; } /* Feed Specific */ @@ -423,6 +443,7 @@ a.footnote:hover, word-break: break-word; -webkit-hyphens: auto; -webkit-text-size-adjust: none; + color: #000000; } :root { @@ -431,6 +452,7 @@ a.footnote:hover, --primary-accent-color: #f34482; --secondary-accent-color: #fb72a2; --block-quote-border-color: #faa0b8; + --block-quote-background-color: #fce8ef; --ios-hover-color: #f3e1e8; /* placeholder */ /* font-size: 1rem; */ /* The font-size is replaced at runtime by the dynamic type size */ @@ -447,6 +469,13 @@ a.footnote:hover, --header-table-border-color: rgba(255, 255, 255, 0.2); --ios-hover-color: #444444; /* placeholder */ } + /* rainbow text */ + .articleBody { + background: linear-gradient(120deg, #f9e7e9, #fa9cc0, #f87dac, #f38282, #f7d54d, #bdfcda, #affbff, #d2c8ff, #e3afff, #f4bdff 100%); + background-clip: text; + -webkit-background-clip: text; + color: transparent; + } } body a, body a:visited, body a * { @@ -472,12 +501,7 @@ a.footnote:hover, text-decoration: none; color: var(--sup-link-color); } -.articleBody { - background: linear-gradient(90deg, #f9e7e9, #fa9cc0, #f87dac, #f38282, #f7d54d, #bdfcda, #affbff, #d2c8ff, #e3afff, #f4bdff 100%); - background-clip: text; - -webkit-background-clip: text; - color: transparent; -} + body .header { font: var(--header-font); font-size: [[font-size]]px; @@ -537,6 +561,7 @@ a.footnote:hover, color-scheme: light dark; --accent-color: #ef2687; --block-quote-border-color: #faa0b8; + --block-quote-background-color: #fce8ef; --hover-gradient-color-start: #f67b9c; --hover-gradient-color-end: #faa0b8; @@ -545,7 +570,7 @@ a.footnote:hover, @media(prefers-color-scheme: dark) { :root { --accent-color: #fbc0d4; - --block-quote-border-color: #f8bfd3; + --block-quote-border-color: #ff91ca; --header-table-border-color: #f8bfd3; --hover-gradient-color-start: #f67b9c; --hover-gradient-color-end: #faa0b8;