Copy and layout improvements.
This commit is contained in:
parent
39eb9e039a
commit
02222a5c16
20 changed files with 464 additions and 652 deletions
|
|
@ -273,6 +273,90 @@ p a, blockquote a {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ---- SHARED USelectMenu STYLES ----
|
||||
Apply via: <USelectMenu class="zine-select" :ui="{ content: 'tz-content', item: 'tz-item', input: 'tz-input' }" />
|
||||
Classes are global (not scoped) because Nuxt UI portals the popup content to body. */
|
||||
button.zine-select,
|
||||
button.timezone-select {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
padding: 5px 8px !important;
|
||||
font-family: "Commit Mono", monospace !important;
|
||||
font-size: 13px !important;
|
||||
color: var(--text-bright) !important;
|
||||
background: var(--input-bg) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
min-height: 0;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-color: transparent;
|
||||
}
|
||||
|
||||
button.zine-select:hover,
|
||||
button.timezone-select:hover {
|
||||
background: var(--input-bg) !important;
|
||||
}
|
||||
|
||||
button.zine-select:focus,
|
||||
button.zine-select:focus-visible,
|
||||
button.zine-select[aria-expanded="true"],
|
||||
button.timezone-select:focus,
|
||||
button.timezone-select:focus-visible,
|
||||
button.timezone-select[aria-expanded="true"] {
|
||||
border-color: var(--candle) !important;
|
||||
}
|
||||
|
||||
.tz-content {
|
||||
background: var(--input-bg) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
|
||||
--tw-ring-shadow: 0 0 #0000 !important;
|
||||
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
||||
font-family: "Commit Mono", monospace !important;
|
||||
}
|
||||
|
||||
.tz-input {
|
||||
border-bottom: 1px dashed var(--border) !important;
|
||||
}
|
||||
|
||||
.tz-input input {
|
||||
font-family: "Commit Mono", monospace !important;
|
||||
font-size: 13px !important;
|
||||
color: var(--text-bright) !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 6px 8px !important;
|
||||
box-shadow: none !important;
|
||||
--tw-ring-shadow: 0 0 #0000 !important;
|
||||
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
||||
}
|
||||
|
||||
.tz-item {
|
||||
font-family: "Commit Mono", monospace !important;
|
||||
font-size: 13px !important;
|
||||
color: var(--text) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
.tz-item::before {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.tz-item[data-highlighted]::before,
|
||||
.tz-item[data-highlighted]:not([data-disabled])::before {
|
||||
background: var(--surface-hover) !important;
|
||||
}
|
||||
|
||||
.tz-item[data-highlighted],
|
||||
.tz-item[data-highlighted]:not([data-disabled]) {
|
||||
color: var(--text-bright) !important;
|
||||
}
|
||||
|
||||
/* ---- MOBILE ---- */
|
||||
@media (max-width: 1023px) {
|
||||
body {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue