mirror of
https://github.com/jdan/98.css.git
synced 2025-01-17 12:48:32 +01:00
dialog -> window, menubar -> title-bar
This commit is contained in:
Jordan Scales
parent
366c8dcb01
commit
d82b823295
28
build/98.css
28
build/98.css
@ -109,7 +109,7 @@ button:focus {
|
||||
text-shadow: 1px 1px 0 #ffffff;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
.window {
|
||||
box-shadow: inset -1px -1px #0a0a0a,
|
||||
inset 1px 1px #ffffff, inset -2px -2px #808080,
|
||||
inset 2px 2px #dfdfdf;
|
||||
@ -117,7 +117,7 @@ button:focus {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.menubar {
|
||||
.title-bar {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#000080,
|
||||
@ -129,35 +129,35 @@ button:focus {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menubar-title {
|
||||
.title-bar-title {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.menubar-controls {
|
||||
.title-bar-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menubar-controls button {
|
||||
.title-bar-controls button {
|
||||
padding: 0;
|
||||
display: block;
|
||||
min-width: 14px;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
.menubar-controls button:focus {
|
||||
.title-bar-controls button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Minimize"] {
|
||||
.title-bar-controls button[aria-label="Minimize"] {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='6' height='2' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 2px left 3px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Maximize"] {
|
||||
.title-bar-controls button[aria-label="Maximize"] {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
/* Off by 1px because contents can't go above the inner shadow */
|
||||
@ -165,25 +165,17 @@ button:focus {
|
||||
background-position: top 2px left 2px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Close"] {
|
||||
.title-bar-controls button[aria-label="Close"] {
|
||||
margin-left: 2px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px center;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
.window-body {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.dialog-body > * + * {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
box-shadow: inset -1px -1px #ffffff,
|
||||
|
||||
28
docs/98.css
28
docs/98.css
@ -109,7 +109,7 @@ button:focus {
|
||||
text-shadow: 1px 1px 0 #ffffff;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
.window {
|
||||
box-shadow: inset -1px -1px #0a0a0a,
|
||||
inset 1px 1px #ffffff, inset -2px -2px #808080,
|
||||
inset 2px 2px #dfdfdf;
|
||||
@ -117,7 +117,7 @@ button:focus {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.menubar {
|
||||
.title-bar {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#000080,
|
||||
@ -129,35 +129,35 @@ button:focus {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menubar-title {
|
||||
.title-bar-title {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.menubar-controls {
|
||||
.title-bar-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menubar-controls button {
|
||||
.title-bar-controls button {
|
||||
padding: 0;
|
||||
display: block;
|
||||
min-width: 14px;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
.menubar-controls button:focus {
|
||||
.title-bar-controls button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Minimize"] {
|
||||
.title-bar-controls button[aria-label="Minimize"] {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='6' height='2' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 2px left 3px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Maximize"] {
|
||||
.title-bar-controls button[aria-label="Maximize"] {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
/* Off by 1px because contents can't go above the inner shadow */
|
||||
@ -165,25 +165,17 @@ button:focus {
|
||||
background-position: top 2px left 2px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Close"] {
|
||||
.title-bar-controls button[aria-label="Close"] {
|
||||
margin-left: 2px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px center;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
.window-body {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.dialog-body > * + * {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
box-shadow: inset -1px -1px #ffffff,
|
||||
|
||||
28
style.css
28
style.css
@ -105,13 +105,13 @@ button:focus {
|
||||
text-shadow: 1px 1px 0 var(--button-highlight);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
.window {
|
||||
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
|
||||
background: var(--surface);
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.menubar {
|
||||
.title-bar {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--dialog-blue),
|
||||
@ -123,35 +123,35 @@ button:focus {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menubar-title {
|
||||
.title-bar-title {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.menubar-controls {
|
||||
.title-bar-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menubar-controls button {
|
||||
.title-bar-controls button {
|
||||
padding: 0;
|
||||
display: block;
|
||||
min-width: 14px;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
.menubar-controls button:focus {
|
||||
.title-bar-controls button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Minimize"] {
|
||||
.title-bar-controls button[aria-label="Minimize"] {
|
||||
background-image: svg-load("./icon/minimize.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 2px left 3px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Maximize"] {
|
||||
.title-bar-controls button[aria-label="Maximize"] {
|
||||
background-image: svg-load("./icon/maximize.svg");
|
||||
background-repeat: no-repeat;
|
||||
/* Off by 1px because contents can't go above the inner shadow */
|
||||
@ -159,25 +159,17 @@ button:focus {
|
||||
background-position: top 2px left 2px;
|
||||
}
|
||||
|
||||
.menubar-controls button[aria-label="Close"] {
|
||||
.title-bar-controls button[aria-label="Close"] {
|
||||
margin-left: 2px;
|
||||
background-image: svg-load("./icon/close.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top 2px center;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
.window-body {
|
||||
margin: var(--element-spacing);
|
||||
}
|
||||
|
||||
.dialog-body > * + * {
|
||||
margin-top: var(--element-spacing);
|
||||
}
|
||||
|
||||
.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
box-shadow: var(--border-sunken-outer), var(--border-raised-inner);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user