diff options
| author | Sam Nystrom <sam@samnystrom.dev> | 2024-03-08 08:09:18 +0000 |
|---|---|---|
| committer | Sam Nystrom <sam@samnystrom.dev> | 2024-03-09 02:05:58 -0500 |
| commit | 9fb6fa12590609a4cd25d2e212166c61e1c23580 (patch) | |
| tree | 94f494fb4a0a841a8d17b3215227b7a7d77a3685 /src/Toolbar.module.css | |
| parent | 5d06d2359e8ad50f7a61ecd1787a0ad558329964 (diff) | |
Add basic toolbar
Diffstat (limited to 'src/Toolbar.module.css')
| -rw-r--r-- | src/Toolbar.module.css | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/src/Toolbar.module.css b/src/Toolbar.module.css new file mode 100644 index 0000000..edea713 --- /dev/null +++ b/src/Toolbar.module.css @@ -0,0 +1,76 @@ +.toolbar { + background-color: var(--surface); + border-bottom: 1px solid var(--overlay); + width: 100%; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + > * { + flex-grow: 1; + display: flex; + justify-content: center; + } + :first-child, :last-child { flex-basis: 0 } + :first-child { justify-content: flex-start } + :last-child { justify-content: flex-end } + + > menu { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: row; + } + + h1 { + font-size: 1.5rem; + font-weight: normal; + margin: 0; + } + + button { + background-color: transparent; + border: none; + outline: none; + padding: 1rem; + color: var(--text); + font-size: 1em; + :hover { background-color: var(--overlay) } + } + + path { + fill: var(--text); + } +} + +.addMenu:popover-open { + background-color: var(--surface); + list-style: none; + border: none; + position: absolute; + inset: unset; + width: auto; + height: auto; + left: 140px; + top: 52px; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + --shadow-color: 0deg 0% 0%; + box-shadow: + 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04), + 0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15), + 1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27); + + button { + padding: 4px; + width: 100%; + text-align: left; + &:hover { background-color: var(--overlay) } + } +}
\ No newline at end of file |