w9xcss/style.css
2024-12-23 01:09:36 +00:00

190 lines
3.1 KiB
CSS

@font-face {
font-family: "W95FA";
src: url(w95fa.woff);
font-display: swap;
}
@font-face {
font-family: "MS Sans Serif";
src: url(mssansserif.ttf);
font-display: swap;
}
.container {
display: flex;
min-height: 65vh;
margin: 0;
flex-direction: column;
background: #c0c0c0;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #808080;
border-bottom: 2px solid #808080;
}
.border {
border-top: 2px solid #c0c0c0;
border-left: 2px solid #c0c0c0;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
margin-left: 200px;
margin-right: 200px;
margin-top: 15vh;
padding: 0;
justify-content: center;
}
.border-button {
display: inline;
float: right;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
margin: 0;
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
padding: 0;
}
.button-border {
display: inline-block;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
padding: 0;
margin: 0;
}
.button-border:active {
border-top: 2px solid #808080;
border-left: 2px solid #808080;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
button {
background-color: #c0c0c0;
border: none;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
font-family: "W95FA";
font-size: 150%;
padding: 0.1em;
padding-left: 0.3em;
padding-right: 0.3em;
}
button:active {
border: none;
border-left: 2px solid #000;
border-top: 2px solid #000;
}
body {
margin: 1em;
background: #008080;
}
.header {
padding: 0;
margin: 0;
margin-top: 5px;
margin-left: 2px;
margin-right: 1px;
color: #fff;
background: #000080;
}
.header h1 {
font-family: "W95FA";
float: left;
display: inline;
margin: 0;
margin-left: 0.15em;
margin-top: 0.35em;
padding: 2px;
padding-bottom: 5px;
font-size: 160%;
}
.header .header-button {
width: 2em;
border-bottom: 2px solid #808080;
border-right: 2px solid #808080;
text-align: center;
background: #c0c0c0;
color: #000;
}
.header .header-button #minimise {
transform: translateY(0.5em);
}
.header .header-button #maximise {
transform: translateY(0.2em);
}
.header .header-button #close {
transform: translateY(0.1em);
}
.header .header-button p {
font-family: "MS Sans Serif";
margin: 0;
font-size: 160%;
}
.header .header-button img {
margin: 0;
min-height: 100%;
align: center;
min-width: 100%;
}
.formarea {
display: flex;
flex-direction: column;
flex: 1;
padding-top: 0;
margin: 0.2em;
}
.content {
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
font-family: "W95FA";
}
.ribbon {
padding-top: 3px;
padding-bottom: 3px;
font-size: 110%;
font-family: "W95FA";
min-width: 1%;
max-height: 3.2em;
background: #ece9d8;
border: 1px solid #fff;
border-right: 1px solid #aca899;
border-bottom: 2px solid #aca899;
}
.ribbon .link {
display: inline;
margin: 0;
color: #000;
}
.ribbon .bar {
color: #aca899;
display: inline;
margin: 0;
}
.ribbon #first {
padding-left: 0.5em;
}