diff --git a/build/98.css b/build/98.css index ad89172..58ccfb2 100644 --- a/build/98.css +++ b/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, diff --git a/docs/98.css b/docs/98.css index ad89172..58ccfb2 100644 --- a/docs/98.css +++ b/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, diff --git a/style.css b/style.css index f0d8756..0e366e0 100644 --- a/style.css +++ b/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);