errilaz/98se.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move to docs/

Browse source
This commit is contained in:
Jordan Scales 2020-04-17 13:13:16 -04:00
parent fd9da1b476
commit f1666930d6
5 changed files with 199 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

268
style.css
View file

@ -1,134 +1,134 @@
:root {
/* Color */
--surface: #c0c0c0;
--button-highlight: #ffffff;
--button-face: #dfdfdf;
--button-shadow: #808080;
--window-frame: #0a0a0a;
--dialog-blue: #000080;
--dialog-blue-light: #1084d0;
/* Borders */
--border-raised-outer: inset -1px -1px var(--window-frame),
inset 1px 1px var(--button-highlight);
--border-raised-inner: inset -2px -2px var(--button-shadow),
inset 2px 2px var(--button-face);
--border-sunken-outer: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--window-frame);
--border-sunken-inner: inset -2px -2px var(--button-face),
inset 2px 2px var(--button-shadow);
}
* {
/* Hmmmm... how can I make these a webfont */
font-family: "MS Sans Serif", Arial;
font-size: 11px;
-webkit-font-smoothing: none;
color: #222222;
}
u {
text-decoration: none;
border-bottom: 0.5px solid #222222;
}
button {
box-sizing: border-box;
border: none;
background: var(--surface);
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
min-width: 75px;
min-height: 23px;
}
button:active {
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
}
button:focus {
outline: 1px dotted #000000;
outline-offset: -4px;
}
.dialog {
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
background: var(--surface);
padding: 1px;
}
.dialog .header {
background: linear-gradient(
90deg,
var(--dialog-blue),
var(--dialog-blue-light)
);
margin: 2px;
padding: 2px;
display: flex;
justify-content: space-between;
align-items: center;
}
.dialog .header .title {
font-weight: bold;
color: white;
letter-spacing: 0.1ch;
margin-right: 24px;
}
.dialog .header .controls {
display: flex;
}
.dialog .header .controls button {
display: block;
min-width: 14px;
min-height: 12px;
}
.dialog .header .controls button:focus {
outline: none;
}
.dialog .header .controls button[aria-label="Minimize"] {
background-image: url("./minimize.svg");
background-repeat: no-repeat;
background-position: bottom 2px left 3px;
}
.dialog .header .controls button[aria-label="Maximize"] {
background-image: url("./maximize.svg");
background-repeat: no-repeat;
/* Off by 1px because contents can't go above the inner shadow */
/* Should be 9px by 9px, with top 1px */
background-position: top 2px left 2px;
}
.dialog .header .controls button[aria-label="Close"] {
margin-left: 2px;
background-image: url("./close.svg");
background-repeat: no-repeat;
background-position: top 2px center;
}
.dialog .body {
margin: 12px 8px 8px;
}
.dialog .body > * + * {
margin-top: 8px;
}
section.align-right {
text-align: right;
}
section button + button {
margin-left: 4px;
}
:disabled {
color: var(--button-shadow);
text-shadow: 1px 1px 0 var(--button-highlight);
}
:root {
/* Color */
--surface: #c0c0c0;
--button-highlight: #ffffff;
--button-face: #dfdfdf;
--button-shadow: #808080;
--window-frame: #0a0a0a;
--dialog-blue: #000080;
--dialog-blue-light: #1084d0;
/* Borders */
--border-raised-outer: inset -1px -1px var(--window-frame),
inset 1px 1px var(--button-highlight);
--border-raised-inner: inset -2px -2px var(--button-shadow),
inset 2px 2px var(--button-face);
--border-sunken-outer: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--window-frame);
--border-sunken-inner: inset -2px -2px var(--button-face),
inset 2px 2px var(--button-shadow);
}
* {
/* Hmmmm... how can I make these a webfont */
font-family: "MS Sans Serif", Arial;
font-size: 11px;
-webkit-font-smoothing: none;
color: #222222;
}
u {
text-decoration: none;
border-bottom: 0.5px solid #222222;
}
button {
box-sizing: border-box;
border: none;
background: var(--surface);
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
min-width: 75px;
min-height: 23px;
}
button:active {
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
}
button:focus {
outline: 1px dotted #000000;
outline-offset: -4px;
}
.dialog {
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
background: var(--surface);
padding: 1px;
}
.dialog .header {
background: linear-gradient(
90deg,
var(--dialog-blue),
var(--dialog-blue-light)
);
margin: 2px;
padding: 2px;
display: flex;
justify-content: space-between;
align-items: center;
}
.dialog .header .title {
font-weight: bold;
color: white;
letter-spacing: 0.1ch;
margin-right: 24px;
}
.dialog .header .controls {
display: flex;
}
.dialog .header .controls button {
display: block;
min-width: 14px;
min-height: 12px;
}
.dialog .header .controls button:focus {
outline: none;
}
.dialog .header .controls button[aria-label="Minimize"] {
background-image: url("./minimize.svg");
background-repeat: no-repeat;
background-position: bottom 2px left 3px;
}
.dialog .header .controls button[aria-label="Maximize"] {
background-image: url("./maximize.svg");
background-repeat: no-repeat;
/* Off by 1px because contents can't go above the inner shadow */
/* Should be 9px by 9px, with top 1px */
background-position: top 2px left 2px;
}
.dialog .header .controls button[aria-label="Close"] {
margin-left: 2px;
background-image: url("./close.svg");
background-repeat: no-repeat;
background-position: top 2px center;
}
.dialog .body {
margin: 12px 8px 8px;
}
.dialog .body > * + * {
margin-top: 8px;
}
section.align-right {
text-align: right;
}
section button + button {
margin-left: 4px;
}
:disabled {
color: var(--button-shadow);
text-shadow: 1px 1px 0 var(--button-highlight);
}