/*
T-120 Theme
[2022 Wikidot Theme]
by Cytryniak
*/
@import url('https://fonts.googleapis.com/css2?family=Epilogue&display=swap');
:root {
--theme-base: "black-highlighter";
--theme-id: "t-120";
--theme-name: "T-120 Theme";
/*Header*/
--logo-image: url("https://raw.githubusercontent.com/Cytryniak/Backrooms-Themes/642dc911f94149346135c50fb481a99e0a971d6b/VHS-Theme/Logo_PL_black.svg");
--header-title: "Backrooms";
--header-subtitle: "Nie widziałem Cię gdzieś wcześniej?";
/*Font*/
--body-font: 'Epilogue', sans-serif;
--header-font: 'Epilogue', sans-serif;
--title-font: 'Epilogue', sans-serif;
--mono-font: 'Epilogue', sans-serif;
/*Colors*/
--pale-gray-monochrome: 255, 252, 245;
--white-monochrome: 244, 236, 217;
--light-gray-monochrome: 129, 127, 130;
--gray-monochrome: 65, 64, 66;
--black-monochrome: 20, 18, 23;
--bright-accent: 122, 120, 125;
--medium-accent: 53, 49, 56;
--dark-accent: 39, 37, 41;
--pale-accent: 83, 82, 84;
--font-black: 0, 0, 0;
--font-gray: 33, 33, 33;
--font-white: 255, 252, 245;
/*Primary Theme Colors*/
--swatch-background: var(--pale-gray-monochrome);
--swatch-primary: var(--pale-accent);
--swatch-primary-darker: var(--gray-monochrome);
--swatch-primary-darkest: var(--medium-accent);
/* Primary Text Colors */
--swatch-text-dark: var(--font-gray);
--swatch-text-light: var(--font-white);
--swatch-important-text: var(--bright-accent);
--barColour: var(--light-gray-monochrome);
--linkColour: rgb(195, 12, 56);
/* Primary Menu Colors */
--swatch-menubg-color: var(--white-monochrome);
--swatch-menubg-light-color: var(--pale-accent);
--swatch-menubg-medium-color: var(--gray-monochrome);
--swatch-menubg-medium-dark-color: var(--medium-accent);
--swatch-menubg-dark-color: var(--dark-accent);
--swatch-menubg-black-color: var(--black-monochrome);
--swatch-menubg-hover-color: var(--pale-accent);
--swatch-menutxt-dark-color: var(--pale-accent);
--swatch-menutxt-light-color: var(--font-white);
--swatch-menutxt-general-color: var(--font-gray);
--swatch-border-color: var(--bright-accent);
/* Primary Header Colors */
--swatch-headerh1-color: var(--font-white);
--swatch-headerh2-color: var(--font-white);
--swatch-topmenu-border-color: var(--bright-accent);
--swatch-topmenu-bg-color: var(--medium-accent);
/* Link Colors */
--link-color: 195, 12, 56;
--visited-link-color: 198, 14, 58;
--hover-link-color: 208, 53, 51;
--sidebar-links-text: var(--pale-accent);
--link-color-bright: 195, 12, 56;
/* Rating Module Colors */
--rating-module-button-color: var(--medium-accent);
--rating-module-text-color: var(--font-gray);
--rating-module-text-hover-color: var(--pale-accent);
/* Header Gradients */
--gradient-header: none;
--diagonal-stripes: none;
}
/*Selectors*/
#skrollr-body {
background-image:url(https://raw.githubusercontent.com/Cytryniak/Backrooms-Themes/main/VHS-Theme/bg.png);
background-repeat: repeat;
background-position: center;
background-size: auto;
width: 100%;
height: 7.8rem;
}
#login-status a {
color:var(--font-gray);
}
#side-bar .side-block div a img {
filter: grayscale(75%);
}
#container {
background-image: radial-gradient(circle, rgb(var(--black-monochrome), 0.05)50%, transparent 0);
background-size: 0.25em 0.25em;
background-repeat: repeat;
background-attachment: fixed;
}
div#page-options-bottom-2 > a, div#page-options-bottom > a {
border-radius: 0em;
-moz-border-radius: 0em;
border: none;
}
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
border: none;
}
#header, #top-bar {
background-attachment: scroll;
}
#header {
background-image: none;
/* Login Color */
--login-username-color: var(--font-gray);
--login-myaccount-color: var(--font-gray);
--login-arrow-color: var(--font-gray);
--login-dropdown-text-color: var(--font-gray);
--search-icon-color: var(--font-gray);
}
#header::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-image: var(--logo-image);
background-size: auto 9rem;
background-position: center;
background-repeat: no-repeat;
opacity: 0.5;
}
#header h1, #header h1 a {
position: absolute;
top: 1rem;
margin: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 0;
}
#header h2, #header h2 span, #header h2 span::before {
position: absolute;
top: 2rem;
margin: 0;
width: 100%;
display: flex;
justify-content: center;
}
}
a.newpage {
background: transparent;
text-decoration: none;
color: rgb(151, 22, 79);
}
blockquote {
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
background-color: var(--light-gray-monochrome);
}
.styled-quote {
background-color: rgb(var(--pale-gray-monochrome));
border-left: 0.5rem solid rgba(var(--gray-monochrome));
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
.dark-styled-quote {
background-color:rgb(var(--gray-monochrome));
border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
color:rgb(var(--white-monochrome));
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
.dark-styled-quote a{
color: rgb(var(--swatch-menubg-medium-color));
}
.lightblock {
background-color:rgb(var(--white-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
.darkblock {
background-color:rgb(var(--gray-monochrome));
color:rgb(var(--white-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
.darkblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
