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

going a little wild with spacing

Browse Source
This commit is contained in:
Jordan Scales
2020-04-16 14:05:10 -04:00
parent bcbb44b6db
commit 236ee9731d
5 changed files with 99 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
close.svg Normal file
View File

@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 270 B

22
index.html
View File

@@ -7,7 +7,7 @@
height: 100vh; height: 100vh;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: var(--button-face); background: var(--dialog-blue);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -15,9 +15,21 @@
</style> </style>
</head> </head>
<body> <body>
<fieldset> <div class="dialog">
<button><u>H</u>ello, world!</button> <div class="header">
<button disabled>Unavailable</button> <div class="title">
</fieldset> Display Properties
</div>
<div class="controls">
<button aria-label="Minimize"></button><button aria-label="Maximize"></button><button aria-label="Close"></button>
</div>
</div>
<div class="body">
<p>Hello, world!</p>
<p><button style="width: 75px; height: 23px"><u>C</u>lose</button></p>
</div>
</div>
</body> </body>
</html> </html>

3
maximize.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 207 B

3
minimize.svg Normal file
View File

@@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 141 B

80
style.css
View File

@@ -1,9 +1,14 @@
:root { :root {
/* Color */
--surface: #c0c0c0;
--button-highlight: #ffffff; --button-highlight: #ffffff;
--button-face: #c0c0c0; --button-face: #dfdfdf;
--button-shadow: #808080; --button-shadow: #808080;
--window-frame: #0a0a0a; --window-frame: #0a0a0a;
--dialog-blue: #000080;
--dialog-blue-light: #1084d0;
/* Borders */
--border-raised-outer: -0.5px -0.5px 0 0.5px var(--button-highlight), --border-raised-outer: -0.5px -0.5px 0 0.5px var(--button-highlight),
0 0 0 1px var(--window-frame); 0 0 0 1px var(--window-frame);
--border-raised-inner: inset -1px -1px var(--button-shadow), --border-raised-inner: inset -1px -1px var(--button-shadow),
@@ -28,9 +33,10 @@ u {
} }
button { button {
box-sizing: border-box;
border: none; border: none;
background: var(--button-face); margin: 1px;
padding: 6px 8px; background: var(--surface);
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: var(--border-raised-outer), var(--border-raised-inner);
} }
@@ -43,9 +49,69 @@ button:focus {
outline-offset: -3px; outline-offset: -3px;
} }
button:disabled { .dialog {
color: #9a9a9a; box-shadow: var(--border-raised-outer), var(--border-raised-inner);
text-shadow: 1px 1px 0 #eeeeee; background: var(--surface);
min-width: calc(188 * var(--dlu));
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 button {
/* I don't love these */
width: 14px;
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;
background-position: top 1px left 2px;
}
.dialog .header .controls button[aria-label="Close"] {
margin-left: 3px;
background-image: url("./close.svg");
background-repeat: no-repeat;
background-position: top 2px center;
}
.dialog .body {
margin: 8px;
}
:disabled {
color: var(--button-shadow);
text-shadow: 1px 1px 0 var(--button-highlight);
} }
fieldset { fieldset {
@@ -53,7 +119,7 @@ fieldset {
} }
fieldset > * { fieldset > * {
margin: 0 6px 8px 0; margin-right: calc(4 * var(--dlu));
} }
fieldset > *:last-child { fieldset > *:last-child {