wah.moe/public/css/master-legacy.css
2025-07-03 22:41:19 +01:00

308 lines
4.9 KiB
CSS

table, td, th {
/*border: red 2px solid*/
}
/* ───────────────────────────────────── Global ───────────────────────────────────── */
html {
height: 100%;
color-scheme: light;
scrollbar-color: #f27405 #f2efbd;
}
body {
color: #2a271c;
min-height: 100%;
background-color: hsla(0, 0%, 0%, 0);
padding: 10px;
font-family: "PT Serif";
}
/*body::before {*/
/* content: "";*/
/* position: fixed;*/
/* top: 0;*/
/* left: 0;*/
/* background-image: url("/images/background.jpg");*/
/* width: 100%;*/
/* height: 100%;*/
/* z-index: -1;*/
/* opacity: 0.8;*/
/* background-size: cover;*/
/* background-attachment: fixed;*/
/* overflow: hidden;*/
/*}*/
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 20px 0 0 0;
}
p,
ul,
ol,
dl,
menu,
dir {
margin: 0;
}
hr {
border: none;
border-top: #f27405 2px solid;
}
a {
color: #374729;
text-decoration: underline dotted;
}
a:hover {
color: #26311c;
text-decoration: underline solid;
}
div.page-container {
width: 800px;
margin: 5px auto;
}
div.page-container table.section {
background-color: #f2efbd;
border: #f27405 2px solid;
margin-bottom: 20px;
}
div.page-container > div:last-child {
margin-bottom: 0;
}
table.section {
width: 100%;
}
table#header td.logo {
width: 75px;
}
table#header h1,
h2.gb-legacy-warn{
margin: 0;
}
table#header td {
vertical-align: center;
}
td.fullwidth {
width: 100%;
}
a img {
border:none;
}
td.footer-buttons {
text-align: right;
}
/** ------- **/
header {
display: grid;
grid-template-columns: 66px 1fr;
grid-template-rows: 1fr;
grid-column-gap: 15px;
grid-row-gap: 0;
align-items: center;
}
header img {
margin-right: 10px;
image-rendering: pixelated;
}
header h1 {
margin: 0;
font-style: italic;
}
header h1,
header p {
display: inline;
}
main>div {
position: relative;
}
main>div::after {
display: block;
content: "";
clear: both;
}
div#footer {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
align-items: center;
}
div#footer div:last-child {
text-align: right;
}
div#footer div:last-child img {
image-rendering: pixelated;
margin: 0;
padding: 0;
width: 88px;
height: 31px;
}
/** Wah! **/
div.wah {
float: right;
border: #f27405 2px solid;
padding: 5px;
background-color: #f2efbd;
}
div.wah img {
display: block;
}
div.wah h3,
div.wah p {
text-align: center;
margin: 5px 0;
font-style: italic;
}
div.wah p {
margin-bottom: 0;
}
div.wah img {
width: 250px;
}
/** Guestbook **/
table.form input,
table.form textarea,
table.form button {
background-color: #f2efbd;
border: #f27405 2px solid;
}
table.form input,
table.form textarea {
width: 250px;
}
table.form textarea {
resize: none;
}
table.form button:hover {
background-color: #f27405;
color: #f2efbd;
filter: none;
}
table.form tr td,
table.gb-entry-form-container td:last-child {
vertical-align: top;
}
div.gb-entry {
border: #f27405 2px solid;
background-color: #f2efbd;
width: 75%;
padding: 10px;
}
/** Music **/
table.music-top10 {
border: #f27405 2px solid;
background-color: #f2efbd;
border-collapse: collapse;
}
table.music-top10 th,
table.music-top10 td {
padding: 2px 5px;
}
table.music-top10 th:first-child {
text-align: left;
}
table.music-top10 tr:first-child th {
border-right: #f27405 2px solid;
border-bottom: #f27405 2px solid;
}
table.music-top10 tr:first-child th:last-child {
border-right: none;
}
table.music-top10 tr td {
border-right: #f27405 2px solid;
}
table.music-top10 tr td:last-child {
border-right: none;
}
table.music-top10 tr:first-child th,
table.music-top10 tr td:first-child {
background-color: #d72b04;
}
div.current-track {
display: grid;
grid-template-columns: 180px auto;
grid-template-rows: 1fr;
grid-column-gap: 10px;
align-items: center;
}
div.current-track img {
float: left;
border: #f27405 2px solid;
width: 174px;
height: 174px;
}
/** Bookmarks **/
div.bookmark-category:first-child h2 {
margin: 0;
}
/* ────────────────────────────────── Rosco & Leko ────────────────────────────────── */
div.rosco-leko-gallery {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
div.rosco-leko-gallery > div {
border: #f27405 2px solid;
padding: 5px;
background-color: #f2efbd;
margin: 10px;
height: auto;
}
div.rosco-leko-gallery > div,
div.rosco-leko-gallery > div img {
max-width: 220px;
}