Troler's Theme
Troler
A theme inspired by old KDE versions with a pleasant and soft green hue.
=== Version 1 ===
Merged BlenderDumbass' fork
/*
This file could be used under both CC-BY-SA 4.0 or at your chosing GNU GPLv3 or any later version
*/
:root {
--color-important :
--color-background :
--color-text:
--background-color:
/* --backdrop-filter: blur(8px); */
--padding: 10px 20px;
--margin: 8px 0;
--border-radius: 2px;
--box-shadow: 0px 0px 15px rgba(0,0,0, 0.40);
--box-shadow-focus: 0px 0px 30px rgba(0,0,0, 0.99);
--code-string:
--code-variable:
--code-comment:
}
@font-face {
font-family: "Exo";
src: url("/pictures/Exo2-Medium.ttf");
}
/* Background elements */
html {background-color: var(--color-background);
background-image: url("/pictures/user_upload/Troler/RD4TGSCZ6C1DUQN5.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
color: var(--color-text);
font-family:"Exo";
font-size:17;
}
::selection {
color: white;
background: rgb(45, 31, 23);
border-radius: 5px;
}
body{
color: var(--color-text);
margin-top: 8px;
margin-bottom: 8px;
margin-right: 5px;
margin-left: 5px;}
table td {
border-style:hidden;
padding: 50 50;
}
h1 {
font-family:"Exo";
font-size: 35px;
color: var(--color-important);
text-shadow: 2px 2px 4px rgba(0,0,0, 0.3);
}
h2 {
font-family:"Exo";
font-size: 30px;
color: var(--color-text);
}
h3 {
font-family:"Exo";
font-size: 15px;
color: var(--color-text);
}
code {
font-family:"Monospace";
color: white;
padding: 0px 3px;
background-color:
border-radius: 3px;
word-wrap: break-word;
overflow-wrap: break-word;
box-shadow: 0px 0px 20px rgba(0,0,0, 0.50);
}
pre, .pre {
color: white;
font-family:"Monospace";
font-size: 14px;
color: white;
line-height: 20px;
background-image: linear-gradient(180deg,
var(--color-background) 50%,
background-size: 100% 40px;
width:100%;
white-space:pre;
overflow-x:scroll;
border-radius: 5px;
box-shadow: var(--box-shadow);
}
.text_string {color:
.text_variable {color:var(--code-variable);}
.text_command {color:var(--color-important);}
.text_comment {color:var(--code-comment);}
a {
font-family:"Exo";
font-size:20;
color: var(--color-important);
text-decoration: none;
}
a:hover {
color: magenta;
text-decoration: none;
}
img {
max-width: 70%;
height: auto;
border-radius:4px;
}
textarea, input, button {
border-width: 0px;
outline: none;
font-family:"Exo";
font-size:17;
}
textarea {
font-family:"Sans";
font-size:17;
}
button, .button, select {
padding: 1px 20;
margin: 8px 5px;
word-break: break-all;
display: inline-block;
background: linear-gradient(0deg,rgba(214, 219, 215, 1) 0%, rgba(242, 242, 242, 1) 100%);
border: 0px solid black;
color: rgba(100, 100, 100, 1);
font-weight: bold;
border-radius: 4px;
box-shadow: var(--box-shadow);
.icon {
-webkit-filter: invert(50%);
filter: invert(50%);
}
}
button, .button > img {background-color: rgba(0,0,0,0);}
button, .button > .icon {background-color: rgba(0,0,0,0);}
button, .button { line-height: 3 }
button:hover, input:hover, button:focus, input:focus, .button:hover, .button:focus, textarea:focus {
background: linear-gradient(0deg,rgba(214, 219, 215, 1) 0%, rgba(242, 242, 242, 1) 100%);
color:
border: 0px solid black;
outline: none;
box-shadow: var(--box-shadow-focus);
.icon {
-webkit-filter: invert(100%);
filter: invert(100%);
}
}
pre, .pre {
color: white !important;
}
.flexity {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
}
.login_fixed {
position: fixed;
right:10;
top:10;
}
sup, .sup {
background-color: var(--color-important);
color:white;
display: inline-block;
border-radius: 3px;
padding: 3px 6px 3px 6px;
margin: 5px;
}
sup:hover, .sup:hover {
color: var(--color-text);
text-decoration: none;
}
.graph_line {
position: absolute;
background-color: var(--color-important);
height: 80%;
margin-top: 20%;
width: 30px;
border-radius: 25px;
}
.graph_line:hover {
background-color: var(--color-text);
}
.dark_box {
font-family:"Sans";
background-color: var(--background-color);
backdrop-filter: var(--backdrop-filter);
padding: var(--padding);
margin: var(--margin);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.middle_box {
font-family:"Sans";
background-color: var(--background-color);
backdrop-filter: var(--backdrop-filter);
padding: var(--padding);
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
max-width: 1061px;
}
.article_box {
font-family:"Sans";
padding: 5px 20;
margin: 8px 5px;
max-width:300px;
vertical-align: top;
word-break: break-word;
display: inline-block;
background-color: var(--background-color);
backdrop-filter: var(--backdrop-filter);
color: var(--color-text);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);}
.quote {
background-color:
backdrop-filter: var(--backdrop-filter);
padding: var(--padding);
margin: var(--margin);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.toot {
padding: 5px 20;
margin: 8px 5px;
word-wrap: break-word;
overflow-wrap: break-word;
display: inline-block;
background-color: var(--background-color);
backdrop-filter: var(--backdrop-filter);
color: var(--color-text);
padding: var(--padding);
margin: var(--margin);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.article_box:hover, .dark_box:hover, .toot:hover, .quote:hover {
box-shadow: var(--box-shadow-focus);
}
/*
If a screen is at least 950 pixels wide, we do some more things.
*/
@media screen and (min-width: 950px) {
.middle_section_article {
position: absolute;
left:20%;
top:auto;
width:39%;
}
.checklist_section_article {
position: absolute;
left:60%;
top:auto;
width:20%;
}
}
/* progress bar theme */
.back_progress {background-color:
width: 100%;
height: 14;
border-radius: 7px}
.front_progress {background-color: var(--color-important);
height: 14;
border-radius:7px}
}