themes im backend etzala
This commit is contained in:
Flummi
@ -4,7 +4,7 @@
|
||||
/* once upon a time this was a stiefelstrapse! but no more! */
|
||||
/* Licensed under wtfpl */
|
||||
|
||||
:root {
|
||||
html[theme='f0ck'] {
|
||||
--accent: #9f0;
|
||||
--bg: #171717;
|
||||
--black: #000;
|
||||
@ -30,7 +30,6 @@
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-background-hover: #333;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--videojs-background: #0d0d0d;
|
||||
--metadata-bg: #0d0d0d;
|
||||
--badge-bg: #171717;
|
||||
--posts-meta-bg: #000000b8;
|
||||
@ -38,8 +37,6 @@
|
||||
--badge-nsfw: #a72828;
|
||||
--badge-tag: #6c6c6c;
|
||||
--scrollbar-color: #2b2b2b;
|
||||
--pb-primary: #fff;
|
||||
--pb-secondary: #9f0;
|
||||
}
|
||||
|
||||
html[theme='p1nk'] {
|
||||
@ -66,18 +63,19 @@ html[theme='p1nk'] {
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-background-hover: #333;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--videojs-background: #0e0d0d;
|
||||
--badge-bg: #171717;
|
||||
--metadata-bg: #0d0d0d;
|
||||
}
|
||||
|
||||
html[theme='orange'] {
|
||||
--accent: #ff6f00;
|
||||
--bg: #1f1e1e;
|
||||
--bg: #171717;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
--gray: #262626;
|
||||
--nav-bg: #2b2b2b;
|
||||
--nav-brand-border: inset 1px #242424;
|
||||
--nav-brand-bg: #1f1e1e;
|
||||
--nav-brand-bg: #171717;
|
||||
--navigation-links-bg: #2b2b2b;
|
||||
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
|
||||
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
@ -94,9 +92,9 @@ html[theme='orange'] {
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-background-hover: #333;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--videojs-background: #262626;
|
||||
--metadata-bg: #0d0d0d;
|
||||
--posts-meta-bg: #000000b8;
|
||||
--badge-bg: #171717;
|
||||
--badge-sfw: #68a728;
|
||||
--badge-nsfw: #a72828;
|
||||
--badge-tag: #6c6c6c;
|
||||
@ -129,7 +127,6 @@ html[theme='amoled'] {
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgb(92, 92, 92),inset 0 1px rgb(92, 92, 92),inset 0 -1px rgb(92, 92, 92),0 1px 1px rgba(92, 92, 92, 0);
|
||||
--pagination-background-hover: #6a6a6a70;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--videojs-background: #0d0d0d;
|
||||
--metadata-bg: #000;
|
||||
--badge-bg: #000;
|
||||
--posts-meta-bg: #000000b8;
|
||||
@ -137,9 +134,8 @@ html[theme='amoled'] {
|
||||
--badge-nsfw: #a72828;
|
||||
--badge-tag: #6c6c6c;
|
||||
--scrollbar-color: #1d1c1c;
|
||||
--pb-primary: #fff;
|
||||
--pb-secondary: #9f0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
@ -187,6 +183,10 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.id-link, a.dest-link {
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
a.post_source:hover, a.id-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -199,6 +199,7 @@ a.btn.disabled {
|
||||
.btn.disabled, .btn:disabled {
|
||||
opacity: 0.65;
|
||||
user-select: none;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
h5 {
|
||||
@ -275,6 +276,7 @@ ul#posts > li:hover span {
|
||||
background: var(--nav-brand-bg);
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
@ -347,11 +349,11 @@ span.f0ck {
|
||||
min-width: 17px;
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 3px;
|
||||
transition: .1s ease-out;
|
||||
/*transition: .1s ease-out;*/
|
||||
background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient));
|
||||
box-shadow: var(--nav-link-box-shadow);
|
||||
color: transparent;
|
||||
transition: .5s ease;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link, .pagination > a, .pagination > span {
|
||||
@ -368,6 +370,7 @@ span.f0ck {
|
||||
span.placeholder {
|
||||
border-left: 1px solid var(--accent);
|
||||
margin-left: 7px;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.navbar .nav-item .dropdown-menu {
|
||||
@ -459,7 +462,7 @@ span.placeholder {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
color: transparent;
|
||||
transition: .5s ease;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.pagination > a, .pagination > span {
|
||||
@ -488,8 +491,8 @@ span.placeholder {
|
||||
border-color: var(--black);
|
||||
background-clip: padding-box;
|
||||
box-shadow: var(--pagination-anchor-box-shadow);
|
||||
transition: .1s ease-out;
|
||||
background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient));
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.pagination>a:hover {
|
||||
@ -641,6 +644,7 @@ span.placeholder {
|
||||
opacity: 0.6;
|
||||
text-shadow: 2px 2px 2px var(--black);
|
||||
padding: 25px;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
#prev::before {
|
||||
@ -657,6 +661,7 @@ span.placeholder {
|
||||
opacity: 0.6;
|
||||
text-shadow: 2px 2px 2px var(--black);
|
||||
padding: 25px;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
#next:hover, #prev:hover {
|
||||
@ -857,6 +862,7 @@ span#tags {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 20ch;
|
||||
display: inline-block;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
/*.embed-responsive-image img {
|
||||
|
||||
@ -1,7 +1,24 @@
|
||||
const Cookie = {
|
||||
get: name => {
|
||||
const c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1];
|
||||
if(c) return decodeURIComponent(c);
|
||||
},
|
||||
set: (name, value, opts = {}) => {
|
||||
if(opts.days) {
|
||||
opts['max-age'] = opts.days * 60 * 60 * 24;
|
||||
delete opts.days;
|
||||
}
|
||||
opts = Object.entries(opts).reduce((accumulatedStr, [k, v]) => `${accumulatedStr}; ${k}=${v}`, '');
|
||||
document.cookie = name + '=' + encodeURIComponent(value) + opts
|
||||
},
|
||||
delete: (name, opts) => Cookie.set(name, '', {'max-age': -1, ...opts})
|
||||
};
|
||||
|
||||
(() => {
|
||||
const themes = [ 'f0ck', 'p1nk', 'orange', 'amoled' ];
|
||||
const acttheme = localStorage.getItem('theme') ?? "f0ck";
|
||||
document.documentElement.setAttribute("theme", acttheme);
|
||||
const acttheme = Cookie.get('theme') ?? "f0ck";
|
||||
if(acttheme !== document.documentElement.getAttribute("theme"))
|
||||
document.documentElement.setAttribute("theme", acttheme);
|
||||
if(themecontainer = document.querySelector("#themes")) {
|
||||
const sb = document.createElement("select");
|
||||
sb.id = "themeselector";
|
||||
@ -16,7 +33,7 @@
|
||||
sb.addEventListener("change", e => {
|
||||
const s = e.target.options[e.target.selectedIndex].innerText;
|
||||
document.documentElement.setAttribute("theme", s);
|
||||
localStorage.setItem("theme", s);
|
||||
Cookie.set("theme", s, { path: "/", days: 360 });
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user