Add dirthpath css
parent
834cc48115
commit
25bbdfb23c
|
@ -0,0 +1,271 @@
|
|||
/* pywal */
|
||||
:root {
|
||||
/* Special */
|
||||
--background: #0b0904;
|
||||
--foreground: #fffae1;
|
||||
--cursor: #fffae1;
|
||||
|
||||
/* Colors */
|
||||
--color0: #0b0904;
|
||||
--color1: #885E37;
|
||||
--color2: #5D4F19;
|
||||
--color3: #8E714F;
|
||||
--color4: #6C5C46;
|
||||
--color5: #6B5132;
|
||||
--color6: #57452C;
|
||||
--color7: #cdbeab;
|
||||
--color8: #31270f;
|
||||
--color9: #bd793b;
|
||||
--color10: #806b18;
|
||||
--color11: #c69458;
|
||||
--color12: #97794f;
|
||||
--color13: #956a36;
|
||||
--color14: #795b30;
|
||||
--color15: #fffae1;
|
||||
|
||||
--color8-transparent: #31270fcc;
|
||||
--color9-darker: #9f642f;
|
||||
--background-transparent: #0b0904cf;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: JetBrains;
|
||||
src: url('/fonts/JetBrainsMono-Regular.otf');
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: JetBrains;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: auto;
|
||||
background-color: var(--background);
|
||||
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 100%), url("/image/dirt-path.jpeg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
opacity: 0.9;
|
||||
color: var(--color9);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
div.form {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea,
|
||||
.header {
|
||||
background: var(--background);
|
||||
color: var(--color9);
|
||||
border-color: var(--background);
|
||||
}
|
||||
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="text"]:hover,
|
||||
textarea:hover,
|
||||
#container {
|
||||
background-color: var(--color8);
|
||||
}
|
||||
|
||||
a.x:link,
|
||||
a.x:visited,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: var(--color11);
|
||||
}
|
||||
a.end:link,
|
||||
a.end:visited,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--color9);
|
||||
margin: auto;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--color1);
|
||||
}
|
||||
a:active {
|
||||
color: purple;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
padding: 5px 15px;
|
||||
background-color: var(--background);
|
||||
color: var(--color9);
|
||||
border: 0 none;
|
||||
cursor: pointer;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
quote {
|
||||
background-color: var(--color8);
|
||||
color: var(--color9);
|
||||
}
|
||||
spoiler {
|
||||
background-color: var(--color9);
|
||||
color: var(--color9);
|
||||
}
|
||||
spoiler:hover {
|
||||
color: var(--color9);
|
||||
background-color: var(--background);
|
||||
}
|
||||
.subcontainer {
|
||||
display: grid;
|
||||
grid-gap: 5px;
|
||||
grid-template-columns: repeat(autofit, minmax(100px, 1fr));
|
||||
grid-template-rows: repeat(2, 100px);
|
||||
}
|
||||
|
||||
.subs table,
|
||||
th,
|
||||
td {
|
||||
background: var(--color8);
|
||||
border: 5px var(--color9) solid;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.postcontainer {
|
||||
display: grid;
|
||||
grid-gap: 25px;
|
||||
grid-template-columns: repeat(1, 100%);
|
||||
}
|
||||
|
||||
.post {
|
||||
display: table;
|
||||
padding: 25px;
|
||||
margin-left: 250px;
|
||||
margin-right: 150px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: var(--color8-transparent);
|
||||
font-size: normal;
|
||||
font-family: JetBrains;
|
||||
border: 2px var(--color9) solid;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.post:hover,
|
||||
.postreply:hover,
|
||||
.postreply2:hover {
|
||||
background-color: var(--background);
|
||||
}
|
||||
.postreply {
|
||||
display: table;
|
||||
padding: 15px;
|
||||
margin-left: 35px;
|
||||
margin-right: 150px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
background: var(--color8-transparent);
|
||||
font-family: JetBrains;
|
||||
border: 1px var(--color9) solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.postreply2 {
|
||||
display: table;
|
||||
padding: 15px;
|
||||
margin-left: 350px;
|
||||
margin-right: 150px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
background: var(--color8-transparent);
|
||||
font-family: JetBrains;
|
||||
border: 1px var(--color9) solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.newpost table,
|
||||
th,
|
||||
td {
|
||||
background: var(--background);
|
||||
border: 3px var(--background) solid;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#footer {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
background: var(--background);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
width: 33.33333%;
|
||||
text-align: left;
|
||||
}
|
||||
.aligncenter {
|
||||
background: var(--background);
|
||||
position: fixed;
|
||||
left: 33%;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
width: 33.33333%;
|
||||
text-align: center;
|
||||
}
|
||||
.alignright {
|
||||
background: var(--background);
|
||||
position: fixed;
|
||||
left: 66%;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
width: 33.33333%;
|
||||
text-align: right;
|
||||
}
|
||||
details {
|
||||
color: var(--color9-darker);
|
||||
background-color: var(--background-transparent);
|
||||
font-size: medium;
|
||||
margin-left: 350px;
|
||||
padding: 0.5em 0.5em 0;
|
||||
transition: margin 350ms ease-out;
|
||||
}
|
||||
|
||||
summary {
|
||||
font-weight: bold;
|
||||
margin: -0.5em -0.5em 0;
|
||||
padding: 0.5em;
|
||||
transition: margin 250ms ease-out;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
color: var(--color9-darker);
|
||||
font-size: medium;
|
||||
margin-bottom: 10pt;
|
||||
animation: open .1s ease;
|
||||
}
|
||||
|
||||
@keyframes open {
|
||||
0% {
|
||||
opacity: 0;
|
||||
margin-left: 150px
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
margin-left: 0px
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue