SkunkyArt/static/css/skunky.css

200 lines
3.2 KiB
CSS
Raw Permalink Normal View History

2024-07-13 18:32:04 +00:00
/* TAGS */
html {
2024-07-13 18:32:04 +00:00
font-family: Ubuntu;
background-color:black;
color: rgb(234, 216, 216);
}
a {
text-decoration: none;
color: cadetblue;
}
a:hover {
2024-07-13 18:32:04 +00:00
color: #d0ff00;
transition: 400ms;
}
header h1 {
padding-right: 0.2%;
padding-left: 0.2%;
}
header form {
align-self: center;
}
2024-09-23 06:38:32 +00:00
header, form {
display: flex;
}
form {
border: solid #164e3e 1px;
max-width: fit-content;
}
form input, button, select {
background-color: #134134;
padding: 5px;
color: whitesmoke;
border: 0;
}
input:focus {
outline: none;
}
2024-07-13 18:32:04 +00:00
/* BLOCKS */
.content {
align-items: center;
border-radius: 3px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.block {
max-width: 20%;
height: 0%;
padding: 4px;
border-radius: 2px;
border: 3px solid #091f19;
word-break: break-all;
background-color: #091f19;
margin-left: 5px;
margin-top: 5px;
text-align: center;
}
.block:hover {
border: 3px solid #4d27d6;
transition: 400ms;
}
2024-07-13 18:32:04 +00:00
.block img, .plates .user-plate img {
width: 100%;
}
.block p {
word-break: break-all;
}
2024-07-13 18:32:04 +00:00
/* MESSAGES */
.msg {
background-color: #091f19;
color: whitesmoke;
width: fit-content;
max-width: 90%;
padding: 4px;
border-radius: 2px;
margin-top: 6px;
text-wrap: pretty;
transition: 350ms;
}
2024-07-13 18:32:04 +00:00
.msg:hover {
background-color: #134134;
}
2024-07-13 18:32:04 +00:00
.reply {
border-radius: 0px 2px 2px 0px;
border-left: #258268 solid;
margin-left: 40px;
}
/* FOLDER & PLATES */
.folders, .plates {
display: flex;
flex-wrap: wrap;
}
.folder-item {
background-color: #060820;
border: 3px solid #060820;
2024-07-13 18:32:04 +00:00
width: 10%
}
2024-07-09 09:54:15 +00:00
.admins .user-plate {
width: 5%;
background-color: #011522;
2024-07-09 09:54:15 +00:00
}
.plates .user-plate {
margin-left: 1%;
2024-07-13 18:32:04 +00:00
margin-bottom: 1%;
2024-07-09 09:54:15 +00:00
background-color: #091f19;
padding: 3px;
word-break: break-all;
text-align: center;
2024-07-09 09:54:15 +00:00
max-width: 15%;
}
2024-07-13 18:32:04 +00:00
/* USER/GROUP BACKGROUNDS */
.ubg {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ubg img {
width: 20%;
}
/* COLORS */
.nsfw, .about-false {
color: red;
}
.about-true {
color: green;
}
.author {
color: seagreen;
}
.dd {
color: rgb(160, 0, 147);
}
/* SCREEN OPTIMISATIONS */
@media (orientation: portrait) {
* {
font-size: 120%
}
ul {
font-size: 80%
}
2024-09-23 06:38:32 +00:00
header {
margin-left: 3%;
text-align: center;
2024-09-23 06:38:32 +00:00
display: inline-block;
clear: both;
font-size: 200%;
}
2024-09-23 06:38:32 +00:00
form {
font-size: 60%;
border: solid #164e3e 5px;
}
.content {
margin: auto;
display: inherit;
scale: 100%;
}
.block {
margin-top: 10%;
max-width: 200%;
}
.folder-item {
width: 25%
}
.folders {
display: flexbox;
justify-content: center
}
figure img {
width: 10%
}
figure a img {
width: 100%
}
.msg {
font-size: 60%;
max-width: 80%
}
}
@media (max-width: 1462px) and (orientation: landscape) {
.block {
max-width: 30%;
}
}
@media (min-width: 788px) and (max-width: 884px) {
.block {
max-width: 35%;
}
}