Make Nord default theme, update solarized
This commit is contained in:
@@ -16,6 +16,7 @@
|
||||
local('MaterialIcons-Regular'),
|
||||
url(/res/misc/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
@@ -31,6 +32,7 @@
|
||||
text-rendering: optimizeLegibility;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon_unicode {
|
||||
font-size: 1.5em;
|
||||
display: inline-block;
|
||||
@@ -39,17 +41,28 @@
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
.icon.small { font-size: 1.2em; }
|
||||
a > svg { vertical-align: middle; }
|
||||
|
||||
.icon.small {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
a>svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Page rendering configuration */
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body {
|
||||
|
||||
html,
|
||||
body {
|
||||
/* This makes sure that no scrollbar shows up when the menu is open on small screens*/
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, sans-serif;
|
||||
@@ -60,22 +73,29 @@ body {
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
}
|
||||
header, footer, .checkers {
|
||||
|
||||
header,
|
||||
footer,
|
||||
.checkers {
|
||||
background-image: url("{{.BackgroundPattern}}");
|
||||
background-color: var(--background_pattern_color);
|
||||
background-repeat: repeat;
|
||||
}
|
||||
header, footer {
|
||||
|
||||
header,
|
||||
footer {
|
||||
box-shadow: inset 1px 1px 4px -1px var(--shadow_color);
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header>h1 {
|
||||
text-shadow: 1px 1px 4px var(--shadow_color);
|
||||
margin-top: 69px;
|
||||
margin-bottom: 69px;
|
||||
}
|
||||
|
||||
footer>.footer_content {
|
||||
background-color: var(--shaded_background);
|
||||
display: inline-block;
|
||||
@@ -99,6 +119,7 @@ footer > .footer_content {
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 90%;
|
||||
}
|
||||
|
||||
.button_toggle_navigation:active {
|
||||
padding: 15px 15px 10px 15px;
|
||||
}
|
||||
@@ -117,6 +138,7 @@ footer > .footer_content {
|
||||
text-align: left;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.page_body {
|
||||
position: relative;
|
||||
right: 0;
|
||||
@@ -125,7 +147,8 @@ footer > .footer_content {
|
||||
margin-left: 17em;
|
||||
min-width: 300px;
|
||||
display: block;
|
||||
text-align: center; /* Center the header and body */
|
||||
text-align: center;
|
||||
/* Center the header and body */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: var(--body_background);
|
||||
@@ -134,16 +157,19 @@ footer > .footer_content {
|
||||
padding: 8px;
|
||||
transition: margin-left 0.5s;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.page_navigation {
|
||||
left: -18em;
|
||||
}
|
||||
|
||||
.page_body {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@@ -169,12 +195,13 @@ section {
|
||||
font-size: 1.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: background-color 0.5s;
|
||||
transition: background 0.2s;
|
||||
border-radius: 24px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page_navigation a:hover {
|
||||
background: var(--input_background);;
|
||||
background: var(--input_background);
|
||||
color: var(--input_text);
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -192,21 +219,26 @@ section {
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.highlight_shaded {
|
||||
background: var(--shaded_background);
|
||||
}
|
||||
|
||||
.highlight_green {
|
||||
background-color: rgba(0, 255, 0, 0.05);
|
||||
border-color: #00D000;
|
||||
}
|
||||
|
||||
.highlight_blue {
|
||||
background-color: rgba(32, 32, 255, 0.2);
|
||||
border-color: #3636FF;
|
||||
}
|
||||
|
||||
.highlight_yellow {
|
||||
background-color: rgba(255, 255, 0, 0.05);
|
||||
border-color: #A0A000;
|
||||
}
|
||||
|
||||
.highlight_red {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border-color: #B00000;
|
||||
@@ -224,7 +256,12 @@ section {
|
||||
|
||||
/* Common elements */
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .light {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1;
|
||||
margin: 0.5em 0;
|
||||
font-weight: lighter;
|
||||
@@ -235,25 +272,31 @@ h1 {
|
||||
font-size: 2.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75em;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.50em;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25em;
|
||||
border-bottom: 1px var(--separator) solid;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.indent {
|
||||
margin: 8px;
|
||||
}
|
||||
@@ -280,23 +323,34 @@ p {
|
||||
max-width: 30em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table:not(.form) {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table_scroll {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table_scroll>table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
tr:not(.form) {border-bottom: 1px var(--separator) solid;}
|
||||
tr > td, tr > th {padding: 0.2em 0.5em;}
|
||||
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 */
|
||||
tr.form>td {
|
||||
float: left;
|
||||
@@ -321,7 +375,6 @@ pre {
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
background: var(--input_background);
|
||||
color: #bfbfbf; /* Fallback */
|
||||
color: var(--body_text_color);
|
||||
word-break: break-all;
|
||||
text-align: left;
|
||||
@@ -334,14 +387,17 @@ pre {
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file_button:hover {
|
||||
text-decoration: none;
|
||||
background: var(--input_hover_background);
|
||||
}
|
||||
|
||||
.file_button_selected {
|
||||
box-shadow: 0 0 3px 2px var(--highlight_color);
|
||||
box-shadow: 0 0 2px 2px var(--highlight_color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.file_button>img {
|
||||
max-height: 100%;
|
||||
max-width: 25%;
|
||||
@@ -349,6 +405,7 @@ pre {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file_button>.file_button_title {
|
||||
color: var(--link_color);
|
||||
}
|
||||
@@ -360,27 +417,51 @@ details {
|
||||
border-bottom: 1px solid;
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
|
||||
details>summary {
|
||||
padding: 2px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
details>summary>.method {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
details>div {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
details.request_get { border-color: #3636ff; background-color: rgba(32, 32, 255, 0.2); }
|
||||
details.request_post { border-color: #00d000; background-color: rgba(0, 255, 0, 0.05); }
|
||||
details.request_delete { border-color: #B00000; background-color: rgba(255, 0, 0, 0.05); }
|
||||
details.request_put { border-color: #B06000; background-color: rgba(255, 128, 0, 0.05); }
|
||||
details.request_patch { border-color: #6000B0; background-color: rgba(128, 0, 255, 0.1); }
|
||||
details.request_get {
|
||||
border-color: #3636ff;
|
||||
background-color: rgba(32, 32, 255, 0.2);
|
||||
}
|
||||
|
||||
details.request_post {
|
||||
border-color: #00d000;
|
||||
background-color: rgba(0, 255, 0, 0.05);
|
||||
}
|
||||
|
||||
details.request_delete {
|
||||
border-color: #B00000;
|
||||
background-color: rgba(255, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
details.request_put {
|
||||
border-color: #B06000;
|
||||
background-color: rgba(255, 128, 0, 0.05);
|
||||
}
|
||||
|
||||
details.request_patch {
|
||||
border-color: #6000B0;
|
||||
background-color: rgba(128, 0, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Form fields */
|
||||
|
||||
.form_input {width: 100%;}
|
||||
.form_input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
button,
|
||||
@@ -400,7 +481,7 @@ select {
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: padding 0.2s, box-shadow 0.2s, background 0.2s;
|
||||
transition: padding 0.1s, box-shadow 0.1s, background 0.1s;
|
||||
|
||||
/* Remove default styles set by the user-agent */
|
||||
outline: 0;
|
||||
@@ -411,6 +492,7 @@ select {
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover,
|
||||
input[type="submit"]:hover,
|
||||
@@ -423,13 +505,12 @@ input[type="submit"]:focus,
|
||||
input[type="button"]:focus,
|
||||
input[type="color"]:focus,
|
||||
select:focus {
|
||||
color: #bfbfbf; /* Fallback */
|
||||
color: var(--input_text);
|
||||
text-decoration: none;
|
||||
/* box-shadow: inset 0 0 3px 0 var(--highlight_color); */
|
||||
background: var(--input_hover_background);
|
||||
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active,
|
||||
input[type="submit"]:active,
|
||||
@@ -440,21 +521,29 @@ select:active {
|
||||
/* Exactly 4px offset compared to the inactive padding to give a depth effect */
|
||||
padding: 9px 1px 1px 9px;
|
||||
}
|
||||
|
||||
.button_highlight {
|
||||
background: var(--highlight_background) !important;
|
||||
color: var(--highlight_text_color) !important;
|
||||
}
|
||||
|
||||
.button_red {
|
||||
background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important;
|
||||
color: var(--highlight_text_color) !important;
|
||||
}
|
||||
|
||||
button:disabled, button.disabled,
|
||||
.button:disabled, .button.disabled,
|
||||
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 {
|
||||
button:disabled,
|
||||
button.disabled,
|
||||
.button:disabled,
|
||||
.button.disabled,
|
||||
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 {
|
||||
color: var(--input_disabled_text);
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
@@ -462,6 +551,25 @@ select:disabled , select.disabled {
|
||||
cursor: not-allowed;
|
||||
background: var(--input_background);
|
||||
}
|
||||
|
||||
.group_first {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.group_middle {
|
||||
border-radius: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.group_last {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
button>i,
|
||||
.button>i,
|
||||
button>svg,
|
||||
@@ -473,6 +581,7 @@ button > svg,
|
||||
.round {
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.tab_bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -481,7 +590,9 @@ button > svg,
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
|
||||
/* border-bottom: 2px solid var(--input_background); */
|
||||
}
|
||||
|
||||
.tab_bar>button,
|
||||
.tab_bar>.button {
|
||||
margin: 10px 0 0 10px;
|
||||
@@ -489,6 +600,7 @@ button > svg,
|
||||
border-bottom-right-radius: 0;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
.tab_bar>*:last-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
@@ -496,7 +608,6 @@ button > svg,
|
||||
/* Dropdown list of the select tag */
|
||||
option {
|
||||
background: var(--input_background);
|
||||
color: #bfbfbf; /* Fallback */
|
||||
color: var(--body_text_color);
|
||||
}
|
||||
|
||||
@@ -509,7 +620,8 @@ input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="date"] {
|
||||
display: inline-block;
|
||||
margin: 3px; /* Same as button, to make them align nicely */
|
||||
margin: 3px;
|
||||
/* Same as button, to make them align nicely */
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--input_background);
|
||||
@@ -518,8 +630,9 @@ input[type="date"]{
|
||||
color: var(--input_text);
|
||||
font-size: 1em;
|
||||
outline: 0;
|
||||
transition: box-shadow 0.3s;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
textarea:active,
|
||||
input[type="text"]:active,
|
||||
input[type="password"]:active,
|
||||
@@ -534,6 +647,7 @@ input[type="number"]:focus,
|
||||
input[type="date"]:focus {
|
||||
box-shadow: inset 0 0 3px 0 var(--highlight_color);
|
||||
}
|
||||
|
||||
textarea:disabled,
|
||||
input[type="text"]:disabled,
|
||||
input[type="password"]:disabled,
|
||||
@@ -556,12 +670,16 @@ input[type=file]{
|
||||
/* Webkit Scrollbars */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 18px; /* for vertical scrollbars */
|
||||
height: 18px; /* for horizontal scrollbars */
|
||||
width: 18px;
|
||||
/* for vertical scrollbars */
|
||||
height: 18px;
|
||||
/* for horizontal scrollbars */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--body_color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar_foreground_color);
|
||||
border-radius: 10px;
|
||||
@@ -569,12 +687,15 @@ input[type=file]{
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scrollbar_hover_color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: var(--body_color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button {
|
||||
background-color: var(--body_color);
|
||||
display: block;
|
||||
@@ -582,11 +703,13 @@ input[type=file]{
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:single-button:vertical:decrement {
|
||||
display: none;
|
||||
/* border-width: 0 8px 8px 8px; */
|
||||
/* border-color: transparent transparent var(--scrollbar_foreground_color) transparent; */
|
||||
}
|
||||
|
||||
/* ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
|
||||
border-color: transparent transparent var(--scrollbar_hover_color) transparent;
|
||||
} */
|
||||
@@ -595,6 +718,7 @@ input[type=file]{
|
||||
/* border-width: 8px 8px 0 8px; */
|
||||
/* border-color: var(--scrollbar_foreground_color) transparent transparent transparent; */
|
||||
}
|
||||
|
||||
/* ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
|
||||
border-color: var(--scrollbar_hover_color) transparent transparent transparent;
|
||||
} */
|
||||
@@ -603,6 +727,7 @@ input[type=file]{
|
||||
/* border-width: 8px 8px 8px 0px; */
|
||||
/* border-color: transparent var(--scrollbar_foreground_color) transparent transparent; */
|
||||
}
|
||||
|
||||
/* ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
|
||||
border-color: transparent var(--scrollbar_hover_color) transparent transparent;
|
||||
} */
|
||||
@@ -611,6 +736,7 @@ input[type=file]{
|
||||
/* border-width: 8px 0px 8px 8px; */
|
||||
/* border-color: transparent transparent transparent var(--scrollbar_foreground_color); */
|
||||
}
|
||||
|
||||
/* ::-webkit-scrollbar-button:horizontal:single-button:increment:hover {
|
||||
border-color: transparent transparent transparent var(--scrollbar_hover_color);
|
||||
} */
|
||||
|
||||
@@ -16,30 +16,50 @@
|
||||
be saved in a cookie.
|
||||
</p>
|
||||
<div class="indent">
|
||||
<input type="radio" id="style_default" name="style"><label for="style_default">Pixeldrain Style</label><br/>
|
||||
Default pixeldrain style, with purple gradients
|
||||
<br/>
|
||||
<br/>
|
||||
<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
|
||||
(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
|
||||
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:<br/>
|
||||
<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label><br/>
|
||||
<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label><br/>
|
||||
(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)
|
||||
<br/>
|
||||
<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label><br/>
|
||||
Classic pre-2020 pixeldrain style, dark grey<br/>
|
||||
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
|
||||
<br/>
|
||||
<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label>
|
||||
<br/>
|
||||
<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label>
|
||||
<br/>
|
||||
<br/>
|
||||
<input type="radio" id="style_solarized" name="style"><label for="style_solarized">Solarized</label>
|
||||
(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
|
||||
<br/>
|
||||
Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
|
||||
<br/>
|
||||
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
|
||||
<br/>
|
||||
<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
|
||||
<br/>
|
||||
<!-- <br/> -->
|
||||
<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
|
||||
<br/>
|
||||
<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
|
||||
<br/>
|
||||
Classic 2022 style, with purple gradients
|
||||
<br/>
|
||||
<br/>
|
||||
<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label>
|
||||
<br/>
|
||||
Classic pre-2020 pixeldrain style, dark gray
|
||||
<br/>
|
||||
<br/>
|
||||
Other (experimental) themes
|
||||
<br/>
|
||||
<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label>
|
||||
<br/>
|
||||
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label>
|
||||
<br/>
|
||||
Other (experimental) themes<br/>
|
||||
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
|
||||
<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label><br/>
|
||||
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label><br/>
|
||||
<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
|
||||
(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</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/>
|
||||
(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)
|
||||
<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>-->
|
||||
(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)
|
||||
<br/>
|
||||
<input type="radio" id="style_sweet" name="style"><label for="style_sweet">Sweet</label>
|
||||
</div>
|
||||
</section>
|
||||
@@ -51,7 +71,6 @@
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
|
||||
document.cookie = "style=" + evt.target.id.substring(6) + "; expires=" + date.toUTCString() + "; path=/";
|
||||
|
||||
location.reload();
|
||||
})
|
||||
});
|
||||
|
||||
@@ -17,6 +17,18 @@
|
||||
<meta name="description" content="Pixeldrain is a free file sharing service, you
|
||||
can upload any file and you will be given a shareable link right away.
|
||||
pixeldrain also supports previews for images, videos, audio, PDFs and much more." />
|
||||
<meta name="keywords" content="file sharing, free file sharing, file transfer,
|
||||
free file transfer, file hosting, free file hosting, hosting, file upload,
|
||||
free file upload, uploading, send file, large file, free file sharing,
|
||||
free file transfer, 10 GB free, free file sending, file storage, cloud storage,
|
||||
free cloud storage, image hosting, image sharing, photo hosting,
|
||||
photo transfer, photo sharing, video hosting, video sharing, video transfer,
|
||||
document sharing, upload documents, send documents, huge file, large video,
|
||||
large document, pdf, pdf sharing, pdf upload, pdf transfer, pdf reader,
|
||||
free pdf upload, text file upload, text sharing, photo storage,
|
||||
professional file transfer, cheap storage, cheap file storage, send large file,
|
||||
send big file, send huge file, audio sharing, music sharing, audio upload,
|
||||
music upload" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="{{.}} ~ pixeldrain" />
|
||||
<meta property="og:site_name" content="pixeldrain" />
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: var(--background_text_color);
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -56,7 +56,7 @@ onMount(() => {
|
||||
max-width: 80%;
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
background-color: var(--popout_color);
|
||||
background-color: var(--card_color);
|
||||
box-shadow: 1px 1px 10px -2px 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(--popout_color);
|
||||
border-bottom: 15px solid var(--card_color);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
}
|
||||
|
||||
@@ -282,10 +282,10 @@ onMount(() => {
|
||||
background: var(--shaded_background);
|
||||
}
|
||||
.feat_table > div > .feat_normal {
|
||||
background-color: var(--popout_color);
|
||||
background-color: var(--card_color);
|
||||
}
|
||||
.feat_table > div > .feat_pro {
|
||||
background-color: var(--popout_color);
|
||||
background-color: var(--card_color);
|
||||
box-shadow: 1px 1px 2px -1px var(--shadow_color);
|
||||
}
|
||||
.feat_table > div > .feat_highlight {
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
hyphens: auto;
|
||||
}
|
||||
.feat_table > div > .feat_pro {
|
||||
background-color: var(--popout_color);
|
||||
background-color: var(--card_color);
|
||||
box-shadow: 1px 1px 2px -1px var(--shadow_color);
|
||||
}
|
||||
.text_highlight {
|
||||
|
||||
@@ -292,7 +292,7 @@ onMount(load_tranfer_used)
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.feat_table > div > .feat_normal {
|
||||
background: var(--popout_color);
|
||||
background: var(--card_color);
|
||||
}
|
||||
.feat_table > div > .feat_highlight {
|
||||
border: 1px solid var(--highlight_color)
|
||||
|
||||
@@ -41,7 +41,7 @@ export let highlight = false
|
||||
<style>
|
||||
.expandable {
|
||||
text-decoration: none;
|
||||
background-color: var(--popout_color);
|
||||
background-color: var(--card_color);
|
||||
margin: 0.6em 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -87,7 +87,7 @@ const keydown = e => {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -20%);
|
||||
padding: 0;
|
||||
border-radius: 20px 20px 16px 16px;
|
||||
border-radius: 20px 20px 12px 12px;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -14,15 +14,30 @@ let set = s => {
|
||||
<button class:button_highlight={theme===""} on:click={() => {set("")}}>
|
||||
None
|
||||
</button>
|
||||
<button class:button_highlight={theme==="default"} on:click={() => {set("default")}}>
|
||||
Default (purple)
|
||||
<button class="group_first" class:button_highlight={theme==="nord"} on:click={() => {set("nord")}}>
|
||||
Nord
|
||||
</button>
|
||||
<button class="group_middle" class:button_highlight={theme==="nord_dark"} on:click={() => {set("nord_dark")}}>
|
||||
dark
|
||||
</button>
|
||||
<button class="group_last" class:button_highlight={theme==="nord_light"} on:click={() => {set("nord_light")}}>
|
||||
light
|
||||
</button>
|
||||
<button class="group_first" class:button_highlight={theme==="solarized"} on:click={() => {set("solarized")}}>
|
||||
Solarized
|
||||
</button>
|
||||
<button class="group_middle" class:button_highlight={theme==="solarized_dark"} on:click={() => {set("solarized_dark")}}>
|
||||
dark
|
||||
</button>
|
||||
<button class="group_last" class:button_highlight={theme==="solarized_light"} on:click={() => {set("solarized_light")}}>
|
||||
light
|
||||
</button>
|
||||
<button class:button_highlight={theme==="purple_drain"} on:click={() => {set("purple_drain")}}>
|
||||
Purple drain
|
||||
</button>
|
||||
<button class:button_highlight={theme==="classic"} on:click={() => {set("classic")}}>
|
||||
Classic
|
||||
</button>
|
||||
<button class:button_highlight={theme==="solarized_dark"} on:click={() => {set("solarized_dark")}}>
|
||||
Solarized
|
||||
</button>
|
||||
<button class:button_highlight={theme==="maroon"} on:click={() => {set("maroon")}}>
|
||||
Maroon
|
||||
</button>
|
||||
@@ -32,15 +47,6 @@ let set = s => {
|
||||
<button class:button_highlight={theme==="canta"} on:click={() => {set("canta")}}>
|
||||
Canta
|
||||
</button>
|
||||
<button class:button_highlight={theme==="nord"} on:click={() => {set("nord")}}>
|
||||
Nord (dynamic)
|
||||
</button>
|
||||
<button class:button_highlight={theme==="nord_dark"} on:click={() => {set("nord_dark")}}>
|
||||
Nord (dark)
|
||||
</button>
|
||||
<button class:button_highlight={theme==="nord_light"} on:click={() => {set("nord_light")}}>
|
||||
Nord (light)
|
||||
</button>
|
||||
<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
|
||||
Skeuos
|
||||
</button>
|
||||
|
||||
@@ -25,10 +25,22 @@ func userStyleFromRequest(r *http.Request) (s template.CSS) {
|
||||
|
||||
func userStyle(style string) template.CSS {
|
||||
switch style {
|
||||
case "classic":
|
||||
return template.CSS(pixeldrainClassicStyle.String())
|
||||
case "nord":
|
||||
return template.CSS(nordDarkStyle.withLight(nordLightStyle))
|
||||
case "nord_dark":
|
||||
return template.CSS(nordDarkStyle.String())
|
||||
case "nord_light", "snowstorm":
|
||||
return template.CSS(nordLightStyle.String())
|
||||
case "solarized":
|
||||
return template.CSS(solarizedDarkStyle.withLight(solarizedLightStyle))
|
||||
case "solarized_dark":
|
||||
return template.CSS(solarizedDarkStyle.String())
|
||||
case "solarized_light":
|
||||
return template.CSS(solarizedLightStyle.String())
|
||||
case "classic":
|
||||
return template.CSS(classicStyle.String())
|
||||
case "purple_drain":
|
||||
return template.CSS(defaultPixeldrainStyle.String())
|
||||
case "maroon":
|
||||
return template.CSS(maroonStyle.String())
|
||||
case "hacker":
|
||||
@@ -37,18 +49,12 @@ func userStyle(style string) template.CSS {
|
||||
return template.CSS(cantaPixeldrainStyle.String())
|
||||
case "skeuos":
|
||||
return template.CSS(skeuosPixeldrainStyle.String())
|
||||
case "nord":
|
||||
return template.CSS(nordPixeldrainStyle.withLight(snowstormPixeldrainStyle))
|
||||
case "nord_dark":
|
||||
return template.CSS(nordPixeldrainStyle.String())
|
||||
case "nord_light", "snowstorm":
|
||||
return template.CSS(snowstormPixeldrainStyle.String())
|
||||
case "sweet":
|
||||
return template.CSS(sweetPixeldrainStyle.String())
|
||||
case "default":
|
||||
fallthrough // use default case
|
||||
case "adwaita":
|
||||
return template.CSS(adwaitaDarkStyle.withLight(adwaitaLightStyle))
|
||||
default:
|
||||
return template.CSS(defaultPixeldrainStyle.String())
|
||||
return template.CSS(nordDarkStyle.withLight(nordLightStyle))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,7 +82,8 @@ type styleSheet struct {
|
||||
BodyText hsl
|
||||
Separator Color
|
||||
Shaded Color
|
||||
PopoutColor hsl
|
||||
CardColor hsl
|
||||
CardText hsl
|
||||
|
||||
// Colors to use in graphs
|
||||
Chart1 hsl
|
||||
@@ -84,7 +91,6 @@ type styleSheet struct {
|
||||
Chart3 hsl
|
||||
|
||||
Shadow hsl
|
||||
Light bool // If this is a light theme
|
||||
}
|
||||
|
||||
func (s styleSheet) withDefaults() styleSheet {
|
||||
@@ -148,7 +154,7 @@ func (s styleSheet) String() string {
|
||||
--body_text_color: %s;
|
||||
--separator: %s;
|
||||
--shaded_background: %s;
|
||||
--popout_color: %s;
|
||||
--card_color: %s;
|
||||
|
||||
--chart_1_color: %s;
|
||||
--chart_2_color: %s;
|
||||
@@ -179,7 +185,7 @@ func (s styleSheet) String() string {
|
||||
s.BodyText.CSS(),
|
||||
s.Separator.CSS(),
|
||||
s.Shaded.CSS(),
|
||||
s.PopoutColor.CSS(),
|
||||
s.CardColor.CSS(),
|
||||
s.Chart1.CSS(),
|
||||
s.Chart2.CSS(),
|
||||
s.Chart3.CSS(),
|
||||
@@ -251,14 +257,14 @@ var defaultPixeldrainStyle = styleSheet{
|
||||
BodyColor: hsl{274, .9, .14},
|
||||
BodyBackground: NoColor,
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{275, .8, .18},
|
||||
CardColor: hsl{275, .8, .18},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var pixeldrainClassicStyle = styleSheet{
|
||||
Input: hsl{0, 0, .16},
|
||||
InputHover: hsl{0, 0, .20},
|
||||
var classicStyle = styleSheet{
|
||||
Input: hsl{0, 0, .18},
|
||||
InputHover: hsl{0, 0, .22},
|
||||
InputText: hsl{0, 0, .9},
|
||||
InputDisabledText: hsl{0, 0, .4},
|
||||
Highlight: hsl{89, .60, .45},
|
||||
@@ -268,28 +274,9 @@ var pixeldrainClassicStyle = styleSheet{
|
||||
ScrollbarHover: hsl{0, 0, .50},
|
||||
|
||||
BackgroundColor: hsl{0, 0, .08},
|
||||
BodyColor: hsl{0, 0, .11},
|
||||
BodyColor: hsl{0, 0, .12},
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{0, 0, .18},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var solarizedDarkStyle = styleSheet{
|
||||
Input: hsl{192, .95, .25},
|
||||
InputHover: hsl{192, .95, .29},
|
||||
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},
|
||||
|
||||
BackgroundColor: hsl{192, .87, .09},
|
||||
BodyColor: hsl{192, .81, .14},
|
||||
BodyText: hsl{0, 0, .75},
|
||||
PopoutColor: hsl{192, .95, .17},
|
||||
CardColor: hsl{0, 0, .16},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
@@ -308,7 +295,7 @@ var maroonStyle = styleSheet{
|
||||
BackgroundColor: hsl{0, .7, .05},
|
||||
BodyColor: hsl{0, .8, .08}, // hsl{0, .8, .15},
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{0, .9, .14},
|
||||
CardColor: hsl{0, .9, .14},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
@@ -327,7 +314,7 @@ var hackerStyle = styleSheet{
|
||||
BackgroundColor: hsl{0, 0, 0},
|
||||
BodyColor: hsl{0, 0, .03},
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{120, .4, .05},
|
||||
CardColor: hsl{120, .4, .05},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
@@ -346,7 +333,7 @@ var cantaPixeldrainStyle = styleSheet{
|
||||
BackgroundColor: hsl{180, .04, .16},
|
||||
BodyColor: hsl{168, .05, .21},
|
||||
BodyText: hsl{0, 0, .8},
|
||||
PopoutColor: hsl{170, .05, .26},
|
||||
CardColor: hsl{170, .05, .26},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
@@ -365,12 +352,12 @@ var skeuosPixeldrainStyle = styleSheet{
|
||||
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%)
|
||||
CardColor: hsl{225, .14, .17}, // hsl(225, 14%, 17%)
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var nordPixeldrainStyle = styleSheet{
|
||||
var nordDarkStyle = styleSheet{
|
||||
Input: hsl{220, .16, .36}, // nord3
|
||||
InputHover: hsl{220, .16, .40},
|
||||
InputText: hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
|
||||
@@ -384,13 +371,13 @@ var nordPixeldrainStyle = styleSheet{
|
||||
BackgroundColor: hsl{220, .16, .22}, // nord0
|
||||
BodyColor: hsl{222, .16, .28}, // nord1
|
||||
BodyText: hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
|
||||
PopoutColor: hsl{220, .17, .32}, // nord2
|
||||
CardColor: hsl{220, .17, .32}, // nord2
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var snowstormPixeldrainStyle = styleSheet{
|
||||
Link: hsl{92, .40, .40},
|
||||
var nordLightStyle = styleSheet{
|
||||
Link: hsl{92, .40, .32},
|
||||
Input: hsl{218, .27, .94}, // nord6 hsl(218, 27%, 94%)
|
||||
InputHover: hsl{218, .27, .98},
|
||||
InputText: hsl{222, .16, .28}, // nord1 hsl(222, 16%, 28%)
|
||||
@@ -408,10 +395,9 @@ var snowstormPixeldrainStyle = styleSheet{
|
||||
BodyText: hsl{220, .17, .32}, // nord2 hsl(220, 17%, 32%)
|
||||
Shaded: RGBA{255, 255, 255, 0.4},
|
||||
BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
|
||||
PopoutColor: hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
|
||||
CardColor: hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
|
||||
|
||||
Shadow: hsl{220, .16, .36},
|
||||
Light: true,
|
||||
}
|
||||
|
||||
var sweetPixeldrainStyle = styleSheet{
|
||||
@@ -426,7 +412,81 @@ var sweetPixeldrainStyle = styleSheet{
|
||||
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%)
|
||||
Separator: RGBA{255, 255, 255, 0.05},
|
||||
CardColor: hsl{229, .25, .14}, // hsl(229, 25%, 14%)
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var adwaitaDarkStyle = styleSheet{
|
||||
Input: RGBA{255, 255, 255, .06},
|
||||
InputHover: RGBA{255, 255, 255, .1},
|
||||
InputText: hsl{0, 0, 1},
|
||||
InputDisabledText: hsl{0, 0, .5},
|
||||
Highlight: hsl{152, .62, .39}, // hsl(152, 62%, 39%)
|
||||
HighlightText: hsl{0, 0, 0},
|
||||
Danger: hsl{9, 1, .69}, // hsl(9, 100%, 69%)
|
||||
|
||||
BackgroundColor: hsl{0, 0, .19},
|
||||
BodyColor: hsl{0, 0, .14},
|
||||
BodyText: hsl{0, 0, 1},
|
||||
Separator: RGBA{255, 255, 255, 0.04},
|
||||
CardColor: hsl{0, 0, .08},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var adwaitaLightStyle = styleSheet{
|
||||
Input: RGBA{0, 0, 0, .06},
|
||||
InputHover: RGBA{0, 0, 0, .1},
|
||||
InputText: hsl{0, 0, .2},
|
||||
InputDisabledText: hsl{0, 0, .7},
|
||||
Highlight: hsl{152, .62, .47}, // hsl(152, 62%, 47%)
|
||||
HighlightText: hsl{0, 0, 1},
|
||||
Danger: hsl{356, .75, .43}, // hsl(356, 75%, 43%)
|
||||
|
||||
BackgroundColor: hsl{0, 0, .92},
|
||||
BodyColor: hsl{0, 0, .98},
|
||||
BodyText: hsl{0, 0, .2},
|
||||
Shaded: RGBA{0, 0, 0, 0.04},
|
||||
CardColor: hsl{0, 0, 1},
|
||||
|
||||
Shadow: hsl{0, 0, 0.36},
|
||||
}
|
||||
|
||||
var solarizedDarkStyle = styleSheet{
|
||||
Input: hsl{192, .81, .18}, // hsl(194, 14%, 40%)
|
||||
InputHover: hsl{192, .81, .22}, // hsl(196, 13%, 45%)
|
||||
InputText: hsl{180, .07, .80}, // hsl(44, 87%, 94%)
|
||||
InputDisabledText: hsl{194, .14, .30}, // hsl(194, 14%, 40%)
|
||||
Highlight: hsl{68, 1, .30}, // hsl(68, 100%, 30%)
|
||||
HighlightText: hsl{192, 1, .11}, // hsl(192, 100%, 11%)
|
||||
Danger: hsl{1, .71, .52}, // hsl(1, 71%, 52%)
|
||||
|
||||
BackgroundColor: hsl{192, 1, .11}, //hsl(192, 100%, 11%)
|
||||
BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%)
|
||||
BodyText: hsl{180, .07, .60}, // hsl(180, 7%, 60%)
|
||||
Separator: RGBA{255, 255, 255, 0.05},
|
||||
CardColor: hsl{192, .81, .16},
|
||||
|
||||
Shadow: hsl{0, 0, 0},
|
||||
}
|
||||
|
||||
var solarizedLightStyle = styleSheet{
|
||||
Input: hsl{46, .42, .84}, //hsl(180, 7%, 60%)
|
||||
InputHover: hsl{46, .42, .88},
|
||||
InputText: hsl{194, .14, .20}, // hsl(192, 81%, 14%)
|
||||
InputDisabledText: hsl{194, .14, .80},
|
||||
Highlight: hsl{68, 1, .30}, // hsl(68, 100%, 30%)
|
||||
HighlightText: hsl{192, 1, .11}, // hsl(192, 100%, 11%)
|
||||
Danger: hsl{1, .71, .52}, // hsl(1, 71%, 52%)
|
||||
|
||||
BackgroundColor: hsl{46, .42, .88}, // hsl(46, 42%, 88%)
|
||||
BodyColor: hsl{44, .87, .94}, // hsl(44, 87%, 94%)
|
||||
BodyText: hsl{194, .14, .40}, // hsl(194, 14%, 40%)
|
||||
Separator: RGBA{0, 0, 0, 0.05},
|
||||
Shaded: RGBA{255, 255, 255, 0.2},
|
||||
CardColor: hsl{44, .87, .96},
|
||||
|
||||
Shadow: hsl{0, 0, 0.36},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user