The great flattification
This commit is contained in:
@@ -55,7 +55,7 @@ body {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.5em;
|
||||
color: var(--text_color);
|
||||
color: var(--body_text_color);
|
||||
background: var(--background);
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
@@ -66,7 +66,7 @@ header, footer, .checkers {
|
||||
background-repeat: repeat;
|
||||
}
|
||||
header, footer {
|
||||
box-shadow: inset 1px 1px 8px 0 var(--shadow_color);
|
||||
box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
@@ -95,10 +95,9 @@ footer > .footer_content {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
background: #3f3f3f;
|
||||
background: var(--input_color);
|
||||
background: var(--input_background);
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 90%;
|
||||
box-shadow: 0 0 6px -2px var(--shadow_color);
|
||||
}
|
||||
.button_toggle_navigation:active {
|
||||
padding: 15px 15px 10px 15px;
|
||||
@@ -161,7 +160,7 @@ section {
|
||||
.page_navigation a {
|
||||
float: none;
|
||||
display: block;
|
||||
color: var(--layer_1_text_color);
|
||||
color: var(--background_text_color);
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
margin: 0.3em 15px 0.3em 15px;
|
||||
@@ -175,8 +174,8 @@ section {
|
||||
text-decoration: none;
|
||||
}
|
||||
.page_navigation a:hover {
|
||||
background-color: var(--input_color);
|
||||
color: var(--input_text_color);
|
||||
background: var(--input_background);;
|
||||
color: var(--input_text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -238,19 +237,19 @@ h1 {
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
border-bottom: 1px var(--layer_4_color_border) solid;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.75em;
|
||||
border-bottom: 1px var(--layer_3_color_border) solid;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.50em;
|
||||
border-bottom: 1px var(--layer_2_color_border) solid;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.25em;
|
||||
border-bottom: 1px var(--layer_1_color_border) solid;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
@@ -262,7 +261,7 @@ h6 {
|
||||
hr {
|
||||
height: 1px;
|
||||
border: none;
|
||||
background-color: var(--input_color);
|
||||
background-color: var(--separator);
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
@@ -295,7 +294,7 @@ table:not(.form) {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
tr:not(.form) {border-bottom: 1px var(--layer_2_color_border) solid;}
|
||||
tr:not(.form) {border-bottom: 1px var(--separator) solid;}
|
||||
tr > td, tr > th {padding: 0.2em 0.5em;}
|
||||
@media(max-width: 30em) {
|
||||
/* Forms will be stacked on small screens */
|
||||
@@ -308,7 +307,7 @@ tr > td, tr > th {padding: 0.2em 0.5em;}
|
||||
|
||||
pre {
|
||||
padding: 10px;
|
||||
border-bottom: 1px var(--layer_2_color_border) solid;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -321,10 +320,9 @@ pre {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 2px 8px -3px var(--shadow_color);
|
||||
background-color: var(--layer_3_color);
|
||||
background: var(--input_background);
|
||||
color: #bfbfbf; /* Fallback */
|
||||
color: var(--text_color);
|
||||
color: var(--body_text_color);
|
||||
word-break: break-all;
|
||||
text-align: left;
|
||||
line-height: 1.2em;
|
||||
@@ -338,7 +336,7 @@ pre {
|
||||
}
|
||||
.file_button:hover,
|
||||
.file_button_selected {
|
||||
box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
|
||||
box-shadow: 0 0 3px 2px var(--highlight_color);
|
||||
text-decoration: none;
|
||||
}
|
||||
.file_button > img{
|
||||
@@ -391,11 +389,11 @@ select {
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
margin: 3px;
|
||||
background: linear-gradient(var(--input_color), var(--input_color_dark));
|
||||
background: none;
|
||||
background: var(--input_background);
|
||||
padding: 5px 5px 5px 5px;
|
||||
box-shadow: 1px 1px 5px -2px var(--shadow_color);
|
||||
overflow: hidden;
|
||||
color: var(--input_text_color);
|
||||
color: var(--input_text);
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
@@ -423,9 +421,10 @@ input[type="button"]:focus,
|
||||
input[type="color"]:focus,
|
||||
select:focus {
|
||||
color: #bfbfbf; /* Fallback */
|
||||
color: var(--input_text_color);
|
||||
color: var(--input_text);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--highlight_border), 2px 2px 6px -3px var(--shadow_color);
|
||||
box-shadow: inset 0 0 3px 0 var(--highlight_color);
|
||||
|
||||
}
|
||||
button:active,
|
||||
.button:active,
|
||||
@@ -452,8 +451,7 @@ input[type="submit"]:disabled, input[type="submit"].disabled,
|
||||
input[type="button"]:disabled, input[type="button"].disabled,
|
||||
input[type="color"]:disabled, input[type="color"].disabled,
|
||||
select:disabled , select.disabled {
|
||||
background: var(--input_disabled_color);
|
||||
color: var(--input_color);
|
||||
color: var(--input_disabled_text);
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
padding: 4px 5px 4px 5px;
|
||||
@@ -478,13 +476,14 @@ button > svg,
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-color: var(--shaded_background);
|
||||
box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
|
||||
box-shadow: inset 0 -10px 6px -12px var(--shadow_color);
|
||||
}
|
||||
.tab_bar > button,
|
||||
.tab_bar > .button {
|
||||
margin: 10px 0 0 10px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
min-width: 5em;
|
||||
}
|
||||
.tab_bar > *:last-child {
|
||||
margin-right: 10px;
|
||||
@@ -492,9 +491,9 @@ button > svg,
|
||||
|
||||
/* Dropdown list of the select tag */
|
||||
option{
|
||||
background-color: var(--input_color_dark);
|
||||
background: var(--input_background);
|
||||
color: #bfbfbf; /* Fallback */
|
||||
color: var(--text_color);
|
||||
color: var(--body_text_color);
|
||||
}
|
||||
|
||||
/* TEXT FIELDS */
|
||||
@@ -509,10 +508,10 @@ input[type="date"]{
|
||||
margin: 3px; /* Same as button, to make them align nicely */
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(var(--input_color_dark), var(--input_color));
|
||||
box-shadow: inset 1px 1px 4px -2px var(--shadow_color);
|
||||
background: var(--input_background);
|
||||
box-shadow: inset 1px 1px 2px -1px var(--shadow_color);
|
||||
padding: 3px 5px;
|
||||
color: var(--input_text_color);
|
||||
color: var(--input_text);
|
||||
font-size: 1em;
|
||||
outline: 0;
|
||||
transition: box-shadow 0.3s;
|
||||
@@ -529,7 +528,7 @@ input[type="password"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="date"]:focus{
|
||||
box-shadow: var(--highlight_border), inset 3px 3px 6px -3px var(--shadow_color);
|
||||
box-shadow: inset 0 0 3px 0 var(--highlight_color);
|
||||
}
|
||||
textarea:disabled,
|
||||
input[type="text"]:disabled,
|
||||
@@ -537,8 +536,7 @@ input[type="password"]:disabled,
|
||||
input[type="email"]:disabled,
|
||||
input[type="number"]:disabled,
|
||||
input[type="date"]:disabled{
|
||||
background: var(--input_disabled_color);
|
||||
color: var(--input_color);
|
||||
color: var(--input_disabled_text);
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
cursor: not-allowed;
|
||||
|
||||
@@ -14,9 +14,7 @@ gumgum.com, 11645, RESELLER, ffdef49475d318a9
|
||||
openx.com, 538959099, RESELLER, 6a698e2ec38604c6
|
||||
openx.com, 539924617, RESELLER, 6a698e2ec38604c6
|
||||
pubmatic.com, 137711, RESELLER, 5d62403b186f2ace
|
||||
pubmatic.com, 156212, RESELLER, 5d62403b186f2ace
|
||||
pubmatic.com, 156700, RESELLER, 5d62403b186f2ace
|
||||
rubiconproject.com, 17960, RESELLER, 0bfd66d529a55807
|
||||
33across.com, 0010b00002doyyNAAQ, DIRECT, bbea06d9c4d2853c
|
||||
rubiconproject.com, 16414, RESELLER, 0bfd66d529a55807
|
||||
rubiconproject.com, 21642, RESELLER, 0bfd66d529a55807
|
||||
@@ -1209,6 +1207,152 @@ amxrtb.com, 105199400, DIRECT
|
||||
adtarget.com.tr, 682499, DIRECT
|
||||
improvedigital.com, 912, DIRECT
|
||||
emxdgt.com, 1701, DIRECT, 1e1d41537f7cad7f
|
||||
ads.plus, 299, DIRECT
|
||||
pubmatic.com, 161332, RESELLER, 5d62403b186f2ace
|
||||
sonobi.com, 0e0a64d7d3, RESELLER, d1a215d9eb5aee9e
|
||||
sovrn.com, 268479, RESELLER, fafdf38b16bf6b2b
|
||||
lijit.com, 268479, RESELLER, fafdf38b16bf6b2b
|
||||
xandr.com, 3251, RESELLER
|
||||
lijit.com, 268479-eb, RESELLER, fafdf38b16bf6b2b
|
||||
rhythmone.com, 2221906906, RESELLER, a670c89d4a324e47
|
||||
video.unrulymedia.com, 2221906906, RESELLER
|
||||
criteo.com, B-059206, RESELLER, 9fac4a4a87c2a44f
|
||||
improvedigital.com, 2016, RESELLER
|
||||
improvedigital.com, 1033, RESELLER
|
||||
appnexus.com, 2579, RESELLER
|
||||
improvedigital.com, 1220, RESELLER
|
||||
quantum-advertising.com, 4758, RESELLER
|
||||
improvedigital.com, 1602, RESELLER
|
||||
152media.info, 152m11, RESELLER
|
||||
richaudience.com, 1btooad22a, DIRECT
|
||||
33across.com, 0015a00002ouk4aaac, DIRECT, bbea06d9c4d2853c
|
||||
smartadserver.com, 4144, DIRECT
|
||||
smartadserver.com, 4016, DIRECT
|
||||
smartadserver.com, 4012, DIRECT
|
||||
smartadserver.com, 4071, DIRECT
|
||||
smartadserver.com, 4073, DIRECT
|
||||
smartadserver.com, 4074, DIRECT
|
||||
google.com, pub-8933329999391104, RESELLER, f08c47fec0942fa0
|
||||
google.com, pub-1325340429823502, RESELLER, f08c47fec0942fa0
|
||||
google.com, pub-6110672335579159, RESELLER, f08c47fec0942fa0
|
||||
adpushup.com, cfcb90bc3d34a71413ca5d041db539a8, DIRECT, b0b8ff8485794fdd
|
||||
pubmatic.com, 160925, RESELLER, 5d62403b186f2ace
|
||||
spotx.tv, 202009, DIRECT, 7842df1d2fe2db34
|
||||
spotxchange.com, 202009, RESELLER, 7842df1d2fe2db34
|
||||
durationmedia.net, 21968366300, DIRECT
|
||||
yahoo.com, 57872, DIRECT
|
||||
smartadserver.com, 3447, DIRECT
|
||||
rubiconproject.com, 13702, DIRECT, 0bfd66d529a55807
|
||||
admanmedia.com, 812, DIRECT
|
||||
amxrtb.com, 105199579, DIRECT
|
||||
opera.com, pub5688296365760, DIRECT, 55a0c5fd61378de3
|
||||
indexexchange.com, 192806, RESELLER, 50b1c356f2c5c8fc
|
||||
pubmatic.com, 158565, RESELLER, 5d62403b186f2ace
|
||||
smaato.com, 1100042823, DIRECT, 07bcf65f187117b4
|
||||
rubiconproject.com, 17608, RESELLER, 0bfd66d529a55807
|
||||
triplelift.com, 10522, RESELLER, 6c33edb13117fd86
|
||||
smartadserver.com, 4140, RESELLER
|
||||
connectad.io, 50, DIRECT, 85ac85a30c93b3e5
|
||||
indexexchange.com, 196713, DIRECT
|
||||
adform.com, 2474, DIRECT, 9f5210a2f0999e32
|
||||
smartadserver.com, 1743, RESELLER, 060d053dcf45cbf3
|
||||
indexexchange.com, 192450, DIRECT, 50b1c356f2c5c8fc
|
||||
appnexus.com, 10264, RESELLER, f5ab79cb980f11d1
|
||||
appnexus.com, 10264, DIRECT, f5ab79cb980f11d1
|
||||
adyoulike.com, 438e40b69c9e19f81b51401dce6e8be4, DIRECT, 4ad745ead2958bf7
|
||||
appnexus.com, 9733, RESELLER, f5ab79cb980f11d1
|
||||
e-planning.net, 835fbafe26d231b1, DIRECT, c1ba615865ed87b2
|
||||
gumgum.com, 13579, DIRECT, ffdef49475d318a9
|
||||
indexexchange.com, 189529, DIRECT, 50b1c356f2c5c8fc
|
||||
onetag.com, 59a18369e249bfb, DIRECT
|
||||
pubmatic.com, 156813, DIRECT, 5d62403b186f2ace
|
||||
rubiconproject.com, 17184, DIRECT, 0bfd66d529a55807
|
||||
spotim.market, 4446666, DIRECT, 077e5f709d15bdbb
|
||||
152media.info, 152m10, RESELLER
|
||||
advertising.com, 28305, RESELLER
|
||||
appnexus.com, 11470, RESELLER
|
||||
themediagrid.com, bg415o, DIRECT, 35d5010d7789b49d
|
||||
smartadserver.com, 3392, DIRECT
|
||||
appnexus.com, 10212, RESELLER
|
||||
improvedigital.com, 1633, RESELLER
|
||||
yahoo.com, 58977, RESELLER, e1a5b5b6e3255540
|
||||
onetag.com, 75779831fd8c740, DIRECT
|
||||
adyoulike.com, 22e5955a10a7f98b037f13dd297cdd74, DIRECT, 4ad745ead2958bf7
|
||||
freewheel.tv, 1089937, DIRECT
|
||||
freewheel.tv, 1099761, RESELLER
|
||||
bliink.io, cfe6f06e-2ff0-11eb-8d68-7aaa96b266b5, DIRECT
|
||||
gothamads.com, 1750, DIRECT, d9c86e5dec870222
|
||||
connectad.io, 190, DIRECT, 85ac85a30c93b3e5
|
||||
improvedigital.com, 1937, RESELLER
|
||||
e-planning.net, 54275499d4eb431b, DIRECT, c1ba615865ed87b2
|
||||
trmqb.com, 4512, DIRECT
|
||||
ssp.logan.ai, lg9, RESELLER
|
||||
opera.com, pub6060502141568, DIRECT, 55a0c5fd61378de3
|
||||
openx.com, 544015448, RESELLER, 6a698e2ec38604c6
|
||||
synacor.com, 82460, DIRECT, e108f11b2cdf7d5b
|
||||
video.unrulymedia.com, 123476257, RESELLER
|
||||
bizzclick.com, 30, RESELLER, 7e936b1feafdaa61
|
||||
betweendigital.com, 43818, RESELLER
|
||||
smaato.com, 1100042823, RESELLER, 07bcf65f187117b4
|
||||
mobilefuse.com, 3719, RESELLER, 71e88b065d69c021
|
||||
conversantmedia.com, 100269, RESELLER, 03113cd04947736d
|
||||
outbrain.com, 002d7f7ba0bd74452f2b155d0dfb5cd6c8, RESELLER
|
||||
yahoo.com, 58935, RESELLER, e1a5b5b6e3255540
|
||||
inmobi.com, f58140d7af1a4fcb83deb5b1c76f0c04, RESELLER, 83e75a7ae333ca9d
|
||||
tpmn.io, 472, RESELLER
|
||||
seedtag.com, 619f620afe426c0700a5c30d, DIRECT
|
||||
seedtag.com, 61a78375e0fb8f0800ec50fb, DIRECT
|
||||
seedtag.com, 61a783c8517244070096f118, DIRECT
|
||||
seedtag.com, 61a783f0e0fb8f0800ec50fc, DIRECT
|
||||
seedtag.com, 61a7804cfe829e0700f0db81, DIRECT
|
||||
seedtag.com, 61a7849ac342880700fc6da2, DIRECT
|
||||
seedtag.com, 61a784f8fe829e0700f0dbba, DIRECT
|
||||
seedtag.com, 61a78466517244070096f119, DIRECT
|
||||
seedtag.com, 61a78446c342880700fc6da1, DIRECT
|
||||
pubmatic.com, 157743, DIRECT, 5d62403b186f2ace
|
||||
spotxchange.com, 249286, DIRECT, 7842df1d2fe2db34
|
||||
spotx.tv, 249286, DIRECT, 7842df1d2fe2db34
|
||||
rubiconproject.com, 17280, DIRECT, 0bfd66d529a55807
|
||||
33across.com, 0010b00002mpthcaaz, DIRECT, bbea06d9c4d2853c
|
||||
indexexchange.com, 191730, RESELLER
|
||||
improvedigital.com, 1680, RESELLER
|
||||
smartadserver.com, 3050, DIRECT
|
||||
contextweb.com, 560288, DIRECT, 89ff185a4c4e857c
|
||||
openx.com, 537149888, DIRECT, 6a698e2ec38604c6
|
||||
districtm.io, 101760, DIRECT, 3fd707be9c4527c3
|
||||
xandr.com, 4009, DIRECT
|
||||
richaudience.com, ns9qrkjlkd, DIRECT
|
||||
aerserv.com, 2750, DIRECT, 2ce496b9f80eb9fa
|
||||
aolcloud.net, 4687, DIRECT
|
||||
mobfox.com, 74240, DIRECT
|
||||
openx.com, 539625136, DIRECT
|
||||
smaato.com, 1100037086, DIRECT
|
||||
adyoulike.com, 83d15ef72d387a1e60e5a1399a2b0c03, DIRECT
|
||||
yahoo.com, 58578, DIRECT, e1a5b5b6e3255540
|
||||
aol.com, 58578, DIRECT, e1a5b5b6e3255540
|
||||
advertising.com, 29034, DIRECT
|
||||
adform.com, 1889, RESELLER, 9f5210a2f0999e32
|
||||
condigolabs.com, c6blkn6kv5dumh3tsfj0, RESELLER
|
||||
themoneytizer.com, 21982, DIRECT
|
||||
outbrain.com, 005e8b586f4258831a0bdd4ca00ecf9823, DIRECT
|
||||
onetag.com, 59817ac704fe3e8, DIRECT
|
||||
amxrtb.com, 105199400, DIRECT
|
||||
adtarget.com.tr, 682499, DIRECT
|
||||
improvedigital.com, 912, DIRECT
|
||||
emxdgt.com, 1701, DIRECT, 1e1d41537f7cad7f
|
||||
smartadserver.com, 4253, RESELLER
|
||||
sovrn.com, 374814, RESELLER, fafdf38b16bf6b2b
|
||||
lijit.com, 374814, RESELLER, fafdf38b16bf6b2b
|
||||
lijit.com, 374814-eb, RESELLER, fafdf38b16bf6b2b
|
||||
adyoulike.com, e102ab4faade732565927e57d62d6b8b, RESELLER
|
||||
rubiconproject.com, 24364, RESELLER, 0bfd66d529a55807
|
||||
criteo.com, B-067384, RESELLER, 9fac4a4a87c2a44f
|
||||
themediagrid.com, IRK975, RESELLER, 35d5010d7789b49d
|
||||
rhythmone.com, 6694405583287859332,RESELLER,a670c89d4a324e47
|
||||
video.unrulymedia.com, 6694405583287859332, RESELLER
|
||||
pubmatic.com, 161409, RESELLER, 5d62403b186f2ace
|
||||
openx.com, 545730280, RESELLER, 6a698e2ec38604c6
|
||||
onetag.com, 75753f1ebcc343c-OB, RESELLER
|
||||
# End of ads.plus
|
||||
|
||||
# Pixfuture
|
||||
|
||||
@@ -27,7 +27,6 @@
|
||||
(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
|
||||
<input type="radio" id="style_snowstorm" name="style"><label for="style_snowstorm">Snowstorm Style</label>
|
||||
(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
|
||||
<input type="radio" id="style_deepsea" name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
|
||||
<input type="radio" id="style_skeuos" name="style"><label for="style_skeuos">Skeuos Style</label>
|
||||
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)<br/>
|
||||
<!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>-->
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<style>
|
||||
.specs {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--layer_2_color_border);
|
||||
border-bottom: 1px solid var(--separator);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -8,13 +8,11 @@
|
||||
{{ define "user_style_js" }}
|
||||
<script>
|
||||
window.style = {
|
||||
textColor: "{{.Style.Text.RGB}}",
|
||||
inputColor: "{{.Style.Input.RGB}}",
|
||||
inputTextColor: "{{.Style.InputText.RGB}}",
|
||||
bodyTextColor: "{{.Style.BodyText.RGB}}",
|
||||
highlightColor: "{{.Style.Highlight.RGB}}",
|
||||
dangerColor: "{{.Style.Danger.RGB}}",
|
||||
layer2Color: "{{.Style.Layer2.RGB}}",
|
||||
layer3Color: "{{.Style.Layer3.RGB}}",
|
||||
bodyColor: "{{.Style.BodyColor.RGB}}",
|
||||
separatorColor: "{{.Style.Separator.RGB}}",
|
||||
chart1Color: "{{.Style.Chart1.RGB}}",
|
||||
chart2Color: "{{.Style.Chart2.RGB}}",
|
||||
chart3Color: "{{.Style.Chart3.RGB}}",
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: var(--layer_1_text_color);
|
||||
color: var(--background_text_color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -119,7 +119,7 @@ let set_status = async (action, report_type) => {
|
||||
.stats {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 4px;
|
||||
border-left: 1px solid var(--layer_3_color_border);
|
||||
border-left: 1px solid var(--separator);
|
||||
text-align: center;
|
||||
}
|
||||
.details {
|
||||
|
||||
@@ -221,7 +221,7 @@ onMount(get_bans);
|
||||
.stats {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 4px;
|
||||
border-left: 1px solid var(--layer_3_color_border);
|
||||
border-left: 1px solid var(--separator);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,46 +34,46 @@ onMount(() => {
|
||||
href="/admin"
|
||||
class:button_highlight={page === "status"}
|
||||
on:click|preventDefault={() => {navigate("status", "Status")}}>
|
||||
<i class="icon">home</i>
|
||||
<i class="icon">home</i><br/>
|
||||
Status
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/admin/block_files"
|
||||
class:button_highlight={page === "block_files"}
|
||||
on:click|preventDefault={() => {navigate("block_files", "Block files")}}>
|
||||
<i class="icon">block</i>
|
||||
<i class="icon">block</i><br/>
|
||||
Block files
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/admin/abuse_reports"
|
||||
class:button_highlight={page === "abuse_reports"}
|
||||
on:click|preventDefault={() => {navigate("abuse_reports", "Abuse reports")}}>
|
||||
<i class="icon">flag</i>
|
||||
<i class="icon">flag</i><br/>
|
||||
User reports
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/admin/abuse_reporters"
|
||||
class:button_highlight={page === "abuse_reporters"}
|
||||
on:click|preventDefault={() => {navigate("abuse_reporters", "Abuse reporters")}}>
|
||||
<i class="icon">email</i>
|
||||
<i class="icon">email</i><br/>
|
||||
E-mail reporters
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/admin/ip_bans"
|
||||
class:button_highlight={page === "ip_bans"}
|
||||
on:click|preventDefault={() => {navigate("ip_bans", "IP bans")}}>
|
||||
<i class="icon">remove_circle</i>
|
||||
<i class="icon">remove_circle</i><br/>
|
||||
IP bans
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/admin/subscriptions"
|
||||
class:button_highlight={page === "subscriptions"}
|
||||
on:click|preventDefault={() => {navigate("subscriptions", "Subscriptions")}}>
|
||||
<i class="icon">receipt_long</i>
|
||||
<i class="icon">receipt_long</i><br/>
|
||||
Subscriptions
|
||||
</a>
|
||||
<a class="button" href="/admin/globals">
|
||||
<i class="icon">edit</i>
|
||||
<i class="icon">edit</i><br/>
|
||||
Global settings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -114,7 +114,7 @@ head.valueimpression_loaded.subscribe(v => {
|
||||
{:else if ad_type === "aads"}
|
||||
<iframe bind:this={banner} class="banner"
|
||||
data-aa="73974"
|
||||
src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
|
||||
src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
|
||||
style="width:728px; height:90px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
|
||||
title="A-ads advertisement">
|
||||
</iframe>
|
||||
|
||||
@@ -91,7 +91,7 @@ head.valueimpression_loaded.subscribe(v => {
|
||||
{#if ad_type === "aads"}
|
||||
<iframe
|
||||
data-aa="1811738"
|
||||
src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.layer2Color}&text_color={window.style.textColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
|
||||
src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
|
||||
style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
|
||||
title="A-ads advertisement">
|
||||
</iframe>
|
||||
|
||||
@@ -11,7 +11,7 @@ export let border_top = false;
|
||||
|
||||
<style>
|
||||
.border_top {
|
||||
border-top: solid 1px var(--layer_2_color_border);
|
||||
border-top: solid 1px var(--separator);
|
||||
}
|
||||
.image {
|
||||
display: block;
|
||||
|
||||
@@ -709,7 +709,7 @@ const keyboard_event = evt => {
|
||||
transition: left 0.5s, right 0.5s;
|
||||
overflow: auto;
|
||||
text-align: center;
|
||||
box-shadow: inset 1px 1px 8px var(--shadow_color);
|
||||
box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
|
||||
border-radius: 16px;
|
||||
}
|
||||
.file_preview.toolbar_visible { left: 8em; }
|
||||
@@ -717,7 +717,6 @@ const keyboard_event = evt => {
|
||||
.file_preview.custom_background {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: var(--layer_1_color);
|
||||
}
|
||||
|
||||
/* Toolbars */
|
||||
|
||||
@@ -177,8 +177,8 @@ const drop = (e, index) => {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 2px 8px 0 var(--shadow_color);
|
||||
background-color: var(--layer_3_color);
|
||||
box-shadow: 1px 1px 4px -1px var(--shadow_color);
|
||||
background-color: var(--input_background);
|
||||
word-break: break-all;
|
||||
text-align: center;
|
||||
line-height: 1.2em;
|
||||
@@ -186,7 +186,7 @@ const drop = (e, index) => {
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
vertical-align: top;
|
||||
color: var(--text_color);
|
||||
color: var(--body_text_color);
|
||||
}
|
||||
.file:hover, .highlight {
|
||||
box-shadow: 0 0 2px 2px var(--highlight_color);
|
||||
@@ -201,9 +201,12 @@ const drop = (e, index) => {
|
||||
text-align: left;
|
||||
}
|
||||
.icon_container.editing {
|
||||
box-shadow: inset 0 60px 40px -40px var(--shadow_color);
|
||||
box-shadow: inset 0 60px 40px -20px var(--body_color);
|
||||
}
|
||||
.icon_container > i:hover {
|
||||
.icon_container > .icon {
|
||||
color: var(--body_text_color);
|
||||
}
|
||||
.icon_container > .icon:hover {
|
||||
color: var(--highlight_color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ onMount(() => {
|
||||
max-width: 80%;
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
background-color: var(--layer_4_color);
|
||||
background-color: var(--popout_color);
|
||||
box-shadow: 2px 2px 16px var(--shadow_color);
|
||||
border-radius: 20px;
|
||||
z-index: 50;
|
||||
@@ -68,7 +68,7 @@ onMount(() => {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: -15px;
|
||||
border-bottom: 15px solid var(--layer_4_color);
|
||||
border-bottom: 15px solid var(--popout_color);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
}
|
||||
|
||||
@@ -96,7 +96,7 @@ export const set_item = idx => {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--layer_2_color_border);
|
||||
border-top: 1px solid var(--separator);
|
||||
text-align: center;
|
||||
line-height: 1em;
|
||||
|
||||
|
||||
@@ -160,7 +160,7 @@ let submit = async e => {
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
border-bottom: 1px var(--layer_2_color_border) solid;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.spinner_container {
|
||||
|
||||
@@ -70,8 +70,7 @@ const share_tumblr = () => {
|
||||
top: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
box-shadow: inset 1px 1px 5px var(--shadow_color);
|
||||
background-color: var(--layer_1_color);
|
||||
background: var(--shaded_background);
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -103,7 +103,9 @@ const code = async file => {
|
||||
|
||||
<style>
|
||||
.container {
|
||||
background: var(--layer_2_color);
|
||||
background: var(--body_color);
|
||||
border: 2px solid var(--separator);
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
height: 100%;
|
||||
|
||||
@@ -191,7 +191,7 @@ h1 {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--layer_1_color);
|
||||
background-color: var(--shaded_background);
|
||||
box-shadow: 1px 1px 6px var(--shadow_color);
|
||||
padding: 0 2px 2px 2px;
|
||||
align-items: center;
|
||||
|
||||
@@ -289,12 +289,12 @@ const share = () => {
|
||||
{#each state.parents as parent}
|
||||
<a
|
||||
href={state.path_root+parent.path}
|
||||
class="breadcrumb breadcrumb_button"
|
||||
class="breadcrumb button"
|
||||
on:click|preventDefault={() => {navigate(parent.path, true)}}>
|
||||
{parent.name}
|
||||
</a> /
|
||||
{/each}
|
||||
<div class="breadcrumb breadcrumb_last">{state.base.name}</div>
|
||||
<div class="breadcrumb button button_highlight">{state.base.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_navigator"></div>
|
||||
@@ -397,7 +397,7 @@ const share = () => {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
background-color: var(--layer_2_color);
|
||||
background: var(--body_background);
|
||||
}
|
||||
|
||||
/* Headerbar (row 1) */
|
||||
@@ -437,26 +437,10 @@ const share = () => {
|
||||
border-radius: 1em;
|
||||
min-width: 1em;
|
||||
text-align: center;
|
||||
line-height: 1.2em;
|
||||
padding: 3px 8px;
|
||||
padding: 4px 8px;
|
||||
margin: 2px 6px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.breadcrumb_button {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: var(--text_color);
|
||||
background-color: var(--layer_3_color);
|
||||
transition: 0.2s background-color, 0.2s color;
|
||||
}
|
||||
.breadcrumb_button:hover, .breadcrumb_button:focus, .breadcrumb_button:active {
|
||||
color: var(--input_text_color);
|
||||
background-color: var(--input_color);
|
||||
}
|
||||
.breadcrumb_last {
|
||||
color: var(--highlight_text_color);
|
||||
background-color: var(--highlight_color);
|
||||
}
|
||||
|
||||
.button_home::after {
|
||||
content: "pixeldrain";
|
||||
@@ -526,7 +510,6 @@ const share = () => {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
transition: left 0.5s;
|
||||
background-color: var(--layer_2_color);
|
||||
}
|
||||
.toolbar.toolbar_visible { left: 0; }
|
||||
.file_viewer > .file_viewer_window > .file_viewer_file_preview.toolbar_visible { left: 8em; }
|
||||
|
||||
@@ -72,8 +72,7 @@ const share_tumblr = () => {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
float: left;
|
||||
background-color: var(--layer_1_color);
|
||||
box-shadow: inset 1px 1px 5px var(--shadow_color);
|
||||
background: var(--shaded_background);
|
||||
text-align: center;
|
||||
z-index: 48;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -188,6 +188,8 @@ const toggle_select = () => {
|
||||
margin: 16px 0 0 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
background: var(--shaded_background);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.toolbar > * { flex: 0 0 auto; }
|
||||
.toolbar_spacer { flex: 1 1 auto; }
|
||||
|
||||
@@ -200,7 +200,7 @@ const paste = (e) => {
|
||||
width: 100%;
|
||||
margin: 6px 0 0 0;
|
||||
padding: 0;
|
||||
background-color: var(--layer_2_color);
|
||||
background: var(--body_color);
|
||||
box-shadow: 1px 1px 5px var(--shadow_color);
|
||||
}
|
||||
|
||||
|
||||
@@ -75,14 +75,14 @@ const node_icon = node => {
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 6px 0 var(--shadow_color);
|
||||
background-color: var(--layer_3_color);
|
||||
background: var(--input_background);
|
||||
text-align: center;
|
||||
line-height: 1.2em;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
vertical-align: top;
|
||||
color: var(--text_color);
|
||||
color: var(--body_text_color);
|
||||
}
|
||||
.file:hover {
|
||||
box-shadow: 0 0 2px 2px var(--highlight_color);
|
||||
|
||||
@@ -76,7 +76,7 @@ const node_icon = node => {
|
||||
overflow: hidden;
|
||||
margin: 8px auto 16px auto;
|
||||
text-align: left;
|
||||
background-color: var(--layer_2_color);
|
||||
background: var(--body_color);
|
||||
box-shadow: 1px 1px 6px var(--shadow_color);
|
||||
border-collapse: collapse;
|
||||
border-radius: 8px;
|
||||
@@ -97,11 +97,11 @@ const node_icon = node => {
|
||||
padding: 6px;
|
||||
}
|
||||
.node:not(:last-child) {
|
||||
border-bottom: 1px solid var(--layer_2_color_border);
|
||||
border-bottom: 1px solid var(--separator);
|
||||
}
|
||||
.node:hover:not(.node_selected) {
|
||||
background-color: var(--input_color_dark);
|
||||
color: var(--input_text_color);
|
||||
background: var(--input_background);
|
||||
color: var(--input_text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.node.node_selected {
|
||||
|
||||
@@ -279,16 +279,14 @@ onMount(() => {
|
||||
.feat_table > div > .feat_label {
|
||||
border-top-left-radius: 0.5em;
|
||||
border-bottom-left-radius: 0.5em;
|
||||
background-color: var(--layer_1_color);
|
||||
color: var(--layer_1_text_color);
|
||||
background: var(--shaded_background);
|
||||
}
|
||||
.feat_table > div > .feat_normal {
|
||||
background-color: var(--layer_3_color);
|
||||
box-shadow: 1px 1px 4px -2px var(--shadow_color);
|
||||
background-color: var(--popout_color);
|
||||
}
|
||||
.feat_table > div > .feat_pro {
|
||||
background-color: var(--layer_4_color);
|
||||
box-shadow: 1px 1px 4px -1px var(--shadow_color);
|
||||
background-color: var(--popout_color);
|
||||
box-shadow: 1px 1px 2px -1px var(--shadow_color);
|
||||
}
|
||||
.feat_table > div > .feat_highlight {
|
||||
border: 1px solid var(--link_color)
|
||||
|
||||
@@ -199,8 +199,8 @@
|
||||
hyphens: auto;
|
||||
}
|
||||
.feat_table > div > .feat_pro {
|
||||
background-color: var(--layer_4_color);
|
||||
box-shadow: 1px 1px 4px -1px var(--shadow_color);
|
||||
background-color: var(--popout_color);
|
||||
box-shadow: 1px 1px 2px -1px var(--shadow_color);
|
||||
}
|
||||
.text_highlight {
|
||||
color: var(--link_color);
|
||||
|
||||
@@ -53,7 +53,6 @@ const on_success = (resp) => {
|
||||
href = "/u/"+resp.id
|
||||
target = "_blank"
|
||||
|
||||
file_button.style.background = 'var(--layer_3_color)'
|
||||
progress_bar.style.width = "100%"
|
||||
progress_bar.style.opacity = "0"
|
||||
}
|
||||
@@ -222,9 +221,8 @@ export const start = () => {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 2px 8px -3px var(--shadow_color);
|
||||
background-color: var(--layer_3_color);
|
||||
color: var(--text_color);
|
||||
background: var(--input_background);
|
||||
color: var(--body_text_color);
|
||||
word-break: break-all;
|
||||
text-align: left;
|
||||
line-height: 1.2em;
|
||||
@@ -277,7 +275,7 @@ export const start = () => {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 1.4em;
|
||||
border-top: 1px solid var(--layer_3_color_border);
|
||||
border-top: 1px solid var(--separator);
|
||||
text-align: center;
|
||||
font-family: sans-serif, monospace;
|
||||
font-size: 0.9em;
|
||||
|
||||
@@ -566,8 +566,8 @@ const keydown = (e) => {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.instruction {
|
||||
border-top: 1px solid var(--layer_2_color_border);
|
||||
border-bottom: 1px solid var(--layer_2_color_border);
|
||||
border-top: 1px solid var(--separator);
|
||||
border-bottom: 1px solid var(--separator);
|
||||
margin: 1.5em 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
@@ -120,8 +120,8 @@ const keydown = e => {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 4px;
|
||||
background-color: var(--layer_1_color);
|
||||
color: var(--layer_1_text_color);
|
||||
background: var(--background_color);
|
||||
color: var(--background_text_color);
|
||||
}
|
||||
.headerbar > * {
|
||||
flex: 0 0 auto;
|
||||
@@ -140,7 +140,7 @@ const keydown = e => {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--body_background);
|
||||
color: var(--text_color);
|
||||
color: var(--body_text_color);
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
@@ -361,7 +361,7 @@ const node_click = (index) => {
|
||||
display: inline-block;
|
||||
margin: 4px 10px;
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid var(--input_color);
|
||||
border-bottom: 1px solid var(--separator);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -391,7 +391,7 @@ const node_click = (index) => {
|
||||
|
||||
#footer {
|
||||
flex-shrink: 0;
|
||||
color: var(--layer_1_text_color);
|
||||
color: var(--background_text_color);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
@@ -407,12 +407,12 @@ const node_click = (index) => {
|
||||
control over the size.
|
||||
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
|
||||
margin: 0;
|
||||
color: var(--text_color);
|
||||
color: var(--body_text_color);
|
||||
text-decoration: none;
|
||||
}
|
||||
.node:hover:not(.node_selected) {
|
||||
background-color: var(--input_color_dark);
|
||||
color: var(--input_text_color);
|
||||
background: var(--input_background);
|
||||
color: var(--input_text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.node_selected {
|
||||
|
||||
@@ -42,42 +42,42 @@ onMount(() => {
|
||||
href="/user"
|
||||
class:button_highlight={page === "home"}
|
||||
on:click|preventDefault={() => {navigate("home", "My home")}}>
|
||||
<i class="icon">home</i>
|
||||
<i class="icon">home</i><br/>
|
||||
My home
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/user/settings"
|
||||
class:button_highlight={page === "settings"}
|
||||
on:click|preventDefault={() => {navigate("settings", "Settings")}}>
|
||||
<i class="icon">settings</i>
|
||||
<i class="icon">settings</i><br/>
|
||||
Settings
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/user/connect_app"
|
||||
class:button_highlight={page === "connect_app"}
|
||||
on:click|preventDefault={() => {navigate("connect_app", "Apps")}}>
|
||||
<i class="icon">app_registration</i>
|
||||
<i class="icon">app_registration</i><br/>
|
||||
Apps
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/user/api_keys"
|
||||
class:button_highlight={page === "api_keys"}
|
||||
on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
|
||||
<i class="icon">vpn_key</i>
|
||||
<i class="icon">vpn_key</i><br/>
|
||||
Keys
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/user/activity"
|
||||
class:button_highlight={page === "activity"}
|
||||
on:click|preventDefault={() => {navigate("activity", "Activity log")}}>
|
||||
<i class="icon">list</i>
|
||||
<i class="icon">list</i><br/>
|
||||
Activity log
|
||||
</a>
|
||||
<a class="button"
|
||||
href="/user/subscription"
|
||||
class:button_highlight={page === "subscription"}
|
||||
on:click|preventDefault={() => {navigate("subscription", "Subscription")}}>
|
||||
<i class="icon">shopping_cart</i>
|
||||
<i class="icon">shopping_cart</i><br/>
|
||||
Subscription
|
||||
</a>
|
||||
{#if window.user.subscription.type !== "patreon"}
|
||||
@@ -85,7 +85,7 @@ onMount(() => {
|
||||
href="/user/transactions"
|
||||
class:button_highlight={page === "transactions"}
|
||||
on:click|preventDefault={() => {navigate("transactions", "Transactions")}}>
|
||||
<i class="icon">receipt_long</i>
|
||||
<i class="icon">receipt_long</i><br/>
|
||||
Transactions
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
@@ -122,7 +122,7 @@ onMount(load_tranfer_used)
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="feat_normal round_tr">
|
||||
<div class="feat_normal round_tr" class:feat_highlight={subscription === "prepaid"}>
|
||||
<ul>
|
||||
<li>Base price of €1 per month</li>
|
||||
<li>€4 per TB per month for storage</li>
|
||||
@@ -269,15 +269,11 @@ onMount(load_tranfer_used)
|
||||
.feat_table > div > .feat_label {
|
||||
border-top-left-radius: 0.5em;
|
||||
border-bottom-left-radius: 0.5em;
|
||||
background-color: var(--layer_1_color);
|
||||
background: var(--shaded_background);
|
||||
font-size: 1.1em;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 3px #000000;
|
||||
}
|
||||
.feat_table > div > .feat_normal {
|
||||
background-color: var(--layer_3_color);
|
||||
box-shadow: 1px 1px 3px -1px var(--shadow_color);
|
||||
text-shadow: 1px 1px 3px var(--shadow_color);
|
||||
background: var(--popout_color);
|
||||
}
|
||||
.feat_table > div > .feat_highlight {
|
||||
border: 1px solid var(--highlight_color)
|
||||
|
||||
@@ -38,7 +38,7 @@ export const update = () => {
|
||||
return chart_object.update()
|
||||
}
|
||||
|
||||
Chart.defaults.color = "#"+window.style.textColor;
|
||||
Chart.defaults.color = "#"+window.style.bodyTextColor;
|
||||
Chart.defaults.font.size = 15;
|
||||
Chart.defaults.font.family = "system-ui, sans-serif";
|
||||
Chart.defaults.maintainAspectRatio = false;
|
||||
@@ -91,7 +91,7 @@ onMount(() => {
|
||||
grid: {
|
||||
display: true,
|
||||
drawBorder: false,
|
||||
color: "#"+window.style.layer3Color,
|
||||
color: "#"+window.style.separatorColor,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
|
||||
@@ -5,7 +5,7 @@ export let precision = 2
|
||||
|
||||
<span>
|
||||
€
|
||||
<span class:red={amount < 0} class:green={amount > 0} class:zero={amount === 0}>
|
||||
<span class:red={amount < 0} class:green={amount > 0}>
|
||||
{(amount / 1000000).toFixed(precision)}
|
||||
</span>
|
||||
</span>
|
||||
@@ -17,7 +17,4 @@ export let precision = 2
|
||||
.green {
|
||||
color: var(--highlight_color);
|
||||
}
|
||||
.zero {
|
||||
color: var(--layer_4_color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,7 +41,7 @@ export let highlight = false
|
||||
<style>
|
||||
.expandable {
|
||||
text-decoration: none;
|
||||
background-color: var(--layer_3_color);
|
||||
background-color: var(--popout_color);
|
||||
margin: 0.6em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
@@ -49,11 +49,11 @@ export let highlight = false
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--text_color);
|
||||
color: var(--body_text_color);
|
||||
}
|
||||
.click_expand:hover, .highlight:hover {
|
||||
background-color: var(--input_color_dark);
|
||||
color: var(--input_text_color);
|
||||
background: var(--input_background);
|
||||
color: var(--input_text);
|
||||
}
|
||||
.click_expand {
|
||||
cursor: pointer;
|
||||
@@ -72,8 +72,7 @@ export let highlight = false
|
||||
padding: 0.4em;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid var(--layer_3_color_border);
|
||||
color: var(--text_color);
|
||||
border-top: 1px solid var(--separator);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
|
||||
@@ -79,7 +79,7 @@ const keydown = e => {
|
||||
z-index: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--layer_2_color);
|
||||
background: var(--body_color);
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
@@ -97,8 +97,8 @@ const keydown = e => {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1px;
|
||||
background-color: var(--layer_1_color);
|
||||
color: var(--layer_1_text_color);
|
||||
background: var(--background_color);
|
||||
color: var(--background_text_color);
|
||||
}
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
|
||||
@@ -24,13 +24,13 @@ $: {
|
||||
<style>
|
||||
.progress_bar_outer {
|
||||
display: block;
|
||||
background-color: var(--layer_1_color);
|
||||
background: var(--background_color);
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 6px 0 12px 0;
|
||||
}
|
||||
.progress_bar_inner {
|
||||
background-color: var(--highlight_color);
|
||||
background: var(--highlight_background);
|
||||
height: 100%;
|
||||
width: 0;
|
||||
transition: width 1s;
|
||||
|
||||
@@ -38,9 +38,6 @@ let set = s => {
|
||||
<button class:button_highlight={theme==="snowstorm"} on:click={() => {set("snowstorm")}}>
|
||||
Snowstorm
|
||||
</button>
|
||||
<button class:button_highlight={theme==="deepsea"} on:click={() => {set("deepsea")}}>
|
||||
Deep sea
|
||||
</button>
|
||||
<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
|
||||
Skeuos
|
||||
</button>
|
||||
|
||||
@@ -29,16 +29,12 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
|
||||
s = pixeldrainClassicStyle
|
||||
case "solarized_dark":
|
||||
s = solarizedDarkStyle
|
||||
case "sunny":
|
||||
s = sunnyPixeldrainStyle
|
||||
case "maroon":
|
||||
s = maroonStyle
|
||||
case "hacker":
|
||||
s = hackerStyle
|
||||
case "canta":
|
||||
s = cantaPixeldrainStyle
|
||||
case "deepsea":
|
||||
s = deepseaPixeldrainStyle
|
||||
case "skeuos":
|
||||
s = skeuosPixeldrainStyle
|
||||
case "nord":
|
||||
@@ -66,48 +62,50 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
|
||||
}
|
||||
}
|
||||
setDefaultHSL(&s.Link, s.Highlight.Add(0, 0, -.05))
|
||||
setDefaultHSL(&s.InputDisabled, s.Input.Add(0, -.2, -.2))
|
||||
setDefaultHSL(&s.ScrollbarForeground, s.Input)
|
||||
setDefaultHSL(&s.ScrollbarHover, s.ScrollbarForeground.Add(0, 0, .1))
|
||||
setDefaultHSL(&s.Layer1Text, s.Text)
|
||||
setDefaultColor(&s.ScrollbarBackground, s.BodyColor)
|
||||
setDefaultColor(&s.ScrollbarForeground, s.Input)
|
||||
setDefaultColor(&s.ScrollbarHover, s.Highlight)
|
||||
setDefaultHSL(&s.Chart1, s.Highlight)
|
||||
setDefaultHSL(&s.Chart2, s.Chart1.Add(120, 0, 0))
|
||||
setDefaultHSL(&s.Chart3, s.Chart2.Add(120, 0, 0))
|
||||
setDefaultColor(&s.HighlightBackground, Gradient{180, []Color{s.Highlight, s.Highlight.Add(0, 0, -0.03)}})
|
||||
setDefaultColor(&s.Background, s.Layer1)
|
||||
setDefaultColor(&s.BackgroundPattern, s.Layer1)
|
||||
setDefaultColor(&s.ParallaxSlider, s.Layer1)
|
||||
setDefaultColor(&s.Background, s.BackgroundColor)
|
||||
setDefaultColor(&s.BackgroundPattern, s.BackgroundColor)
|
||||
setDefaultColor(&s.ParallaxSlider, s.BackgroundColor)
|
||||
setDefaultColor(&s.Navigation, NoColor)
|
||||
setDefaultColor(&s.Body, s.Layer2)
|
||||
setDefaultColor(&s.BodyBackground, s.BodyColor)
|
||||
setDefaultHSL(&s.BackgroundText, s.BodyText)
|
||||
setDefaultColor(&s.Separator, s.BodyColor.Add(0, 0, .05))
|
||||
setDefaultColor(&s.Shaded, RGBA{0, 0, 0, 0.2})
|
||||
|
||||
return s
|
||||
}
|
||||
|
||||
type pixeldrainStyleSheet struct {
|
||||
Text hsl
|
||||
Link hsl // Based on Highlight if undefined
|
||||
Input hsl // Buttons, text fields
|
||||
InputText hsl
|
||||
InputDisabled hsl
|
||||
Input Color
|
||||
InputText Color
|
||||
InputDisabledText Color
|
||||
HighlightBackground Color
|
||||
Highlight hsl // Links, highlighted buttons, list navigation
|
||||
HighlightText hsl // Text on buttons
|
||||
Danger hsl
|
||||
ScrollbarForeground hsl // Based on Highlight if undefined
|
||||
ScrollbarHover hsl // Based on ScrollbarForeground if undefined
|
||||
ScrollbarBackground Color
|
||||
ScrollbarForeground Color // Based on Highlight if undefined
|
||||
ScrollbarHover Color // Based on ScrollbarForeground if undefined
|
||||
|
||||
BackgroundColor hsl
|
||||
Background Color
|
||||
BackgroundText hsl
|
||||
BackgroundPattern Color
|
||||
ParallaxSlider Color
|
||||
Navigation Color
|
||||
Body Color
|
||||
BodyColor hsl
|
||||
BodyBackground Color
|
||||
BodyText hsl
|
||||
Separator Color
|
||||
Shaded Color
|
||||
Layer1 hsl // Deepest and darkest layer
|
||||
Layer1Text hsl // Based on Text if undefined
|
||||
Layer2 hsl
|
||||
Layer3 hsl
|
||||
Layer4 hsl // Highest and brightest layer
|
||||
PopoutColor hsl
|
||||
|
||||
// Colors to use in graphs
|
||||
Chart1 hsl
|
||||
@@ -121,37 +119,31 @@ type pixeldrainStyleSheet struct {
|
||||
func (s pixeldrainStyleSheet) String() string {
|
||||
return fmt.Sprintf(
|
||||
`:root {
|
||||
--text_color: %s;
|
||||
--link_color: %s;
|
||||
--input_color: %s;
|
||||
--input_color_dark: %s;
|
||||
--input_text_color: %s;
|
||||
--input_disabled_color: %s;
|
||||
--input_background: %s;
|
||||
--input_text: %s;
|
||||
--input_disabled_text: %s;
|
||||
--highlight_background: %s;
|
||||
--highlight_color: %s;
|
||||
--highlight_color_dark: %s;
|
||||
--highlight_text_color: %s;
|
||||
--danger_color: %s;
|
||||
--danger_color_dark: %s;
|
||||
--scrollbar_background_color: %s;
|
||||
--scrollbar_foreground_color: %s;
|
||||
--scrollbar_hover_color: %s;
|
||||
--scrollbar_background_color: %s;
|
||||
|
||||
--background_color: %s;
|
||||
--background: %s;
|
||||
--background_text_color: %s;
|
||||
--background_pattern_color: %s;
|
||||
--parallax_slider_color: %s;
|
||||
--navigation_background: %s;
|
||||
--body_color: %s;
|
||||
--body_background: %s;
|
||||
--body_text_color: %s;
|
||||
--separator: %s;
|
||||
--shaded_background: %s;
|
||||
--layer_1_color: %s;
|
||||
--layer_1_color_border: %s;
|
||||
--layer_1_text_color: %s;
|
||||
--layer_2_color: %s;
|
||||
--layer_2_color_border: %s;
|
||||
--layer_3_color: %s;
|
||||
--layer_3_color_border: %s;
|
||||
--layer_4_color: %s;
|
||||
--layer_4_color_border: %s;
|
||||
--popout_color: %s;
|
||||
|
||||
--chart_1_color: %s;
|
||||
--chart_2_color: %s;
|
||||
@@ -159,36 +151,30 @@ func (s pixeldrainStyleSheet) String() string {
|
||||
|
||||
--shadow_color: %s;
|
||||
}`,
|
||||
s.Text.CSS(),
|
||||
s.Link.CSS(),
|
||||
s.Input.CSS(),
|
||||
s.Input.Add(0, 0, -.02).CSS(),
|
||||
s.InputText.CSS(),
|
||||
s.InputDisabled.CSS(),
|
||||
s.InputDisabledText.CSS(),
|
||||
s.HighlightBackground.CSS(),
|
||||
s.Highlight.CSS(),
|
||||
s.Highlight.Add(0, 0, -.02).CSS(),
|
||||
s.HighlightText.CSS(),
|
||||
s.Danger.CSS(),
|
||||
s.Danger.Add(0, 0, -.02).CSS(),
|
||||
s.ScrollbarBackground.CSS(),
|
||||
s.ScrollbarForeground.CSS(),
|
||||
s.ScrollbarHover.CSS(),
|
||||
s.Layer2.CSS(), // Scrollbar background
|
||||
s.BackgroundColor.CSS(),
|
||||
s.Background.CSS(),
|
||||
s.BackgroundText.CSS(),
|
||||
s.BackgroundPattern.CSS(),
|
||||
s.ParallaxSlider.CSS(),
|
||||
s.Navigation.CSS(),
|
||||
s.Body.CSS(),
|
||||
s.BodyColor.CSS(),
|
||||
s.BodyBackground.CSS(),
|
||||
s.BodyText.CSS(),
|
||||
s.Separator.CSS(),
|
||||
s.Shaded.CSS(),
|
||||
s.Layer1.CSS(),
|
||||
s.Layer1.Add(0, 0, .05).CSS(),
|
||||
s.Layer1Text.CSS(),
|
||||
s.Layer2.CSS(),
|
||||
s.Layer2.Add(0, 0, .05).CSS(),
|
||||
s.Layer3.CSS(),
|
||||
s.Layer3.Add(0, 0, .05).CSS(),
|
||||
s.Layer4.CSS(),
|
||||
s.Layer4.Add(0, 0, .05).CSS(),
|
||||
s.PopoutColor.CSS(),
|
||||
s.Chart1.CSS(),
|
||||
s.Chart2.CSS(),
|
||||
s.Chart3.CSS(),
|
||||
@@ -229,227 +215,192 @@ func (s pixeldrainStyleSheet) BackgroundTiles(tpl *template.Template) template.U
|
||||
// Following are all the available styles
|
||||
|
||||
var defaultPixeldrainStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{0, 0, .8},
|
||||
Input: hsl{266, .85, .38},
|
||||
InputText: hsl{0, 0, 1},
|
||||
Input: hsl{266, .85, .24},
|
||||
InputText: hsl{0, 0, .9},
|
||||
InputDisabledText: hsl{266, .85, .4},
|
||||
HighlightBackground: NewGradient(150, hsl{150, .84, .39}, hsl{85, .85, .35}),
|
||||
Highlight: hsl{117, .63, .46},
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{357, .63, .46},
|
||||
ScrollbarBackground: hsl{274, .9, .14},
|
||||
ScrollbarForeground: hsl{266, .85, .40},
|
||||
ScrollbarHover: hsl{266, .85, .50},
|
||||
|
||||
Background: NewGradient(120, hsl{240, .9, .14}, hsl{274, .9, .14}, hsl{310, .8, .12}),
|
||||
BackgroundColor: hsl{275, .8, .10},
|
||||
Background: NewGradient(120, hsl{250, .9, .14}, hsl{300, .9, .10}),
|
||||
BackgroundPattern: NoColor,
|
||||
ParallaxSlider: hsl{275, .8, .1},
|
||||
Navigation: RGBA{0, 0, 0, 0.1},
|
||||
Body: NoColor,
|
||||
Layer1: hsl{275, .8, .10},
|
||||
Layer2: hsl{275, .75, .12},
|
||||
Layer3: hsl{275, .7, .18},
|
||||
Layer4: hsl{275, .65, .24},
|
||||
BodyColor: hsl{274, .9, .14},
|
||||
BodyBackground: NoColor,
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{275, .8, .18},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var pixeldrainClassicStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{0, 0, .8},
|
||||
Input: hsl{0, 0, .25},
|
||||
InputText: hsl{0, 0, 1},
|
||||
Input: hsl{0, 0, .16},
|
||||
InputText: hsl{0, 0, .9},
|
||||
InputDisabledText: hsl{0, 0, .4},
|
||||
Highlight: hsl{89, .60, .45},
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{339, .65, .31},
|
||||
ScrollbarForeground: hsl{0, 0, .40},
|
||||
ScrollbarHover: hsl{0, 0, .50},
|
||||
|
||||
Layer1: hsl{0, 0, .08},
|
||||
Layer2: hsl{0, 0, .11},
|
||||
Layer3: hsl{0, 0, .15},
|
||||
Layer4: hsl{0, 0, .18},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var sunnyPixeldrainStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{0, 0, .1},
|
||||
Input: hsl{0, 0, .96}, // hsl(0, 0%, 96%)
|
||||
InputText: hsl{0, 0, .1},
|
||||
Highlight: hsl{89, .74, .5}, // hsl(89, 73%, 50%)
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{345, .99, .33}, // hsl(345, 99%, 33%)
|
||||
ScrollbarForeground: hsl{0, 0, .30},
|
||||
ScrollbarHover: hsl{0, 0, .40},
|
||||
|
||||
Layer1: hsl{0, 0, .98}, // hsl(0, 0%, 13%)
|
||||
Layer2: hsl{0, 1, 1},
|
||||
Layer3: hsl{0, 1, 1},
|
||||
Layer4: hsl{0, 1, 1},
|
||||
BackgroundColor: hsl{0, 0, .08},
|
||||
BodyColor: hsl{0, 0, .11},
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{0, 0, .18},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var solarizedDarkStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{0, 0, .75},
|
||||
Input: hsl{192, .95, .25},
|
||||
InputText: hsl{0, 0, 1},
|
||||
InputDisabledText: hsl{0, 0, .5},
|
||||
Highlight: hsl{145, .63, .42},
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{343, .63, .42},
|
||||
ScrollbarForeground: hsl{192, .95, .30},
|
||||
ScrollbarHover: hsl{192, .95, .40},
|
||||
|
||||
Layer1: hsl{192, .87, .09},
|
||||
Layer2: hsl{192, .81, .14},
|
||||
Layer3: hsl{192, .95, .17},
|
||||
Layer4: hsl{192, .99, .19},
|
||||
BackgroundColor: hsl{192, .87, .09},
|
||||
BodyColor: hsl{192, .81, .14},
|
||||
BodyText: hsl{0, 0, .75},
|
||||
PopoutColor: hsl{192, .95, .17},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var maroonStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{0, 0, .8},
|
||||
Input: hsl{0, .87, .40}, // hsl(0, 87%, 40%)
|
||||
Input: hsl{0, .8, .20}, // hsl(0, 87%, 40%)
|
||||
InputText: hsl{0, 0, 1},
|
||||
InputDisabledText: hsl{0, 0, .5},
|
||||
Highlight: hsl{137, 1, .37}, //hsl(137, 100%, 37%)
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{9, .96, .42}, //hsl(9, 96%, 42%)
|
||||
ScrollbarForeground: hsl{0, .75, .3},
|
||||
ScrollbarHover: hsl{0, .75, .4},
|
||||
|
||||
Layer1: hsl{0, .7, .05},
|
||||
Layer2: hsl{0, .8, .08}, // hsl{0, .8, .15},
|
||||
Layer3: hsl{0, .9, .14},
|
||||
Layer4: hsl{0, .9, .20},
|
||||
BackgroundColor: hsl{0, .7, .05},
|
||||
BodyColor: hsl{0, .8, .08}, // hsl{0, .8, .15},
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{0, .9, .14},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var hackerStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{0, 0, .8},
|
||||
Input: hsl{120, .5, .1}, // hsl(120, 50%, 10%)
|
||||
Input: hsl{0, 0, .1}, // hsl(120, 50%, 10%)
|
||||
InputText: hsl{0, 0, 1},
|
||||
Highlight: hsl{120, 1, .5},
|
||||
InputDisabledText: hsl{0, 0, .5},
|
||||
Highlight: hsl{120, .8, .5},
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{0, 1, .4},
|
||||
ScrollbarForeground: hsl{120, .5, .25},
|
||||
ScrollbarHover: hsl{120, .5, .35},
|
||||
|
||||
Layer1: hsl{0, 0, 0},
|
||||
Layer2: hsl{0, 0, .03},
|
||||
Layer3: hsl{120, .3, .08},
|
||||
Layer4: hsl{120, .5, .12},
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{0, 0, .03},
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{120, .4, .05},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var cantaPixeldrainStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{0, 0, .8},
|
||||
Input: hsl{167, .06, .30}, // hsl(167, 6%, 30%)
|
||||
InputText: hsl{0, 0, 1},
|
||||
InputDisabledText: hsl{0, 0, .5},
|
||||
Highlight: hsl{165, 1, .40}, // hsl(165, 100%, 40%)
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{40, 1, .5}, // hsl(40, 100%, 50%)
|
||||
ScrollbarForeground: hsl{204, .05, .78}, // hsl(204, 5%, 78%)
|
||||
ScrollbarHover: hsl{204, .05, .88},
|
||||
|
||||
Layer1: hsl{180, .04, .16},
|
||||
Layer2: hsl{168, .05, .21},
|
||||
Layer3: hsl{170, .05, .26},
|
||||
Layer4: hsl{163, .04, .31},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var deepseaPixeldrainStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{0, 0, .7},
|
||||
Input: hsl{41, .58, .47},
|
||||
InputText: hsl{0, 0, 0},
|
||||
Highlight: hsl{5, .77, .55},
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{5, .77, .55},
|
||||
ScrollbarForeground: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
|
||||
ScrollbarHover: hsl{12, .38, .26}, // hsl(12, 38%, 26%)
|
||||
|
||||
Layer1: hsl{160, .27, .05},
|
||||
Layer2: hsl{163, .26, .09}, // hsl(163, 26%, 11%)
|
||||
Layer3: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
|
||||
Layer4: hsl{161, .32, .15},
|
||||
BackgroundColor: hsl{180, .04, .16},
|
||||
BodyColor: hsl{168, .05, .21},
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{170, .05, .26},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var skeuosPixeldrainStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{60, .06, .93}, // hsl(60, 6%, 93%)
|
||||
Input: hsl{226, .15, .23}, //hsl(226, 15%, 23%)
|
||||
InputText: hsl{60, .06, .93},
|
||||
InputDisabledText: hsl{0, 0, .5},
|
||||
Highlight: hsl{282, .65, .54}, // hsl(282, 65%, 54%)
|
||||
HighlightText: hsl{0, 0, 1},
|
||||
Danger: hsl{0, .79, .43}, // hsl(0, 79%, 43%)
|
||||
ScrollbarForeground: hsl{220, .02, .62}, // hsl(220, 2%, 62%)
|
||||
ScrollbarHover: hsl{220, .02, .80},
|
||||
|
||||
Layer1: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
|
||||
Layer2: hsl{229, .14, .16}, // hsl(229, 14%, 16%)
|
||||
Layer3: hsl{225, .14, .17}, // hsl(225, 14%, 17%)
|
||||
Layer4: hsl{226, .14, .18}, // hsl(226, 14%, 18%)
|
||||
BackgroundColor: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
|
||||
BodyColor: hsl{229, .14, .16}, // hsl(229, 14%, 16%)
|
||||
BodyText: hsl{60, .06, .93}, // hsl(60, 6%, 93%)
|
||||
PopoutColor: hsl{225, .14, .17}, // hsl(225, 14%, 17%)
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var nordPixeldrainStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{210, .34, .63},
|
||||
Input: hsl{193, .43, .67},
|
||||
InputText: hsl{180, .19, .23},
|
||||
InputDisabledText: hsl{0, 0, .5},
|
||||
Highlight: hsl{145, .63, .42},
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{354, .42, .56},
|
||||
ScrollbarForeground: hsl{193, .43, .67},
|
||||
ScrollbarHover: hsl{193, .43, .76},
|
||||
|
||||
Layer1: hsl{220, .16, .22},
|
||||
Layer2: hsl{222, .16, .28},
|
||||
Layer3: hsl{220, .17, .32},
|
||||
Layer4: hsl{220, .16, .36},
|
||||
BackgroundColor: hsl{220, .16, .22},
|
||||
BodyColor: hsl{222, .16, .28},
|
||||
BodyText: hsl{210, .34, .63},
|
||||
PopoutColor: hsl{220, .17, .32},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var snowstormPixeldrainStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{220, .16, .36}, // hsl(220, 16%, 36%)
|
||||
Link: hsl{92, .40, .40},
|
||||
Input: hsl{193, .43, .67}, // hsl(193, 43%, 67%)
|
||||
Input: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
|
||||
InputText: hsl{180, .19, .23},
|
||||
Highlight: hsl{92, .28, .65}, // hsl(92, 28%, 65%)
|
||||
InputDisabledText: hsl{180, .05, .63},
|
||||
Highlight: hsl{179, .25, .65}, // hsl(92, 28%, 65%)
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{354, .42, .56},
|
||||
ScrollbarForeground: hsl{193, .43, .67},
|
||||
ScrollbarHover: hsl{193, .43, .76},
|
||||
|
||||
BackgroundColor: hsl{220, .16, .36}, // hsl(220, 16%, 36%)
|
||||
BackgroundText: hsl{219, .28, .88},
|
||||
ParallaxSlider: hsl{220, .17, .20}, // Layer 1 but darker
|
||||
BodyColor: hsl{218, .27, .94},
|
||||
BodyText: hsl{220, .16, .36}, // hsl(220, 16%, 36%)
|
||||
Shaded: RGBA{255, 255, 255, 0.4},
|
||||
Layer1: hsl{220, .17, .32}, // hsl(220, 17%, 32%)
|
||||
Layer1Text: hsl{219, .28, .88},
|
||||
BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
|
||||
Layer2: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
|
||||
Layer3: hsl{218, .27, .92}, // hsl(218, 27%, 92%)
|
||||
Layer4: hsl{218, .27, .94}, // hsl(218, 27%, 94%)
|
||||
PopoutColor: hsl{218, .27, .92}, // hsl(218, 27%, 92%)
|
||||
|
||||
Shadow: hsl{0, .0, .50},
|
||||
Shadow: hsl{220, .16, .36},
|
||||
Light: true,
|
||||
}
|
||||
|
||||
var sweetPixeldrainStyle = pixeldrainStyleSheet{
|
||||
Text: hsl{223, .13, .79}, // hsl(223, 13%, 79%)
|
||||
Input: hsl{214, .26, .20}, // hsl(214, 26%, 12%)
|
||||
InputText: hsl{223, .13, .79},
|
||||
Highlight: hsl{296, .88, .44},
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{356, 1, .64}, // hsl(356, 100%, 64%)
|
||||
Input: hsl{229, .25, .18}, // hsl(229, 25%, 14%)
|
||||
InputText: hsl{223, .13, .79},
|
||||
InputDisabledText: hsl{0, 0, .5},
|
||||
Highlight: hsl{296, .88, .44},
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{356, 1, .64}, // hsl(356, 100%, 64%)
|
||||
|
||||
Layer1: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
|
||||
Layer2: hsl{228, .25, .12}, // hsl(228, 25%, 12%)
|
||||
Layer3: hsl{229, .25, .14}, // hsl(229, 25%, 14%)
|
||||
Layer4: hsl{229, .25, .18},
|
||||
BackgroundColor: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
|
||||
BodyColor: hsl{228, .25, .12}, // hsl(228, 25%, 12%)
|
||||
BodyText: hsl{223, .13, .79}, // hsl(223, 13%, 79%)
|
||||
PopoutColor: hsl{229, .25, .14}, // hsl(229, 25%, 14%)
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user