CSS updates and a whole theme selector thing
This commit is contained in:
parent
460e9585d2
commit
4cded68dc4
28 changed files with 431 additions and 3 deletions
13
public/css/colorschemes/c64.css
Normal file
13
public/css/colorschemes/c64.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #40318d;
|
||||
--background-secondary: #483c8b;
|
||||
--foreground: #f7f7f7;
|
||||
--links: #67b6bd;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/catppuccin-frappe.css
Normal file
13
public/css/colorschemes/catppuccin-frappe.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #232634;
|
||||
--background-secondary: #414559;
|
||||
--foreground: #c6d0f5;
|
||||
--links: #8caaee;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/catppuccin-latte.css
Normal file
13
public/css/colorschemes/catppuccin-latte.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #dce0e8;
|
||||
--background-secondary: #ccd0da;
|
||||
--foreground: #4c4f69;
|
||||
--links: #1e66f5;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
:root {
|
||||
--background: #181926;
|
||||
--background-light: #363a4f;
|
||||
--background-secondary: #363a4f;
|
||||
--foreground: #cad3f5;
|
||||
--links: #8aadf4;
|
||||
--warning: #ff7272;
|
||||
|
|
13
public/css/colorschemes/catppuccin-mocha.css
Normal file
13
public/css/colorschemes/catppuccin-mocha.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #11111b;
|
||||
--background-secondary: #313244;
|
||||
--foreground: #cdd6f4;
|
||||
--links: #89b4fa;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/gruvbox-dark.css
Normal file
13
public/css/colorschemes/gruvbox-dark.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #282828;
|
||||
--background-secondary: #928374;
|
||||
--foreground: #ebdbb2;
|
||||
--links: #458588;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/gruvbox-material.css
Normal file
13
public/css/colorschemes/gruvbox-material.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #282828;
|
||||
--background-secondary: #3c3836;
|
||||
--foreground: #d4be98;
|
||||
--links: #7daea3;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/gruvbox.css
Normal file
13
public/css/colorschemes/gruvbox.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #fbf1c7;
|
||||
--background-secondary: #928374;
|
||||
--foreground: #3c3836;
|
||||
--links: #458588;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
13
public/css/colorschemes/maia.css
Normal file
13
public/css/colorschemes/maia.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #31363a;
|
||||
--background-secondary: #4c4f4d;
|
||||
--foreground: #e8e8e8;
|
||||
--links: #13bf9d;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/man-page.css
Normal file
13
public/css/colorschemes/man-page.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #fef49c;
|
||||
--background-secondary: #e5e500;
|
||||
--foreground: #000000;
|
||||
--links: #b200b2;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
17
public/css/colorschemes/mono-amber.css
Normal file
17
public/css/colorschemes/mono-amber.css
Normal file
|
@ -0,0 +1,17 @@
|
|||
:root {
|
||||
--background: #2b1900;
|
||||
--background-secondary: #402500;
|
||||
--foreground: #ff9400;
|
||||
--links: #ffc28a;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline !important;
|
||||
}
|
17
public/css/colorschemes/mono-cyan.css
Normal file
17
public/css/colorschemes/mono-cyan.css
Normal file
|
@ -0,0 +1,17 @@
|
|||
:root {
|
||||
--background: #00222B;
|
||||
--background-secondary: #003340;
|
||||
--foreground: #00CCFF;
|
||||
--links: #ccf0ff;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline !important;
|
||||
}
|
17
public/css/colorschemes/mono-green.css
Normal file
17
public/css/colorschemes/mono-green.css
Normal file
|
@ -0,0 +1,17 @@
|
|||
:root {
|
||||
--background: #022B00;
|
||||
--background-secondary: #034000;
|
||||
--foreground: #0BFF00;
|
||||
--links: #b6ffb1;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline !important;
|
||||
}
|
17
public/css/colorschemes/mono-red.css
Normal file
17
public/css/colorschemes/mono-red.css
Normal file
|
@ -0,0 +1,17 @@
|
|||
:root {
|
||||
--background: #2B0C00;
|
||||
--background-secondary: #401200;
|
||||
--foreground: #FF3600;
|
||||
--links: #ffb09c;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline !important;
|
||||
}
|
17
public/css/colorschemes/mono-white.css
Normal file
17
public/css/colorschemes/mono-white.css
Normal file
|
@ -0,0 +1,17 @@
|
|||
:root {
|
||||
--background: #262626;
|
||||
--background-secondary: #3B3B3B;
|
||||
--foreground: #FAFAFA;
|
||||
--links: #a9a9a9;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline !important;
|
||||
}
|
17
public/css/colorschemes/mono-yellow.css
Normal file
17
public/css/colorschemes/mono-yellow.css
Normal file
|
@ -0,0 +1,17 @@
|
|||
:root {
|
||||
--background: #2B2400;
|
||||
--background-secondary: #403500;
|
||||
--foreground: #FFD300;
|
||||
--links: #ffe8a2;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline !important;
|
||||
}
|
13
public/css/colorschemes/papercolor-dark.css
Normal file
13
public/css/colorschemes/papercolor-dark.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #1C1C1C;
|
||||
--background-secondary: #585858;
|
||||
--foreground: #D0D0D0;
|
||||
--links: #5FAFD7;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/papercolor-light.css
Normal file
13
public/css/colorschemes/papercolor-light.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #EEEEEE;
|
||||
--background-secondary: #BCBCBC;
|
||||
--foreground: #444444;
|
||||
--links: #0087AF;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
13
public/css/colorschemes/shel.css
Normal file
13
public/css/colorschemes/shel.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #2C2423;
|
||||
--background-secondary: #918988;
|
||||
--foreground: #F5EEEC;
|
||||
--links: #2C64A2;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/slate.css
Normal file
13
public/css/colorschemes/slate.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #222222;
|
||||
--background-secondary: #494949;
|
||||
--foreground: #E0E0E0;
|
||||
--links: #02C5E0;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/solarized-dark.css
Normal file
13
public/css/colorschemes/solarized-dark.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #073642;
|
||||
--background-secondary: #657B83;
|
||||
--foreground: #FDF6E3;
|
||||
--links: #2699FF;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
13
public/css/colorschemes/solarized-light.css
Normal file
13
public/css/colorschemes/solarized-light.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #FDF6E3;
|
||||
--background-secondary: #EEE8D5;
|
||||
--foreground: #073642;
|
||||
--links: #268BD2;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
13
public/css/colorschemes/terminal-basic.css
Normal file
13
public/css/colorschemes/terminal-basic.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
:root {
|
||||
--background: #FFFFFF;
|
||||
--background-secondary: #bfbfbf;
|
||||
--foreground: #000000;
|
||||
--links: #0000ff;
|
||||
--warning: #ff7272;
|
||||
--warning-box-bg: #f64a3c;
|
||||
--warning-box-border: #c81a11;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
|
@ -238,7 +238,7 @@ table.computers p.description {
|
|||
}
|
||||
|
||||
table.computers th {
|
||||
background-color: var(--background-light);
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
table.computers td,
|
||||
|
@ -288,6 +288,9 @@ table.gb-entry-form tr td span.text-danger {
|
|||
table.gb-entry-form tr td textarea,
|
||||
table.gb-entry-form tr td input {
|
||||
margin-bottom: 5px;
|
||||
margin-left: 10px;
|
||||
background-color: var(--background);
|
||||
border: var(--foreground) solid 1px;
|
||||
}
|
||||
|
||||
table.gb-entry-form-container {
|
||||
|
@ -461,3 +464,13 @@ .error-box p {
|
|||
margin: 0;
|
||||
color: var(--foreground)
|
||||
}
|
||||
|
||||
label[for="scheme-selector"] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#scheme-selector {
|
||||
border: var(--foreground) solid 1px;
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--foreground)
|
||||
}
|
||||
|
|
72
public/js/themeSwap.js
Normal file
72
public/js/themeSwap.js
Normal file
|
@ -0,0 +1,72 @@
|
|||
/**
|
||||
* Retrieves a cookie's value
|
||||
* @param {string} cname Cookie name
|
||||
* @returns {string} Cookie value
|
||||
*/
|
||||
function getCookie(cname) {
|
||||
let name = cname + "=";
|
||||
let decodedCookie = decodeURIComponent(document.cookie);
|
||||
let ca = decodedCookie.split(';');
|
||||
for(let i = 0; i <ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets/creates a cookie
|
||||
* @param {string} cname Cookie name
|
||||
* @param {string} cvalue Cookie value
|
||||
* @param {number} exdays Cookie lifespan (days)
|
||||
*/
|
||||
function setCookie(cname, cvalue, exdays) {
|
||||
const d = new Date();
|
||||
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
||||
let expires = "expires="+ d.toUTCString();
|
||||
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a cookie exists
|
||||
* @param {string} cname Cookie name
|
||||
* @returns {boolean} If cookie exists or not
|
||||
*/
|
||||
function cookieExists(cname) {
|
||||
const cvalue = getCookie(cname);
|
||||
return cvalue !== "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Swaps the colorscheme
|
||||
* @param option
|
||||
*/
|
||||
function swapScheme(scheme) {
|
||||
setCookie("colorscheme", scheme, 90);
|
||||
document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`;
|
||||
console.log(`Set colorscheme to ${getCookie("colorscheme")}`)
|
||||
}
|
||||
|
||||
function setDefaultScheme() {
|
||||
if (!cookieExists("colorscheme")) {
|
||||
setCookie("colorscheme", "catppuccin-macchiato", 90);
|
||||
console.debug("Set default colorscheme");
|
||||
} else {
|
||||
const scheme = getCookie("colorscheme");
|
||||
const schemeselector = document.getElementById("scheme-selector");
|
||||
if (scheme && schemeselector) {
|
||||
for (let option of schemeselector.options) {
|
||||
if (option.value == scheme) {
|
||||
option.selected = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
swapScheme(scheme);
|
||||
}
|
||||
}
|
|
@ -28,4 +28,36 @@ class="pixel" alt="Wiby - Search Engine for the Classic Web">
|
|||
© floppydisk 2021-{{ date('Y') }}, v{{ config('app.version') }}, <a
|
||||
href="https://github.com/floppydisk05/diskfloppy.me">Source</a>,
|
||||
Served by {{ gethostname() }}<br>
|
||||
<label for="scheme-selector">Color Scheme:</label>
|
||||
<select onchange="swapScheme(this.value)" id="scheme-selector">
|
||||
<optgroup label="Misc">
|
||||
<option value="c64">C64</option>
|
||||
</optgroup>
|
||||
<optgroup label="Light">
|
||||
<option value="catppuccin-latte">Catppuccin Latte</option>
|
||||
<option value="gruvbox">Gruvbox</option>
|
||||
<option value="man-page">Man Page</option>
|
||||
<option value="papercolor-light">Papercolor Light</option>
|
||||
<option value="solarized-light">Solarized Light</option>
|
||||
<option value="terminal-basic">Terminal Basic</option>
|
||||
</optgroup>
|
||||
<optgroup label="Dark">
|
||||
<option value="catppuccin-frappe">Catppuccin Frappé</option>
|
||||
<option value="catppuccin-macchiato" selected="selected">Catppuccin Macchiato</option>
|
||||
<option value="catppuccin-mocha">Catppuccin Mocha</option>
|
||||
<option value="gruvbox-dark">Gruvbox Dark</option>
|
||||
<option value="gruvbox-material">Gruvbox Material</option>
|
||||
<option value="maia">Maia</option>
|
||||
<option value="mono-amber">Mono Amber</option>
|
||||
<option value="mono-cyan">Mono Cyan</option>
|
||||
<option value="mono-green">Mono Green</option>
|
||||
<option value="mono-red">Mono Red</option>
|
||||
<option value="mono-white">Mono White</option>
|
||||
<option value="mono-yellow">Mono Yellow</option>
|
||||
<option value="papercolor-dark">Papercolor Dark</option>
|
||||
<option value="shel">Shel</option>
|
||||
<option value="slate">Slate</option>
|
||||
<option value="solarized-dark">Solarized Dark</option>
|
||||
</optgroup>
|
||||
</select><br>
|
||||
</div>
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="stylesheet" href="/css/master.css"/>
|
||||
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
|
||||
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
|
||||
<script src="/js/themeSwap.js"></script>
|
||||
{!! (intval(date('n')) == 12) ? '<script src="/js/christmas/snow.js"></script>' : '' !!}
|
||||
|
||||
<!-- Page-specific -->
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
@include('includes.head')
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body onload="setDefaultScheme()">
|
||||
<div class="page">
|
||||
<div id="header" class="header">
|
||||
@include('includes.header')
|
||||
|
|
Loading…
Reference in a new issue