mirror of
https://github.com/jdan/98.css.git
synced 2025-08-01 11:30:22 +02:00
going a little wild with spacing
This commit is contained in:
Jordan Scales
3
close.svg
Normal file
3
close.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 270 B |
22
index.html
22
index.html
@@ -7,7 +7,7 @@
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--button-face);
|
||||
background: var(--dialog-blue);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -15,9 +15,21 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<fieldset>
|
||||
<button><u>H</u>ello, world!</button>
|
||||
<button disabled>Unavailable</button>
|
||||
</fieldset>
|
||||
<div class="dialog">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
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>
|
||||
</html>
|
||||
|
||||
3
maximize.svg
Normal file
3
maximize.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 207 B |
3
minimize.svg
Normal file
3
minimize.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 141 B |
80
style.css
80
style.css
@@ -1,9 +1,14 @@
|
||||
:root {
|
||||
/* Color */
|
||||
--surface: #c0c0c0;
|
||||
--button-highlight: #ffffff;
|
||||
--button-face: #c0c0c0;
|
||||
--button-face: #dfdfdf;
|
||||
--button-shadow: #808080;
|
||||
--window-frame: #0a0a0a;
|
||||
--dialog-blue: #000080;
|
||||
--dialog-blue-light: #1084d0;
|
||||
|
||||
/* Borders */
|
||||
--border-raised-outer: -0.5px -0.5px 0 0.5px var(--button-highlight),
|
||||
0 0 0 1px var(--window-frame);
|
||||
--border-raised-inner: inset -1px -1px var(--button-shadow),
|
||||
@@ -28,9 +33,10 @@ u {
|
||||
}
|
||||
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
background: var(--button-face);
|
||||
padding: 6px 8px;
|
||||
margin: 1px;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
}
|
||||
|
||||
@@ -43,9 +49,69 @@ button:focus {
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #9a9a9a;
|
||||
text-shadow: 1px 1px 0 #eeeeee;
|
||||
.dialog {
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
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 {
|
||||
@@ -53,7 +119,7 @@ fieldset {
|
||||
}
|
||||
|
||||
fieldset > * {
|
||||
margin: 0 6px 8px 0;
|
||||
margin-right: calc(4 * var(--dlu));
|
||||
}
|
||||
|
||||
fieldset > *:last-child {
|
||||
|
||||
Reference in New Issue
Block a user