mirror of
https://github.com/jdan/98.css.git
synced 2025-08-11 16:34:04 +02:00
move to docs/
This commit is contained in:
Jordan Scales
@@ -1,3 +1,3 @@
|
|||||||
<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/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"/>
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 270 B After Width: | Height: | Size: 273 B |
@@ -1,56 +1,56 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="./style.css?t=1"></style>
|
<link rel="stylesheet" href="/style.css?t=1"></style>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: var(--dialog-blue);
|
background: var(--dialog-blue);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="dialog">
|
<div class="dialog">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
Windows 98 Example
|
Windows 98 Example
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button aria-label="Minimize"></button>
|
<button aria-label="Minimize"></button>
|
||||||
<button aria-label="Maximize"></button>
|
<button aria-label="Maximize"></button>
|
||||||
<button aria-label="Close"></button>
|
<button aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<section>This is an example window with some controls.</section>
|
<section>This is an example window with some controls.</section>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>I think it's</legend>
|
<legend>I think it's</legend>
|
||||||
<input type="radio" name="answer" value="cool">
|
<input type="radio" name="answer" value="cool">
|
||||||
<label for="male">Cool</label>
|
<label for="male">Cool</label>
|
||||||
<input type="radio" name="answer" value="meh">
|
<input type="radio" name="answer" value="meh">
|
||||||
<label for="female">Meh</label>
|
<label for="female">Meh</label>
|
||||||
|
|
||||||
<label for="reason">Reason:</label>
|
<label for="reason">Reason:</label>
|
||||||
<select>
|
<select>
|
||||||
<option>Nostalgia</option>
|
<option>Nostalgia</option>
|
||||||
<option>It looks sharp</option>
|
<option>It looks sharp</option>
|
||||||
<option>It's confusing</option>
|
<option>It's confusing</option>
|
||||||
<option>It looks dated</option>
|
<option>It looks dated</option>
|
||||||
</select>
|
</select>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<section class="align-right">
|
<section class="align-right">
|
||||||
<button>OK</button>
|
<button>OK</button>
|
||||||
<button>Cancel</button>
|
<button>Cancel</button>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/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"/>
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z" fill="black"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 207 B After Width: | Height: | Size: 210 B |
@@ -1,3 +1,3 @@
|
|||||||
<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/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"/>
|
<rect width="6" height="2" fill="black"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 141 B After Width: | Height: | Size: 144 B |
268
style.css
268
style.css
@@ -1,134 +1,134 @@
|
|||||||
:root {
|
:root {
|
||||||
/* Color */
|
/* Color */
|
||||||
--surface: #c0c0c0;
|
--surface: #c0c0c0;
|
||||||
--button-highlight: #ffffff;
|
--button-highlight: #ffffff;
|
||||||
--button-face: #dfdfdf;
|
--button-face: #dfdfdf;
|
||||||
--button-shadow: #808080;
|
--button-shadow: #808080;
|
||||||
--window-frame: #0a0a0a;
|
--window-frame: #0a0a0a;
|
||||||
--dialog-blue: #000080;
|
--dialog-blue: #000080;
|
||||||
--dialog-blue-light: #1084d0;
|
--dialog-blue-light: #1084d0;
|
||||||
|
|
||||||
/* Borders */
|
/* Borders */
|
||||||
--border-raised-outer: inset -1px -1px var(--window-frame),
|
--border-raised-outer: inset -1px -1px var(--window-frame),
|
||||||
inset 1px 1px var(--button-highlight);
|
inset 1px 1px var(--button-highlight);
|
||||||
--border-raised-inner: inset -2px -2px var(--button-shadow),
|
--border-raised-inner: inset -2px -2px var(--button-shadow),
|
||||||
inset 2px 2px var(--button-face);
|
inset 2px 2px var(--button-face);
|
||||||
--border-sunken-outer: inset -1px -1px var(--button-highlight),
|
--border-sunken-outer: inset -1px -1px var(--button-highlight),
|
||||||
inset 1px 1px var(--window-frame);
|
inset 1px 1px var(--window-frame);
|
||||||
--border-sunken-inner: inset -2px -2px var(--button-face),
|
--border-sunken-inner: inset -2px -2px var(--button-face),
|
||||||
inset 2px 2px var(--button-shadow);
|
inset 2px 2px var(--button-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
/* Hmmmm... how can I make these a webfont */
|
/* Hmmmm... how can I make these a webfont */
|
||||||
font-family: "MS Sans Serif", Arial;
|
font-family: "MS Sans Serif", Arial;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
-webkit-font-smoothing: none;
|
-webkit-font-smoothing: none;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
}
|
}
|
||||||
|
|
||||||
u {
|
u {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-bottom: 0.5px solid #222222;
|
border-bottom: 0.5px solid #222222;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: none;
|
border: none;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||||
|
|
||||||
min-width: 75px;
|
min-width: 75px;
|
||||||
min-height: 23px;
|
min-height: 23px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active {
|
button:active {
|
||||||
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
|
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus {
|
button:focus {
|
||||||
outline: 1px dotted #000000;
|
outline: 1px dotted #000000;
|
||||||
outline-offset: -4px;
|
outline-offset: -4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog {
|
.dialog {
|
||||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .header {
|
.dialog .header {
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
90deg,
|
90deg,
|
||||||
var(--dialog-blue),
|
var(--dialog-blue),
|
||||||
var(--dialog-blue-light)
|
var(--dialog-blue-light)
|
||||||
);
|
);
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .header .title {
|
.dialog .header .title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: white;
|
color: white;
|
||||||
letter-spacing: 0.1ch;
|
letter-spacing: 0.1ch;
|
||||||
margin-right: 24px;
|
margin-right: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .header .controls {
|
.dialog .header .controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .header .controls button {
|
.dialog .header .controls button {
|
||||||
display: block;
|
display: block;
|
||||||
min-width: 14px;
|
min-width: 14px;
|
||||||
min-height: 12px;
|
min-height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .header .controls button:focus {
|
.dialog .header .controls button:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .header .controls button[aria-label="Minimize"] {
|
.dialog .header .controls button[aria-label="Minimize"] {
|
||||||
background-image: url("./minimize.svg");
|
background-image: url("./minimize.svg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: bottom 2px left 3px;
|
background-position: bottom 2px left 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .header .controls button[aria-label="Maximize"] {
|
.dialog .header .controls button[aria-label="Maximize"] {
|
||||||
background-image: url("./maximize.svg");
|
background-image: url("./maximize.svg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
/* Off by 1px because contents can't go above the inner shadow */
|
/* Off by 1px because contents can't go above the inner shadow */
|
||||||
/* Should be 9px by 9px, with top 1px */
|
/* Should be 9px by 9px, with top 1px */
|
||||||
background-position: top 2px left 2px;
|
background-position: top 2px left 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .header .controls button[aria-label="Close"] {
|
.dialog .header .controls button[aria-label="Close"] {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
background-image: url("./close.svg");
|
background-image: url("./close.svg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: top 2px center;
|
background-position: top 2px center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .body {
|
.dialog .body {
|
||||||
margin: 12px 8px 8px;
|
margin: 12px 8px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog .body > * + * {
|
.dialog .body > * + * {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.align-right {
|
section.align-right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
section button + button {
|
section button + button {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:disabled {
|
:disabled {
|
||||||
color: var(--button-shadow);
|
color: var(--button-shadow);
|
||||||
text-shadow: 1px 1px 0 var(--button-highlight);
|
text-shadow: 1px 1px 0 var(--button-highlight);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user