diff --git a/close.svg b/close.svg index 419a57a..f63f894 100644 --- a/close.svg +++ b/close.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/index.html b/docs/index.html similarity index 92% rename from index.html rename to docs/index.html index 2206600..5be80ea 100644 --- a/index.html +++ b/docs/index.html @@ -1,56 +1,56 @@ - - - - - - - -
-
-
- Windows 98 Example -
- -
- - - -
-
-
-
This is an example window with some controls.
- -
- I think it's - - - - - - - -
- -
- - -
-
-
- - + + + + + + + +
+
+
+ Windows 98 Example +
+ +
+ + + +
+
+
+
This is an example window with some controls.
+ +
+ I think it's + + + + + + + +
+ +
+ + +
+
+
+ + diff --git a/maximize.svg b/maximize.svg index fa75444..ae54e68 100644 --- a/maximize.svg +++ b/maximize.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/minimize.svg b/minimize.svg index a676778..5483a34 100644 --- a/minimize.svg +++ b/minimize.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/style.css b/style.css index 362247a..2afcc16 100644 --- a/style.css +++ b/style.css @@ -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); +}