1364 lines
24 KiB
CSS
1364 lines
24 KiB
CSS
/* Copyright © 2026 Olaf Kolkman */
|
|
/* SPDX-License-Identifier: GPL-3.0-or-later */
|
|
|
|
@import url('/static/fonts/fonts.css');
|
|
|
|
:root {
|
|
--base: #1e1e2e;
|
|
--mantle: #181825;
|
|
--crust: #11111b;
|
|
--surface-0: #313244;
|
|
--surface-1: #45475a;
|
|
--surface-2: #585b70;
|
|
--text: #cdd6f4;
|
|
--subtext: #a6adc8;
|
|
--muted: #7f849c;
|
|
--mauve: #cba6f7;
|
|
--lavender: #b4befe;
|
|
--blue: #89b4fa;
|
|
--teal: #94e2d5;
|
|
--peach: #fab387;
|
|
--red: #f38ba8;
|
|
--border: rgba(205, 214, 244, 0.12);
|
|
--shadow: 0 18px 50px rgba(17, 17, 27, 0.28);
|
|
}
|
|
|
|
:root[data-theme='plain-day'] {
|
|
--base: #f4f1ea; --mantle: #e8e3d8; --crust: #d7d0c2;
|
|
--surface-0: #fffdf8; --surface-1: #e5ded1; --surface-2: #c8beae;
|
|
--text: #2f2b27; --subtext: #514a42; --muted: #6b6258;
|
|
--mauve: #7a3d6e; --lavender: #5d4b84; --blue: #315c78;
|
|
--teal: #397c72; --peach: #a15d3d; --red: #a44250;
|
|
--border: rgba(47, 43, 39, 0.16); --shadow: 0 18px 50px rgba(47, 43, 39, 0.16);
|
|
}
|
|
|
|
:root[data-theme='plain-night'] {
|
|
--base: #181818; --mantle: #111111; --crust: #090909;
|
|
--surface-0: #262626; --surface-1: #353535; --surface-2: #4b4b4b;
|
|
--text: #eeeeee; --subtext: #c1c1c1; --muted: #929292;
|
|
--mauve: #d59acb; --lavender: #b9b4e8; --blue: #8ebbd8;
|
|
--teal: #8bc9bd; --peach: #e2ae88; --red: #ec929f;
|
|
--border: rgba(238, 238, 238, 0.14); --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
:root[data-theme='latte'] {
|
|
--base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8;
|
|
--surface-0: #ccd0da; --surface-1: #bcc0cc; --surface-2: #acb0be;
|
|
--text: #3d4058; --subtext: #51546b; --muted: #65687c;
|
|
--mauve: #7627c7; --lavender: #5946b2; --blue: #1854c7;
|
|
--teal: #179299; --peach: #fe640b; --red: #d20f39;
|
|
--border: rgba(76, 79, 105, 0.16); --shadow: 0 18px 50px rgba(76, 79, 105, 0.16);
|
|
}
|
|
|
|
:root[data-theme='frappe'] {
|
|
--base: #303446; --mantle: #292c3c; --crust: #232634;
|
|
--surface-0: #414559; --surface-1: #51576d; --surface-2: #626880;
|
|
--text: #c6d0f5; --subtext: #b5bfe2; --muted: #838ba7;
|
|
--mauve: #ca9ee6; --lavender: #babbf1; --blue: #8caaee;
|
|
--teal: #81c8be; --peach: #ef9f76; --red: #e78284;
|
|
--border: rgba(198, 208, 245, 0.12); --shadow: 0 18px 50px rgba(35, 38, 52, 0.3);
|
|
}
|
|
|
|
:root[data-theme='macchiato'] {
|
|
--base: #24273a; --mantle: #1e2030; --crust: #181926;
|
|
--surface-0: #363a4f; --surface-1: #494d64; --surface-2: #5b6078;
|
|
--text: #cad3f5; --subtext: #b8c0e0; --muted: #8087a2;
|
|
--mauve: #c6a0f6; --lavender: #b7bdf8; --blue: #8aadf4;
|
|
--teal: #8bd5ca; --peach: #f5a97f; --red: #ed8796;
|
|
--border: rgba(202, 211, 245, 0.12); --shadow: 0 18px 50px rgba(24, 25, 38, 0.34);
|
|
}
|
|
|
|
:root[data-theme='dracula'] {
|
|
--base: #282a36; --mantle: #21222c; --crust: #191a21;
|
|
--surface-0: #44475a; --surface-1: #6272a4; --surface-2: #7886b5;
|
|
--text: #f8f8f2; --subtext: #d6d6d0; --muted: #a7a7a0;
|
|
--mauve: #ff79c6; --lavender: #bd93f9; --blue: #8be9fd;
|
|
--teal: #50fa7b; --peach: #ffb86c; --red: #ff5555;
|
|
--border: rgba(248, 248, 242, 0.14); --shadow: 0 18px 50px rgba(25, 26, 33, 0.35);
|
|
}
|
|
|
|
:root[data-theme='nord'] {
|
|
--base: #2e3440; --mantle: #272c36; --crust: #242933;
|
|
--surface-0: #3b4252; --surface-1: #434c5e; --surface-2: #4c566a;
|
|
--text: #eceff4; --subtext: #d8dee9; --muted: #aeb8c8;
|
|
--mauve: #b48ead; --lavender: #d8dee9; --blue: #88c0d0;
|
|
--teal: #a3be8c; --peach: #d08770; --red: #bf616a;
|
|
--border: rgba(236, 239, 244, 0.14); --shadow: 0 18px 50px rgba(36, 41, 51, 0.35);
|
|
}
|
|
|
|
:root[data-theme='solarized'] {
|
|
--base: #fdf6e3; --mantle: #eee8d5; --crust: #e3ddc9;
|
|
--surface-0: #eee8d5; --surface-1: #ddd6c1; --surface-2: #c9c1aa;
|
|
--text: #073642; --subtext: #586e75; --muted: #657b83;
|
|
--mauve: #6c71c4; --lavender: #268bd2; --blue: #268bd2;
|
|
--teal: #2aa198; --peach: #cb4b16; --red: #dc322f;
|
|
--border: rgba(7, 54, 66, 0.18); --shadow: 0 18px 50px rgba(7, 54, 66, 0.14);
|
|
}
|
|
|
|
:root[data-theme='red'] {
|
|
--base: #fffafa; --mantle: #ffedef; --crust: #fbd6da;
|
|
--surface-0: #ffffff; --surface-1: #ffe2e6; --surface-2: #f4bbc4;
|
|
--text: #350810; --subtext: #5c1724; --muted: #8c4653;
|
|
--mauve: #9e1737; --lavender: #86132d; --blue: #216f91;
|
|
--teal: #087567; --peach: #b84324; --red: #a70d2d;
|
|
--border: rgba(83, 10, 25, 0.2); --shadow: 0 18px 50px rgba(122, 8, 33, 0.2);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
background:
|
|
linear-gradient(145deg, rgba(203, 166, 247, 0.06), transparent 36%),
|
|
var(--base);
|
|
color: var(--text);
|
|
font-family: 'DM Sans', 'Avenir Next', sans-serif;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
body::selection {
|
|
background: var(--mauve);
|
|
color: var(--crust);
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
|
|
.site-header {
|
|
position: relative;
|
|
z-index: 20;
|
|
padding: 6px 0 8px;
|
|
background:
|
|
linear-gradient(115deg, var(--mantle), transparent 45%),
|
|
rgba(203, 166, 247, 0.18);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.site-header::after {
|
|
position: absolute;
|
|
right: 12%;
|
|
bottom: -52px;
|
|
width: 180px;
|
|
height: 100px;
|
|
border-top: 1px solid rgba(180, 190, 254, 0.28);
|
|
border-radius: 50%;
|
|
content: '';
|
|
transform: rotate(-12deg);
|
|
/* decorative only: must not swallow clicks on the toolbar selects underneath */
|
|
pointer-events: none;
|
|
}
|
|
|
|
.site-header h1,
|
|
.link-item h2 {
|
|
font-family: 'Space Grotesk', 'Avenir Next', sans-serif;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.site-header h1 {
|
|
margin: 0;
|
|
color: var(--text);
|
|
font-size: clamp(2.2rem, 5vw, 4rem);
|
|
line-height: 1;
|
|
}
|
|
|
|
.site-logo {
|
|
display: block;
|
|
width: min(260px, 70vw);
|
|
height: 80px;
|
|
margin-bottom: 12px;
|
|
object-fit: contain;
|
|
object-position: left center;
|
|
}
|
|
|
|
.site-header .site-logo-link + h1,
|
|
.feed-link {
|
|
font-family: 'Asset', 'Space Grotesk', sans-serif;
|
|
}
|
|
|
|
.site-header p {
|
|
max-width: 34rem;
|
|
margin: 14px 0 0;
|
|
color: var(--subtext);
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.header-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
}
|
|
|
|
.header-tools {
|
|
display: grid;
|
|
flex: 1 1 auto;
|
|
justify-items: end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-tools .toolbar {
|
|
width: min(100%, 560px);
|
|
gap: 6px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.header-tools .toolbar label {
|
|
min-width: 0;
|
|
flex: 1 1 110px;
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.header-tools .toolbar .search-control {
|
|
flex-basis: 180px;
|
|
}
|
|
|
|
.header-tools .toolbar select {
|
|
min-width: 0;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.header-tools .toolbar input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: relative;
|
|
}
|
|
|
|
.menu-toggle {
|
|
min-width: 0;
|
|
padding: 10px 13px;
|
|
border-color: var(--surface-2);
|
|
background: var(--surface-0);
|
|
color: var(--text);
|
|
}
|
|
|
|
.menu-toggle::before {
|
|
content: '\2630';
|
|
margin-right: 7px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.new-entry-button {
|
|
padding: 10px 13px;
|
|
border: 1px solid var(--mauve);
|
|
border-radius: 7px;
|
|
background: var(--mauve);
|
|
color: var(--crust);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.new-entry-button:hover {
|
|
background: var(--lavender);
|
|
border-color: var(--lavender);
|
|
}
|
|
|
|
.new-entry-button a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.new-entry-button.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.auth-menu {
|
|
position: absolute;
|
|
z-index: 30;
|
|
top: calc(100% + 10px);
|
|
right: 0;
|
|
display: grid;
|
|
min-width: 190px;
|
|
gap: 4px;
|
|
padding: 8px;
|
|
background: var(--surface-0);
|
|
border: 1px solid var(--surface-1);
|
|
border-radius: 10px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.auth-menu a,
|
|
.auth-menu button {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 9px 10px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
text-align: left;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.auth-menu a:hover,
|
|
.auth-menu button:hover {
|
|
background: var(--surface-1);
|
|
color: var(--lavender);
|
|
}
|
|
|
|
.auth-menu .hidden {
|
|
display: none;
|
|
}
|
|
|
|
.auth-session {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 7px 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.auth-session .user-name {
|
|
max-width: 140px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.logout-button {
|
|
min-width: 0;
|
|
border-color: rgba(243, 139, 168, 0.45);
|
|
background: transparent;
|
|
color: var(--red);
|
|
}
|
|
|
|
.logout-button:hover {
|
|
border-color: var(--red);
|
|
background: rgba(243, 139, 168, 0.12);
|
|
color: var(--red);
|
|
}
|
|
|
|
.theme-submenu-container {
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 6px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.theme-submenu-container.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.submenu-title {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 9px 10px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
text-align: left;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.submenu-title:hover {
|
|
background: var(--surface-1);
|
|
color: var(--lavender);
|
|
}
|
|
|
|
.submenu-title::after {
|
|
content: ' ▼';
|
|
font-size: 0.7em;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.submenu-title[aria-expanded='true']::after {
|
|
transform: rotate(-180deg);
|
|
display: inline-block;
|
|
}
|
|
|
|
.submenu-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
margin-top: 4px;
|
|
border-radius: 6px;
|
|
background: var(--surface-1);
|
|
}
|
|
|
|
.submenu-options.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.theme-option {
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
color: var(--text);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.theme-option:hover {
|
|
background: var(--surface-0);
|
|
border-color: var(--lavender);
|
|
color: var(--lavender);
|
|
}
|
|
|
|
.theme-option.active {
|
|
background: var(--mauve);
|
|
border-color: var(--mauve);
|
|
color: var(--crust);
|
|
font-weight: 600;
|
|
}
|
|
|
|
main.container {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-top: 28px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.site-footer {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 0 24px 24px;
|
|
color: var(--muted);
|
|
font-size: 0.72rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.site-footer a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.site-footer a:hover,
|
|
.site-footer a:focus-visible,
|
|
.site-footer a:active {
|
|
color: var(--lavender);
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 14px;
|
|
margin: 0 0 24px;
|
|
padding: 16px;
|
|
background: var(--surface-0);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.site-header .toolbar {
|
|
margin-top: 18px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#admin-controls {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.settings-panel + .settings-panel {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.settings-panel h2 {
|
|
margin: 0 0 12px;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease, margin 0.2s ease;
|
|
}
|
|
|
|
.settings-panel h2:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
.settings-panel:nth-of-type(5n+1) h2 {
|
|
color: var(--mauve);
|
|
background: var(--surface-1);
|
|
background: color-mix(in srgb, var(--mauve) 14%, transparent);
|
|
border-left: 4px solid var(--mauve);
|
|
}
|
|
|
|
.settings-panel:nth-of-type(5n+2) h2 {
|
|
color: var(--teal);
|
|
background: var(--surface-1);
|
|
background: color-mix(in srgb, var(--teal) 14%, transparent);
|
|
border-left: 4px solid var(--teal);
|
|
}
|
|
|
|
.settings-panel:nth-of-type(5n+3) h2 {
|
|
color: var(--peach);
|
|
background: var(--surface-1);
|
|
background: color-mix(in srgb, var(--peach) 14%, transparent);
|
|
border-left: 4px solid var(--peach);
|
|
}
|
|
|
|
.settings-panel:nth-of-type(5n+4) h2 {
|
|
color: var(--blue);
|
|
background: var(--surface-1);
|
|
background: color-mix(in srgb, var(--blue) 14%, transparent);
|
|
border-left: 4px solid var(--blue);
|
|
}
|
|
|
|
.settings-panel:nth-of-type(5n+5) h2 {
|
|
color: var(--lavender);
|
|
background: var(--surface-1);
|
|
background: color-mix(in srgb, var(--lavender) 14%, transparent);
|
|
border-left: 4px solid var(--lavender);
|
|
}
|
|
|
|
.settings-panel.minimized h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.panel-toggle-btn {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
width: 100% !important;
|
|
min-width: 0 !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
background: transparent !important;
|
|
color: inherit !important;
|
|
font: inherit !important;
|
|
font-size: 1rem !important;
|
|
font-weight: inherit !important;
|
|
cursor: pointer !important;
|
|
text-align: left !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.panel-toggle-btn > * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.panel-toggle-btn:focus-visible {
|
|
outline: 2px solid var(--lavender) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
.panel-toggle-icon {
|
|
font-size: 0.75rem;
|
|
transition: transform 0.2s ease;
|
|
margin-left: 8px;
|
|
color: var(--subtext);
|
|
}
|
|
|
|
.settings-panel.minimized .panel-toggle-icon {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.settings-panel.minimized > *:not(h2) {
|
|
display: none !important;
|
|
}
|
|
|
|
.toolbar label,
|
|
.settings-panel label {
|
|
display: grid;
|
|
gap: 7px;
|
|
color: var(--subtext);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 9px !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.checkbox-label input {
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.toolbar label {
|
|
flex: 1 1 220px;
|
|
}
|
|
|
|
select,
|
|
input,
|
|
textarea,
|
|
button {
|
|
max-width: 100%;
|
|
min-width: 180px;
|
|
padding: 2px 2px;
|
|
border: 1px solid var(--surface-1);
|
|
border-radius: 8px;
|
|
background: var(--surface-0);
|
|
color: var(--text);
|
|
font: inherit;
|
|
}
|
|
|
|
select:focus,
|
|
input:focus,
|
|
textarea:focus,
|
|
button:focus-visible {
|
|
outline: 2px solid var(--lavender);
|
|
outline-offset: 2px;
|
|
border-color: var(--lavender);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.settings-panel form {
|
|
display: grid;
|
|
gap: 16px;
|
|
max-width: 560px;
|
|
}
|
|
|
|
.theme-options {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin: 14px 0;
|
|
}
|
|
|
|
.theme-options label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0;
|
|
}
|
|
|
|
.email-address-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.email-address-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.email-address-row button {
|
|
min-width: 0;
|
|
padding: 5px 9px;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.settings-panel textarea {
|
|
min-height: 110px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.readonly-value {
|
|
display: block;
|
|
padding: 11px 13px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--mantle);
|
|
color: var(--lavender);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.profile-avatar-preview {
|
|
width: 96px;
|
|
height: 96px;
|
|
object-fit: cover;
|
|
border: 2px solid var(--mauve);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
button {
|
|
width: fit-content;
|
|
border-color: var(--mauve);
|
|
background: var(--mauve);
|
|
color: var(--crust);
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
transition: filter 160ms ease, transform 160ms ease;
|
|
}
|
|
|
|
button:hover {
|
|
filter: brightness(1.08);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: wait;
|
|
opacity: 0.6;
|
|
transform: none;
|
|
}
|
|
|
|
.status {
|
|
min-height: 1.25em;
|
|
margin: 0;
|
|
color: var(--teal);
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.auth-notice {
|
|
margin: 0 0 20px;
|
|
color: var(--subtext);
|
|
}
|
|
|
|
.auth-notice a,
|
|
.link-item a {
|
|
color: var(--lavender);
|
|
}
|
|
|
|
.auth-notice a:hover,
|
|
.link-item a:hover {
|
|
color: var(--mauve);
|
|
}
|
|
|
|
.plugin-list,
|
|
.feed {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.plugin-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.plugin-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.plugin-row button {
|
|
min-width: 0;
|
|
padding: 5px 5px;
|
|
background: var(--surface-1);
|
|
border-color: var(--surface-2);
|
|
color: var(--text);
|
|
}
|
|
|
|
.user-admin-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
color: var(--subtext);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.user-admin-toggle input {
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.danger-button {
|
|
border-color: rgba(243, 139, 168, 0.45) !important;
|
|
background: transparent !important;
|
|
color: var(--red) !important;
|
|
}
|
|
|
|
.edit-button {
|
|
min-width: 0;
|
|
padding: 5px 9px;
|
|
border-radius: 6px;
|
|
background: var(--surface-1);
|
|
border-color: var(--surface-2);
|
|
color: var(--text);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.entry-actions {
|
|
display: flex;
|
|
float: right;
|
|
gap: 8px;
|
|
margin: 0 0 8px 16px;
|
|
}
|
|
|
|
.delete-button {
|
|
min-width: 0;
|
|
padding: 5px 9px;
|
|
border-radius: 6px;
|
|
border-color: rgba(243, 139, 168, 0.45);
|
|
background: transparent;
|
|
color: var(--red);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.mastodon-button {
|
|
clear: right;
|
|
float: right;
|
|
margin: 0 0 8px 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
padding: 5px 9px;
|
|
border-radius: 6px;
|
|
background: var(--surface-1);
|
|
border-color: var(--surface-2);
|
|
color: var(--text);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.mastodon-button.posted {
|
|
background: var(--teal);
|
|
border-color: var(--teal);
|
|
color: var(--crust);
|
|
}
|
|
|
|
.mastodon-button img {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.edit-form {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.edit-tags {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.edit-tag-options {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 10px;
|
|
}
|
|
|
|
.edit-tag-options label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: var(--subtext);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.edit-tag-options input {
|
|
width: auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.edit-tag-status {
|
|
min-height: 1.25em;
|
|
margin: 0;
|
|
color: var(--red);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.feed {
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
max-width: 100%;
|
|
margin: 0 0 40px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.pagination button {
|
|
min-width: 28px;
|
|
padding: 3px 7px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pagination button:hover:not(:disabled) {
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.pagination button:disabled {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
}
|
|
|
|
.pagination button.active {
|
|
background: var(--surface-1);
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pagination .pagination-ellipsis {
|
|
padding: 3px 2px;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.link-item {
|
|
padding: 11px;
|
|
background: var(--surface-0);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.about-content {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.link-item h2 {
|
|
margin: 0 0 8px;
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.link-header {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
float: right;
|
|
gap: 12px;
|
|
margin: 0 0 2px 8px;
|
|
}
|
|
|
|
.user-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.avatar {
|
|
display: grid;
|
|
width: 38px;
|
|
height: 38px;
|
|
flex: 0 0 38px;
|
|
place-items: center;
|
|
border: 2px solid rgba(203, 166, 247, 0.5);
|
|
border-radius: 50%;
|
|
background: var(--surface-1);
|
|
color: var(--mauve);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.user-name {
|
|
color: var(--lavender);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.link-item a {
|
|
text-decoration: none;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.link-item::after {
|
|
display: table;
|
|
clear: both;
|
|
content: '';
|
|
}
|
|
|
|
.comment,
|
|
.profile-summary p {
|
|
margin: 12px 0 0;
|
|
color: var(--subtext);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.meta {
|
|
margin-left: auto;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.entry-tags {
|
|
color: var(--mauve);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.entry-meta {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
clear: both;
|
|
gap: 16px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
/* Entry form styling */
|
|
.entry-form {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.entry-form.hidden,
|
|
#auth-required.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#auth-required {
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
padding: 16px;
|
|
background: var(--surface-0);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
border-left: 4px solid var(--red);
|
|
}
|
|
|
|
#auth-required p {
|
|
margin: 0;
|
|
color: var(--text);
|
|
}
|
|
|
|
#auth-required a {
|
|
color: var(--lavender);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#auth-required a:hover {
|
|
color: var(--mauve);
|
|
}
|
|
|
|
.form-section {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-section.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.form-section label {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.form-section > legend {
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
font-size: 0.95rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.form-section input[type='url'],
|
|
.form-section input[type='text'],
|
|
.form-section textarea {
|
|
padding: 10px 12px;
|
|
background: var(--mantle);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
font-family: inherit;
|
|
font-size: 0.95rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.form-section textarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.form-section input[type='url']:focus,
|
|
.form-section input[type='text']:focus,
|
|
.form-section textarea:focus {
|
|
outline: none;
|
|
border-color: var(--lavender);
|
|
box-shadow: 0 0 0 3px rgba(180, 190, 254, 0.1);
|
|
}
|
|
|
|
.tag-options {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px 10px;
|
|
padding: 12px;
|
|
background: var(--mantle);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tag-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--subtext);
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.form-section label.tag-checkbox {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.tag-checkbox input {
|
|
width: auto;
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-section fieldset {
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-section fieldset legend {
|
|
margin: 0;
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.form-section fieldset label {
|
|
gap: 6px;
|
|
}
|
|
|
|
.form-section fieldset input[type='text'] {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-section fieldset input[type='checkbox'] {
|
|
width: auto;
|
|
margin-right: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 12px;
|
|
}
|
|
|
|
.form-actions button,
|
|
.form-actions a {
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-actions button[type='submit'] {
|
|
background: var(--mauve);
|
|
border: 1px solid var(--mauve);
|
|
color: var(--crust);
|
|
}
|
|
|
|
.form-actions button[type='submit']:hover:not(:disabled) {
|
|
background: var(--lavender);
|
|
border-color: var(--lavender);
|
|
}
|
|
|
|
.form-actions button[type='submit']:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-actions a {
|
|
background: var(--surface-1);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.form-actions a:hover {
|
|
background: var(--surface-2);
|
|
border-color: var(--text);
|
|
}
|
|
|
|
.status {
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.status.success {
|
|
background: rgba(131, 165, 152, 0.2);
|
|
border: 1px solid var(--teal);
|
|
color: var(--teal);
|
|
}
|
|
|
|
.status.error {
|
|
background: rgba(243, 139, 168, 0.2);
|
|
border: 1px solid var(--red);
|
|
color: var(--red);
|
|
}
|
|
|
|
.status.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.char-count {
|
|
margin: -8px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.char-count.over-limit {
|
|
color: var(--red);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.container {
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.site-header {
|
|
padding: 38px 0 34px;
|
|
}
|
|
|
|
.site-header h1 {
|
|
font-size: 2.35rem;
|
|
}
|
|
|
|
.site-logo {
|
|
width: min(220px, 68vw);
|
|
height: 48px;
|
|
}
|
|
|
|
.header-row {
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-tools {
|
|
order: 3;
|
|
flex-basis: 100%;
|
|
justify-items: stretch;
|
|
}
|
|
|
|
.header-tools .header-actions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.header-actions {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.auth-session {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.menu-toggle {
|
|
padding: 8px 11px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.new-entry-button {
|
|
padding: 8px 11px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.logout-button {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
main.container {
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.site-footer {
|
|
padding: 0 14px 18px;
|
|
}
|
|
|
|
.toolbar {
|
|
gap: 12px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.entry-meta {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 4px 12px;
|
|
}
|
|
|
|
.meta {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.toolbar label,
|
|
select,
|
|
input,
|
|
textarea,
|
|
.settings-panel button {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.link-item {
|
|
padding: 16px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.link-header {
|
|
margin-left: 14px;
|
|
}
|
|
|
|
.plugin-row {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
gap: 9px;
|
|
}
|
|
|
|
.plugin-row button {
|
|
align-self: flex-start;
|
|
}
|
|
}
|