improving general site look
Free art pics blue by bostiq
Details
Authorbostiq
LicenseFree art pics blue © 2022 by Lorenzo Colen is licensed under Attribution-NonCommercial-ShareAlike 4.0 International
CategoryFree art pics
Created
Updated
Size21 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
8th May '22 - First release
8th May '22 - tweaked new search fields in archive mode and the "new message banner" size and colours, breadcrumbs visibility.
9th May '22 - Eliminated floating rules and reorganize divs in grid and flex, created variables for colours.
12th May '22 - Created Indexed Section for better file navigation. Added footer, buttons transitions, images round borders, faded background and adjusted text colours and size.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Free art pics blue
@version 20220508.1.0
@namespace userstyles.world/user/bostiq
@description improving general site look
@author Lorenzo Colen
@license Free art pics blue © 2022 by Lorenzo Colen is licensed under Attribution-NonCommercial-ShareAlike 4.0 International
@license URL http://creativecommons.org/licenses/by-nc-sa/4.0/
==/UserStyle== */
@-moz-document domain("io-oi.xyz"),
domain("leg.xyz") {
/*== VARIABLES ==*/
/* COLOUR VARIABLES */
:root {
--w: rgb(255, 255, 255);
--bg-blu: rgb(9, 37, 79);
--bg-k: rgb(0, 17, 17);
--box-char: rgb(28, 28, 43);
--box-blu: rgb(97, 159, 255);
--box-R: rgb(170, 51, 51);
--box-G: rgb(136, 255, 140);
--txt-blu: rgb(136, 170, 255);
--txt-Dblue: rgb(62, 93, 171);
--txt-Lgrey: rgb(204, 204, 204);
--txt-Mgrey: rgb(170, 170, 170);
--txt-Dgrey: rgb(102, 102, 102);
--txt-G: rgb(66, 128, 68);
--k-noColor: rgba(0, 0, 0, 0);
--w-noColor: rgba(255, 255, 255, 0);
--shadow: rgba(0, 0, 50, .5);
--pin-y: rgb(204, 204, 0);
--fav-R: rgb(255, 153, 153);
}
/* other VARIABLES */
:root {
--smooth-bg: background 300ms ease-in-out 0s;
--smooth-Alpha: opacity 300ms ease-in-out 0s;
--smooth-Filter: filter 300ms ease-in-out 0s;
--smooth-All: all 300ms ease-in-out 0s;
}
}
@-moz-document domain("io-oi.xyz"),
domain("leg.xyz") {
/* RESET */
body {
margin: 0;
padding: 0;
}
body .main div {
float: none;
width: revert;
}
body,
body #content,
body .main {
font-size: 16px !important;
}
h1 {
margin-block-start: 0;
margin-block-end: 0;
padding: .67em 0;
}
}
@-moz-document domain("io-oi.xyz"),
domain("leg.xyz") {
/* == FIRST PAGE VIEW == */
body #container #content {
padding: 0;
}
@media screen and (min-width: 1200px ) {
body #content .wrapper {
display: grid;
grid: auto / 50% 50%;
width: 95%;
min-width: 970px;
margin: auto;
}
body #content .wrapper .navigation {
grid-area: 1/1/2/3;
margin: 1%
}
body #content .wrapper div[onclick="MyAdvertisements.do_click(1);"] {
grid-area: 2/1/3/2
}
body #content .wrapper div[onclick="MyAdvertisements.do_click(1);"] center{
display: grid;
grid: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / auto;
grid-auto-flow: column;
}
body #content .wrapper div[onclick="MyAdvertisements.do_click(1);"] center img {
grid-area: 9/1/10/2;
position: relative;
display: inline-grid !important;
padding-left: 10px;
margin-left: 10px;
}
body #content .wrapper table {
grid-area: 2/2/3/3;
margin: 10px !important;
}
body .wrapper font {
font-size: 1.6rem !important;
}
}
body .wrapper center:nth-child(3) center font {
font-size: 2rem;
}
body .wrapper center:nth-child(2) font {
font-size: 2rem;
}
body .wrapper .mycode_align {
display: none;
}
body .wrapper center {
padding: 10px 0
}
body #content .wrapper .tborder {
width: 91%;
margin: auto auto;
/* border: 1px solid #ccc; */
/* padding: 3%; */
margin: 50px auto;
display: table;
position: relative;
}
/* FOOTER */
body #container #content #footer {
display: block;
position: relative;
margin: 0;
width: 100%;
padding: 2% 0;
background: var(--txt-Dblue);
border-top: 1px solid var(--box-char);
border-bottom: 1px solid var(--box-char);
}
body #footer .upper {
background: var(--txt-Dblue);
border: 0;
font-size: revert;
}
body #footer .lower {
background-color: var(--txt-Dblue);
padding: 1% 0;
margin-top: 1%;
box-shadow: rgba(0, 0, 0, .5) 0px 0 60px inset, rgba(0, 0, 0, .5) 0px 0 10px inset;
}
}
@-moz-document domain("io-oi.xyz"),
domain("leg.xyz") {
/* GRID SYSTEM */
body img.shrinkToFit {
position: relative;
}
/* SETS GRID */
body .main {
display: flex;
flex-direction: column;
align-items: stretch;
/* grid-template-columns: 25% 25% 25% 25%; */
width: 100%;
}
/* body .main > div,
body .main .top,
body .main .navbar,
body .main .navbar3,
body .main .pages,
body .main .content,
body .main .content > center {
grid-column: 1/5;
} */
body .main > div[style='float: left;width: 940px;padding: 5px;'] {
width: 100% !important;
}
body .main .navbar3 {
height: 100%;
}
body .main .navbar2 {
margin: 0;
flex-grow: 1;
flex-basis: 50%;
}
/* body .main .navbar2:only-of-type {
grid-column: 1/5;
}
body .main .navbar2:nth-child(5) {
grid-column: 1/5;
}
body .main .navbar2:nth-child(3) {
grid-column: 1/3;
}
body .main .navbar2:nth-child(4) {
grid-column: 3/5;
} */
/* body .main .navbar2 + .navbar2 {
grid-column: 3/5;
}
body .main :not(.navbar2) + .navbar2 {
grid-column: 1/5;
} */
body #wcontent {
float: unset;
}
body #wcontent .image {
float: unset;
width: unset;
height: unset;
margin: unset;
}
body .main .content, body #wcontent {
display: grid;
grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
grid-row-gap: 20px;
grid-column-gap: 2%;
width: 80% !important;
margin: 0 auto;
}
body .main .content .picbox2,
body .main .content .picbox,
body #wcontent .image {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
body .main > center, body #wcontent {
grid-column: 1/5;
padding: 4% 0;
}
body #wcontent .image,
body .main .content .image,
body .main .content .picbox,
body .main .content .picbox2 {
height: auto !important
}
body #wcontent .image img,
body .main .content .image img,
body .main .content .picbox img,
body .main .content .picbox2 img {
/* float: left; */
width: 100% !important;
height: auto !important;
}
/* End GRID */
}
@-moz-document domain("io-oi.xyz"),
domain("leg.xyz") {
/* == GENERAL == */
html {
background-color: var(--bg-k);
}
body.search_plugin_added {
background-color: var(--bg-k);
background-image: linear-gradient(var(--bg-blu), var(--bg-k));
min-height: 100%;
}
/* html + body, */
body.search_plugin_added #content {
background-color: var(--k-noColor) !important;
}
a:link {
color: var(--txt-blu);
}
/* a:focus, a:focus span,
a:focus h1, a:focus h2,a:focus h3,
a:focus h4, a:focus h5, a:focus h6,
a:focus font, a:focus div, a:focus > img,
.picbox a:focus ~ h4 {
text-decoration: underline solid #8af 5px;
border: solid #8af 2px;
}
*/
a:focus > * {
border: solid var(--txt-blu) 2px;
}
body .pages .imgpagebar a h3 {
transition: var(--smooth-bg);
}
body .pages .imgpagebar a:hover h3,
body .pages .imgpagebar a:focus h3 {
background-color: var(--txt-Dblue);
transition: var(--smooth-bg);
}
html, body strong {
font-family: Arial !important;
font-weight: 100 !important;
}
body #panel .lower,
body #panel .upper {
font-size: 16px;
padding: 1% 0;
}
body #panel .lower {
background: var(--box-blu);
color: var(--w);
border-top: 1px solid var(--txt-blu);
border-bottom: 1px solid var(--txt-blu);
}
body #panel .lower a:link {
color: var(--w);
}
body #container,
body font,
body span,
body h1,
body h2,
body strong {
font-weight: 100 !important;
color: var(--txt-Lgrey);
}
body .main .navbar h1 {
font-family: Helvetica;
font-style: italic;
font-weight: lighter;
letter-spacing: 1px;
position: relative;
display: block;
padding: 10px 0;
}
body td span {
color: var(--txt-Dgrey);
}
/* body .wrapper .wrapper {
text-align: center;
}
*/
body .main .top:nth-child(1) {
margin: 0
}
body .main .navbar {
padding: 1% 3%;
height: 100%;
}
body .main .navbar,
body .main .navbar2 {
box-shadow: 0px 20px 40px rgba(0, 0, 10, .5)
}
body .main .navbar2 {
padding: 1% 2%
}
body .main > .content {
padding: 4% 0
}
body .wrapper .wrapper > center:nth-child(4) {
width: 70%;
margin: 0 auto;
font-size: 16px;
}
body .wrapper .wrapper > center:nth-child(2) font,
body .wrapper .wrapper > center:nth-child(4) font {
font-weight: 100;
}
body .wrapper .wrapper > center:nth-child(4) font {
font-size: 20px;
}
body .wrapper .wrapper strong {
display: block;
padding-bottom: 30px;
}
/* .wrapper > div > table.tborder {
display: none;
}
*/
.wrapper .wrapper {
background-color: var(--box-char);
box-shadow: 0 10px 50px var(--shadow);
padding: 3%;
border-radius: 10px;
margin-bottom: 50px;
}
.wrapper center font:nth-child(2) {
color: var(--pin-y);
}
}
@-moz-document domain("io-oi.xyz"),
domain("leg.xyz") {
/* --------------------------- */
/* ARCHIVE HEADER LINKS COLORS */
/* --------------------------- */
body .main .top:nth-child(4) a:nth-child(3) span,
body .main .top:nth-child(4) a:nth-child(4) span {
background-color: var(--box-R) !important;
transition: var(--smooth-bg);
}
body .main .top:nth-child(4) a:hover:nth-child(3) span,
body .main .top:nth-child(4) a:focus:nth-child(3) span,
body .main .top:nth-child(4) a:hover:nth-child(4) span,
body .main .top:nth-child(4) a:focus:nth-child(4) span {
background-color: rgba(200, 20, 20, .5) !important;
transition: var(--smooth-bg);
}
body .main .top:nth-child(4) a:nth-child(1) span:nth-child(2),
body .main .top:nth-child(4) a:nth-child(2) span {
background-color: var(--txt-Dblue) !important;
transition: var(--smooth-bg);
}
body .main .top:nth-child(4) a:hover:nth-child(1) span:nth-child(2),
body .main .top:nth-child(4) a:focus:nth-child(1) span:nth-child(2),
body .main .top:nth-child(4) a:hover:nth-child(2) span,
body .main .top:nth-child(4) a:focus:nth-child(2) span {
background-color: rgba(80, 100, 200, .5) !important;
transition: var(--smooth-bg);
}
body center:nth-of-type(2) font {
color: var(--fav-R) !important;
}
hr {
margin: 6%
}
body .navigation .active {
color: var(--box-blu);
font-size: 20px;
font-weight: 100;
padding: 10px 2%;
}
body .pm_alert {
color: var(--txt-G);
background-color: var(--box-G);
border: 1px...