mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-11 08:24:12 +02:00
Code Issues Releases Wiki Activity

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

6
close.svg
View File

@@ -1,3 +1,3 @@
<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
</svg>
<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 270 B

After

Width:  |  Height:  |  Size: 273 B

112
index.html → docs/index.html
View File

@@ -1,56 +1,56 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css?t=1"></style>
<style>
body {
height: 100vh;
margin: 0;
padding: 0;
background: var(--dialog-blue);
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="dialog">
<div class="header">
<div class="title">
Windows 98 Example
</div>
<div class="controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="body">
<section>This is an example window with some controls.</section>
<fieldset>
<legend>I think it's</legend>
<input type="radio" name="answer" value="cool">
<label for="male">Cool</label>
<input type="radio" name="answer" value="meh">
<label for="female">Meh</label>
<label for="reason">Reason:</label>
<select>
<option>Nostalgia</option>
<option>It looks sharp</option>
<option>It's confusing</option>
<option>It looks dated</option>
</select>
</fieldset>
<section class="align-right">
<button>OK</button>
<button>Cancel</button>
</section>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/style.css?t=1"></style>
<style>
body {
height: 100vh;
margin: 0;
padding: 0;
background: var(--dialog-blue);
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="dialog">
<div class="header">
<div class="title">
Windows 98 Example
</div>
<div class="controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="body">
<section>This is an example window with some controls.</section>
<fieldset>
<legend>I think it's</legend>
<input type="radio" name="answer" value="cool">
<label for="male">Cool</label>
<input type="radio" name="answer" value="meh">
<label for="female">Meh</label>
<label for="reason">Reason:</label>
<select>
<option>Nostalgia</option>
<option>It looks sharp</option>
<option>It's confusing</option>
<option>It looks dated</option>
</select>
</fieldset>
<section class="align-right">
<button>OK</button>
<button>Cancel</button>
</section>
</div>
</div>
</body>
</html>

6
maximize.svg
View File

@@ -1,3 +1,3 @@
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z" fill="black"/>
</svg>
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z" fill="black"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 207 B

After

Width:  |  Height:  |  Size: 210 B

6
minimize.svg
View File

@@ -1,3 +1,3 @@
<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="6" height="2" fill="black"/>
</svg>
<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="6" height="2" fill="black"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 141 B

After

Width:  |  Height:  |  Size: 144 B

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);
}