diff --git a/docs/docs.css b/docs/docs.css index 85442c2..723cb9f 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -1,14 +1,13 @@ @font-face { font-family: Geneva9; - src: url("fonts/FindersKeepers.ttf") + src: url("fonts/FindersKeepers.ttf"); } @font-face { font-family: Chicago_12; - src: url("fonts/ChiKareGo2.ttf"); + src: url("fonts/ChiKareGo2.ttf"); } - * { box-sizing: border-box; } @@ -22,7 +21,7 @@ body { .col-main { flex: 1; -} +} .col-complementary { flex: 1; @@ -59,7 +58,6 @@ h3 { font-size: 2em; } - .center { text-align: center; } @@ -84,7 +82,8 @@ h3 { margin-top: 20px; } -.modal-text, .alert-text { +.modal-text, +.alert-text { font-size: 1.2em; margin-top: 10px; } @@ -94,7 +93,6 @@ p { font-size: 0.9em; } - blockquote { margin: 0 0 20px; padding: 20px; @@ -128,7 +126,7 @@ pre { .btn.active { background: black; - border-radius:6px; + border-radius: 6px; color: white; font-family: Chicago_12; } @@ -173,4 +171,8 @@ pre { .scale-down { transform: scale(0.8); } -} \ No newline at end of file +} + +.gap2 { + gap: 10px; +} diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 168747a..ecff5db 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -18,7 +18,7 @@

-
+

Docs

@@ -53,20 +53,20 @@
- +

System.css

A design system for building retro -inspired interfaces

- +

Intro

System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.

- +

Fortunately, this library does not use any JavaScript and is compatible with any front-end framework of your choice. Most styles can also be overwritten to allow for deeper customization.

- +

Components

- +

Buttons

@@ -74,49 +74,49 @@ A button is a rounded rectangle that is named with text. Clicking a button performs the action described by the button's name.
— Apple HI Guidelines, p. 204
- +

A standard button measures 59px wide and 20px tall. We use the .btn class for these buttons

- + <%- example(` - - + + `)%> - +

When pressed, buttons invert. The button below is stimulated to be in the active state.

- + <%- example(` - + `)%> - +

Buttons can also have dynamic widths.

- + <%- example(` - + `)%> - +

Disabled buttons look the same as standard buttons, but with grey button text. Add the disabled attribute to use it.

- + <%- example(` - + `)%> - - + +
- - + +
- +

Radio Buttons

@@ -124,9 +124,9 @@ A radio button is a Macintosh control that displays a setting, either on or off, and is part of a group in which only one button can be on at a time.
— Apple HI Guidelines, p. 210
- +

Radio Buttons can be rendered by specifying a radio type on an input tag and assigning it a name.

- + <%- example(`
@@ -140,13 +140,13 @@
- + `)%> - - + +
- +

Checkboxes

@@ -155,9 +155,9 @@ checkbox is a square with label text next to it
— Apple HI Guidelines, p. 211
- +

Checkboxes can be rendered by specifying a checkbox type on an input tag and assigning it a name.

- + <%- example(`
@@ -171,14 +171,14 @@
- + `)%> - - + +
- - + +
@@ -187,11 +187,11 @@ icons that serve as the title of each menu
— Apple HI Guidelines, p. 52
- +

A menu bar consists of menu elements that name menu items and they typically have a dropdown menu associated with them.

- +

To create a menu bar we will use the .menu-bar class.

- + <%- example(`
  • @@ -230,9 +230,9 @@
`)%> - +

We can also manipulate a menu bar into a standard dropdown.

- + <%- example(`
  • @@ -248,17 +248,17 @@ `)%>
- - + +

Select Menu

A select menu can be used to create a drop-down list, typically used in forms.
- +

Select menus can be rendered using the select and option elements.

- + <%- example(` `)%> - +

By default the first option will be selected, but you can change that by adding the selected attribute to an option

- + <%- example(` `)%> - +

Other types of text are also supported

- + <%- example(`





-
+ `)%> - - + +
- - + +

Windows

Standard document windows have standard structural components. These components include the title bar, size box, close box, zoom box, - and scroll bars. Windows are designed for visual consistency across all monitors + and scroll bars. Windows are designed for visual consistency across all monitors
— Apple HI Guidelines, p. 134, 159
- - - + + +

Title Bar

- +
A standard title bar is at least 19px tall, has a close button, caption, and racing stripes.
- +

They're usually a part of a window. Title bars use the Chicago 12pt font.

- + <%- example(` - +
-
+

A Title Bar

- + `)%> - +

Title bars can look different depending on what they're intended for.

- + <%- example(` - +
-
+

Also a Title Bar

-
+

Dialog Title

- + `)%> - +

You can also set a title bar to be inactive by applying the .inactive-title-bar class

- + <%- example(` - +
-
- +
+

Inactive Title Bar

- +
- + `)%> - +
- - - + + +

Window Contents

- +
Document windows present a view into the content that people create and store.
— Apple HI Guidelines, p. 134
- +

This is a window (without stuff in it). To create a basic window, we simply use the .window class.

- + <%- example(` - +
-
+

Window Without Stuff

- + `)%> - - + +

This is a window with stuff in it. We can achieve this by simply adding a div with the .window-pane below the title bar.

- + <%- example(` - +
-
+

Window With Stuff

- +
Woo I got stuff in me!
- + `)%> - - - + + +

You can also add a details bar to a window by adding.details-bar below the title bar.

- + <%- example(` - +
-
+

Window With Details

@@ -443,19 +443,19 @@ more details
- +
Woo I got a details bar.
- + `)%> - +

You can also create an inactive window using an inactive title bar.

- + <%- example(`
-
+

Inactive Window

@@ -463,17 +463,17 @@ more details
- +
not active :(
`)%> - - + +
- +

Dialogs

@@ -482,35 +482,35 @@ computer can present alternatives from which the user can choose.
— Apple HI Guidelines, p. 176
- +

A basic dialog is just a box with text in it. We use the .standard-dialog class here.

- + <%- example(` - +

The Macintosh Finder, Version 1.0 (18 Jan 84)

© 1984 Apple Computer

- - + + `)%> - +

A modeless dialog box looks like a window without a size box, zoom box, or scroll bars.

- + <%- example(`
-
+

Modeless Dialog

- +
@@ -523,11 +523,11 @@
`)%> - +

We can also have a modal dialog box, which typically has some interactive component within it. It has a double-outline border. We achieve this by using a nested div. The outer div uses the .outer-border class and the .inner-border for the inner div.

- + <%- example(`
@@ -546,20 +546,20 @@
- +
- +
- +
`)%> - - + +
Alert boxes appear when the system software or an application needs to communicate information to the user. Alert boxes provide messages about @@ -567,52 +567,52 @@ actions
— Apple HI Guidelines, p. 176
- +

Like modal dialogs, alert boxes also have a double-outline frame. The empty square is where you'd place an icon.

- + <%- example(`
-

This is a standard alert box. The text would be placed here. +

This is a standard alert box. The text would be placed here. This is where more text appears

- +
- +
`)%>
- +

Contributing, Credits, etc.

- +

Thanks for checking this project out! This library was made in good fun and was largely inspired by 98.css. The Chicago 12pt and Geneva 9pt fonts are recreations by @blogmywiki

- +

System.css is still in beta! There's a few things that are currently missing that I incline on adding pretty soon. I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I've might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found here.

- +

If you find a bug, consider opening an issue here. If there's something that you'd like to add, please feel free to create a PR!

- +

If you'd like to see what else I'm up to, consider following me on Twitter or checking out my personal site :)

- +

Sponsors

- +

CSS Scan: The fastest and easiest way to check, copy and edit CSS

- +
- -

+ +

diff --git a/icon/dark-apple.svg b/icon/dark-apple.svg new file mode 100644 index 0000000..c95fc4d --- /dev/null +++ b/icon/dark-apple.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/icon/dark-button.png b/icon/dark-button.png new file mode 100644 index 0000000..5a886e5 Binary files /dev/null and b/icon/dark-button.png differ diff --git a/icon/dark-checkmark.svg b/icon/dark-checkmark.svg new file mode 100644 index 0000000..913e7c1 --- /dev/null +++ b/icon/dark-checkmark.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-radio-border-focused.svg b/icon/dark-radio-border-focused.svg new file mode 100644 index 0000000..a0fe878 --- /dev/null +++ b/icon/dark-radio-border-focused.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/icon/dark-radio-border.svg b/icon/dark-radio-border.svg new file mode 100644 index 0000000..47baa96 --- /dev/null +++ b/icon/dark-radio-border.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/icon/dark-radio-dot.svg b/icon/dark-radio-dot.svg new file mode 100644 index 0000000..4f30038 --- /dev/null +++ b/icon/dark-radio-dot.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icon/dark-scrollbar-down-active.svg b/icon/dark-scrollbar-down-active.svg new file mode 100644 index 0000000..c042a7b --- /dev/null +++ b/icon/dark-scrollbar-down-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-scrollbar-down.svg b/icon/dark-scrollbar-down.svg new file mode 100644 index 0000000..a5f41cd --- /dev/null +++ b/icon/dark-scrollbar-down.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-scrollbar-left-active.svg b/icon/dark-scrollbar-left-active.svg new file mode 100644 index 0000000..5c0e9f3 --- /dev/null +++ b/icon/dark-scrollbar-left-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-scrollbar-left.svg b/icon/dark-scrollbar-left.svg new file mode 100644 index 0000000..addb09a --- /dev/null +++ b/icon/dark-scrollbar-left.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-scrollbar-right-active.svg b/icon/dark-scrollbar-right-active.svg new file mode 100644 index 0000000..04fbf35 --- /dev/null +++ b/icon/dark-scrollbar-right-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-scrollbar-right.svg b/icon/dark-scrollbar-right.svg new file mode 100644 index 0000000..6a71e82 --- /dev/null +++ b/icon/dark-scrollbar-right.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-scrollbar-up-active.svg b/icon/dark-scrollbar-up-active.svg new file mode 100644 index 0000000..cd64e6e --- /dev/null +++ b/icon/dark-scrollbar-up-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-scrollbar-up.svg b/icon/dark-scrollbar-up.svg new file mode 100644 index 0000000..6ab3804 --- /dev/null +++ b/icon/dark-scrollbar-up.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark-select-button.svg b/icon/dark-select-button.svg new file mode 100644 index 0000000..871dcb0 --- /dev/null +++ b/icon/dark-select-button.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/style.css b/style.css index 4851976..846c9bc 100644 --- a/style.css +++ b/style.css @@ -40,31 +40,74 @@ } @font-face { font-family: Monaco; - src: url("fonts/monaco.ttf") + src: url("fonts/monaco.ttf"); } /* Fonts below are recreations by Giles Booth */ @font-face { font-family: Chicago_12; - src: url("fonts/ChiKareGo2.ttf"); + src: url("fonts/ChiKareGo2.ttf"); } @font-face { font-family: Geneva_9; - src: url("fonts/FindersKeepers.ttf") + src: url("fonts/FindersKeepers.ttf"); } + ::-webkit-scrollbar { width: 22px; background-color: #fff; } +.darkmode::-webkit-scrollbar { + width: 22px; + background-color: #000; +} ::-webkit-scrollbar-track { - background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); + background: linear-gradient( + 45deg, + #000 25%, + transparent 25%, + transparent 75%, + #000 75%, + #000 + ), + linear-gradient( + 45deg, + #000 25%, + transparent 25%, + transparent 75%, + #000 75%, + #000 + ); background-color: white; background-size: 4px 4px; background-position: 0 0, 2px 2px; width: 10px; border-left: 3px solid black; } +.darkmode::-webkit-scrollbar-track { + background: linear-gradient( + 45deg, + #fff 25%, + transparent 25%, + transparent 75%, + #fff 75%, + #fff + ), + linear-gradient( + 45deg, + #fff 25%, + transparent 25%, + transparent 75%, + #fff 75%, + #fff + ); + background-color: black; + background-size: 4px 4px; + background-position: 0 0, 2px 2px; + width: 10px; + border-left: 3px solid white; +} ::-webkit-scrollbar-thumb { width: 20px; @@ -73,6 +116,13 @@ border: 2px solid black; border-right: none; } +.darkmode::-webkit-scrollbar-thumb { + width: 20px; + box-sizing: content-box; + background-color: #000; + border: 2px solid white; + border-right: none; +} ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:horizontal:end:increment, @@ -86,55 +136,100 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-up.svg"); } +.darkmode::-webkit-scrollbar-button:vertical:start { + background-image: svg-load("./icon/dark-scrollbar-up.svg"); +} + ::-webkit-scrollbar-button:vertical:start:active { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-up-active.svg"); } +.darkmode::-webkit-scrollbar-button:vertical:start:active { + background-image: svg-load("./icon/dark-scrollbar-up-active.svg"); +} + ::-webkit-scrollbar-button:vertical:end { height: 23.38px; background-image: svg-load("./icon/scrollbar-down.svg"); } +.darkmode::-webkit-scrollbar-button:vertical:end { + background-image: svg-load("./icon/dark-scrollbar-down.svg"); +} + ::-webkit-scrollbar-button:vertical:end:active { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-down-active.svg"); } +.darkmode::-webkit-scrollbar-button:vertical:end:active { + background-image: svg-load("./icon/dark-scrollbar-down-active.svg"); +} ::-webkit-scrollbar-button:horizontal:start { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-left.svg"); } +.darkmode::-webkit-scrollbar-button:horizontal:start { + background-image: svg-load("./icon/dark-scrollbar-left.svg"); +} + ::-webkit-scrollbar-button:horizontal:start:active { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-left-active.svg"); } +.darkmode::-webkit-scrollbar-button:horizontal:start:active { + background-image: svg-load("./icon/dark-scrollbar-left-active.svg"); +} + ::-webkit-scrollbar-button:horizontal:end { height: 23.38px; background-image: svg-load("./icon/scrollbar-right.svg"); } +.darkmode::-webkit-scrollbar-button:horizontal:end { + background-image: svg-load("./icon/dark-scrollbar-right.svg"); +} + ::-webkit-scrollbar-button:horizontal:end:active { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-right-active.svg"); } +.darkmode::-webkit-scrollbar-button:horizontal:end:active { + background-image: svg-load("./icon/dark-scrollbar-right-active.svg"); +} body { - background: linear-gradient(90deg, #ffffff 21px, transparent 1%) center, linear-gradient(#ffffff 21px, transparent 1%) center, #000000; + background: linear-gradient(90deg, #ffffff 21px, transparent 1%) center, + linear-gradient(#ffffff 21px, transparent 1%) center, #000000; background-size: 22px 22px; background-attachment: fixed; } +.darkmode body { + background: linear-gradient(90deg, #000000 21px, transparent 1%) center, + linear-gradient(#000000 21px, transparent 1%) center, #ffffff; +} + +.darkmode body { + color: white; +} a { color: black; text-decoration: underline; } +.darkmode a { + color: white; +} hr { border-top: 0.15em solid #000; } +.darkmode hr { + border-top: 0.15em solid #fff; +} /*.container { width: 50%; @@ -167,14 +262,23 @@ h2 { box-shadow: var(--box-shadow); background-color: white; } +.darkmode .standard-dialog { + background-color: black; +} -.modal-dialog, .alert-box { +.modal-dialog, +.alert-box { width: auto; padding: 13px; background: #fff; } +.darkmode .modal-dialog, +.darkmode .alert-box { + background: #000; +} -.modal-contents, .alert-contents { +.modal-contents, +.alert-contents { padding: 10px; } @@ -197,6 +301,12 @@ h2 { border: 2px solid; padding: 3px; } +.darkmode .inner-border { + border-color: white; +} +.darkmode .outer-border { + border-color: white; +} /* title bar */ .title-bar { @@ -210,6 +320,11 @@ h2 { background-size: 6.6666666667% 13.3333333333%; background-clip: content-box; } +.darkmode .title-bar { + background: linear-gradient(#fff 50%, transparent 50%); + background-size: 6.6666666667% 13.3333333333%; + background-clip: content-box; +} .title-bar .title { padding: 0 0.5em; margin: 0 auto; @@ -221,6 +336,9 @@ h2 { cursor: default; font-family: Chicago_12; } +.darkmode .title-bar .title { + background: #000; +} .inactive-title-bar { flex: none; @@ -241,7 +359,7 @@ h2 { text-align: center; cursor: default; font-family: Chicago_12; - color:#A5A5A5; + color: #a5a5a5; } .title-bar button { @@ -255,13 +373,18 @@ h2 { cursor: pointer; transform: scale(0.5); } +.darkmode .title-bar button { + border: 4px solid #fff; + background-color: #000; +} .title-bar button span { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } -.title-bar button.close::before, .title-bar button.close::after { +.title-bar button.close::before, +.title-bar button.close::after { content: ""; position: absolute; top: 0; @@ -271,28 +394,65 @@ h2 { opacity: 0; } .title-bar button.close::before { - background: linear-gradient(#000 0%, #000 100%) left center, linear-gradient(#000 0%, #000 100%) right center, linear-gradient(#000 0%, #000 100%) center top, linear-gradient(#000 0%, #000 100%) center bottom; + background: linear-gradient(#000 0%, #000 100%) left center, + linear-gradient(#000 0%, #000 100%) right center, + linear-gradient(#000 0%, #000 100%) center top, + linear-gradient(#000 0%, #000 100%) center bottom; + background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%; + background-repeat: no-repeat; +} +.darkmode .title-bar button.close::before { + background: linear-gradient(#fff 0%, #fff 100%) left center, + linear-gradient(#fff 0%, #fff 100%) right center, + linear-gradient(#fff 0%, #fff 100%) center top, + linear-gradient(#fff 0%, #fff 100%) center bottom; background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%; background-repeat: no-repeat; } .title-bar button.close::after { - background: linear-gradient(#000 0%, #000 100%) left center, linear-gradient(#000 0%, #000 100%) right center, linear-gradient(#000 0%, #000 100%) center top, linear-gradient(#000 0%, #000 100%) center bottom; - background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%; + background: linear-gradient(#000 0%, #000 100%) left center, + linear-gradient(#000 0%, #000 100%) right center, + linear-gradient(#000 0%, #000 100%) center top, + linear-gradient(#000 0%, #000 100%) center bottom; + background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, + 3.6363636364px 22.5%, 3.6363636364px 22.5%; + background-repeat: no-repeat; + transform: rotate(45deg) scale(1.1); +} +.darkmode .title-bar button.close::after { + background: linear-gradient(#fff 0%, #fff 100%) left center, + linear-gradient(#fff 0%, #fff 100%) right center, + linear-gradient(#fff 0%, #fff 100%) center top, + linear-gradient(#fff 0%, #fff 100%) center bottom; + background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, + 3.6363636364px 22.5%, 3.6363636364px 22.5%; background-repeat: no-repeat; transform: rotate(45deg) scale(1.1); } -.title-bar button.close:active::before, .title-bar button.close:active::after { +.title-bar button.close:active::before, +.title-bar button.close:active::after { opacity: 1; } .title-bar button.resize { - background: linear-gradient(#000 0%, #000 100%) left 58%, linear-gradient(to bottom, #000 0%, #000 100%) 58% top; + background: linear-gradient(#000 0%, #000 100%) left 58%, + linear-gradient(to bottom, #000 0%, #000 100%) 58% top; background-size: 60% 4px, 4px 60%; background-repeat: no-repeat; background-color: #fff; } +.darkmode .title-bar button.resize { + background: linear-gradient(#fff 0%, #fff 100%) left 58%, + linear-gradient(to bottom, #fff 0%, #fff 100%) 58% top; + background-size: 60% 4px, 4px 60%; + background-repeat: no-repeat; + background-color: #000; +} .title-bar button.resize:active { background: #fff; } +.darkmode .title-bar button.resize:active { + background: #000; +} .title-bar button.hidden { visibility: hidden; } @@ -306,6 +466,10 @@ h2 { border: 0.1em solid #000; font-family: "Inconsolata", Menlo, Chicago, Geneva; } +.darkmode .window { + background-color: #000; + border: 0.1em solid #fff; +} .window-pane { overflow-y: scroll; height: 100%; @@ -318,14 +482,56 @@ h2 { width: 22px; background-color: #fff; } +.darkmode .window-pane::-webkit-scrollbar { + width: 22px; + background-color: #000; +} .window-pane::-webkit-scrollbar-track { - background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); + background: linear-gradient( + 45deg, + #000 25%, + transparent 25%, + transparent 75%, + #000 75%, + #000 + ), + linear-gradient( + 45deg, + #000 25%, + transparent 25%, + transparent 75%, + #000 75%, + #000 + ); background-color: white; background-size: 4px 4px; background-position: 0 0, 2px 2px; width: 10px; border-left: 4px solid black; } +.darkmode .window-pane::-webkit-scrollbar-track { + background: linear-gradient( + 45deg, + #fff 25%, + transparent 25%, + transparent 75%, + #fff 75%, + #fff + ), + linear-gradient( + 45deg, + #fff 25%, + transparent 25%, + transparent 75%, + #fff 75%, + #fff + ); + background-color: black; + background-size: 4px 4px; + background-position: 0 0, 2px 2px; + width: 10px; + border-left: 4px solid white; +} .window-pane::-webkit-scrollbar-thumb { width: 20px; box-sizing: content-box; @@ -333,6 +539,13 @@ h2 { border: 2px solid black; border-right: none; } +.darkmode .window-pane::-webkit-scrollbar-thumb { + width: 20px; + box-sizing: content-box; + background-color: #000; + border: 2px solid white; + border-right: none; +} .separator { flex: none; @@ -344,6 +557,16 @@ h2 { border-width: 0.1rem 0; font-size: 1rem; } +.darkmode .separator { + flex: none; + display: flex; + flex-direction: row; + justify-content: space-between; + /*padding: 0.4rem 0.8rem;*/ + border-top: 0.1rem solid white; + border-width: 0.1rem 0; + font-size: 1rem; +} .details-bar { flex: none; @@ -356,14 +579,24 @@ h2 { font-size: 1rem; font-weight: 100; } - +.darkmode .details-bar { + flex: none; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0.4rem 0.8rem; + border: 0.1rem solid white; + border-width: 0.1rem 0; + font-size: 1rem; + font-weight: 100; +} /* buttons */ .btn { min-height: 20px; min-width: 59px; padding: 0 20px; - text-align:center; + text-align: center; background: white; border-style: solid; border-width: 5.5px; @@ -375,39 +608,63 @@ h2 { font-family: Chicago_12; cursor: pointer; } +.darkmode .btn { + background: black; + border-style: solid; + border-width: 5.5px; + border-image: url("./icon/dark-button.png") 30 stretch; + color: white; +} .btn:active { background: black; - border-radius:6px; + border-radius: 6px; color: white; font-family: Chicago_12; } +.darkmode .btn:active { + background: white; + border-radius: 6px; + color: black; + font-family: Chicago_12; +} .btn:disabled { min-height: 20px; min-width: 59px; - text-align:center; + text-align: center; background: white; border-style: solid; border-width: 5.5px; border-image: url("./icon/button.png") 30 stretch; - color: #B6B7B8; + color: #b6b7b8; text-align: center; text-decoration: none; font-size: 18px; font-family: Chicago_12; } +.darkmode .btn:disabled { + background: black; + border-style: solid; + border-width: 5.5px; + border-image: url("./icon/dark-button.png") 30 stretch; + color: #535353; +} /* text input */ -input { +input { border: 1.5px solid black; font-family: Chicago_12; font-size: 18px; padding-left: 5px; } +.darkmode input { + border: 1.5px solid white; + background-color: #000; +} -input:focus { - outline:none; +input:focus { + outline: none; } input[type="radio"] + label::before { @@ -415,12 +672,18 @@ input[type="radio"] + label::before { width: 20px; height: 20px; } +.darkmode input[type="radio"] + label::before { + border-image: svg-load("./icon/dark-radio-border.svg"); +} input[type="checkbox"] + label::before { border: 1.5px solid black; width: 20px; height: 20px; } +.darkmode input[type="checkbox"] + label::before { + border: 1.5px solid white; +} input[type="radio"], input[type="checkbox"] { @@ -456,10 +719,16 @@ input[type="radio"] + label::before { margin-right: var(--radio-label-spacing); background: svg-load("./icon/radio-border.svg"); } +.darkmode input[type="radio"] + label::before { + background: svg-load("./icon/dark-radio-border.svg"); +} input[type="radio"]:focus-visible + label::before { background-image: svg-load("./icon/radio-border-focused.svg"); } +.darkmode input[type="radio"]:focus-visible + label::before { + background-image: svg-load("./icon/dark-radio-border-focused.svg"); +} input[type="radio"]:checked + label::after { content: ""; @@ -471,6 +740,9 @@ input[type="radio"]:checked + label::after { position: absolute; background: svg-load("./icon/radio-dot.svg"); } +.darkmode input[type="radio"]:checked + label::after { + background: svg-load("./icon/dark-radio-dot.svg"); +} input[type="checkbox"] + label { position: relative; @@ -492,6 +764,9 @@ input[type="checkbox"] + label::before { input[type="checkbox"]:focus-visible + label::before { outline: 1px solid black; } +.darkmode input[type="checkbox"]:focus-visible + label::before { + outline: 1px solid white; +} input[type="checkbox"]:checked + label::after { content: ""; @@ -506,7 +781,10 @@ input[type="checkbox"]:checked + label::after { background: svg-load("./icon/checkmark.svg"); background-repeat: no-repeat; } - +.darkmode input[type="checkbox"]:checked + label::after { + background: svg-load("./icon/dark-checkmark.svg"); + background-repeat: no-repeat; +} input[type="checkbox"][disabled] + label::before { background: var(--surface); @@ -515,6 +793,9 @@ input[type="checkbox"][disabled] + label::before { input[type="checkbox"][disabled]:checked + label::after { background: svg-load("./icon/checkmark-disabled.svg"); } +.darkmode input[type="checkbox"][disabled]:checked + label::after { + background: svg-load("./icon/dark-checkmark-disabled.svg"); +} .field-row { display: flex; @@ -540,11 +821,15 @@ input[type="checkbox"][disabled]:checked + label::after { display: inline-block; margin-right: 2px; } +.darkmode .apple { + background: svg-load("./icon/dark-apple.svg"); + background-repeat: no-repeat; +} /* Form */ form { font-family: "Inconsolata", Menlo, Chicago, Geneva; - font-size:14px; + font-size: 14px; } /* select menu */ @@ -563,8 +848,19 @@ select { position: relative; padding-left: 20px; -webkit-box-shadow: 2px 8px 0 0px black; - -moz-box-shadow: 2px 8px 0 0px black; - box-shadow: 2px 2px 0 -1px black; + -moz-box-shadow: 2px 8px 0 0px black; + box-shadow: 2px 2px 0 -1px black; +} +.darkmode select { + background-color: #000; + background-image: svg-load("./icon/dark-select-button.svg"); + background-position: top 2px right 2px; + background-repeat: no-repeat; + -webkit-box-shadow: 2px 8px 0 0px white; + -moz-box-shadow: 2px 8px 0 0px white; + box-shadow: 2px 2px 0 -1px white; + border-color: white; + color: white; } /* menu-bar */ @@ -580,15 +876,26 @@ ul[role="menu-bar"] { display: flex; background: white; } +.darkmode ul[role="menu-bar"] { + background: black; +} ul[role="menu-bar"] > [role="menu-item"] { position: relative; padding: 6px 10px; } -ul[role="menu-bar"] > [role="menu-item"]:focus, ul[role="menu-bar"] > [role="menu-item"]:focus-within, ul[role="menu-bar"] > [role="menu-item"]:hover { +ul[role="menu-bar"] > [role="menu-item"]:focus, +ul[role="menu-bar"] > [role="menu-item"]:focus-within, +ul[role="menu-bar"] > [role="menu-item"]:hover { background: #000; color: #fff; outline: none; } +.darkmode ul[role="menu-bar"] > [role="menu-item"]:focus, +.darkmode ul[role="menu-bar"] > [role="menu-item"]:focus-within, +.darkmode ul[role="menu-bar"] > [role="menu-item"]:hover { + background: #fff; + color: #000; +} ul[role="menu"] { position: relative; min-width: 200px; @@ -597,6 +904,10 @@ ul[role="menu"] { border: 1px solid; box-shadow: var(--box-shadow); } +.darkmode ul[role="menu"] { + background: black; + color: white; +} ul[role="menu"]::before { content: ""; pointer-events: none; @@ -605,6 +916,9 @@ ul[role="menu"]::before { width: 2px; box-shadow: inset 1px 0 rgba(0, 0, 0, 0.15), inset -1px 0 #fff; } +.darkmode ul[role="menu"]::before { + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.15), inset -1px 0 #000; +} [role="menu-item"] ul[role="menu"] { display: none; position: absolute; @@ -612,23 +926,39 @@ ul[role="menu"]::before { top: 100%; z-index: 99; } -ul[role="menu"] > [role="menu-item"] > a, ul[role="menu"] > [role="menu-item"] > button, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"] { +ul[role="menu"] > [role="menu-item"] > a, +ul[role="menu"] > [role="menu-item"] > button, +ul[role="menu"] > [role="menu-item"][aria-haspopup="true"] { all: unset; position: relative; padding: 5px 20px; display: block; width: 100%; box-sizing: border-box; - } -ul[role="menu"] > [role="menu-item"] > a:hover, ul[role="menu"] > [role="menu-item"] > button:hover, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, ul[role="menu"] > [role="menu-item"] > a:focus, ul[role="menu"] > [role="menu-item"] > button:focus, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { +ul[role="menu"] > [role="menu-item"] > a:hover, +ul[role="menu"] > [role="menu-item"] > button:hover, +ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, +ul[role="menu"] > [role="menu-item"] > a:focus, +ul[role="menu"] > [role="menu-item"] > button:focus, +ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { background: #000; color: white; } +.darkmode ul[role="menu"] > [role="menu-item"] > a:hover, +.darkmode ul[role="menu"] > [role="menu-item"] > button:hover, +.darkmode ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, +.darkmode ul[role="menu"] > [role="menu-item"] > a:focus, +.darkmode ul[role="menu"] > [role="menu-item"] > button:focus, +.darkmode ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { + background: #fff; + color: black; +} ul [role="menu-item"] { position: relative; } -ul [role="menu-item"]:focus > [role="menu"], ul [role="menu-item"]:focus-within > [role="menu"] { +ul [role="menu-item"]:focus > [role="menu"], +ul [role="menu-item"]:focus-within > [role="menu"] { display: block; } ul [role="menu-item"].divider::after { @@ -638,8 +968,15 @@ ul [role="menu-item"].divider::after { padding: 0; border-top: 1.5px dotted #000; } +.darkmode ul [role="menu-item"].divider::after { + border-top: 1.5px dotted #fff; +} /* styles specific to demo page */ .menu-items > li { margin-bottom: 1rem; } + +.darkmode blockquote { + border-color: white; +}