From f4ff1d3e0c3f596af72a69e7aca8d506c71e84a6 Mon Sep 17 00:00:00 2001 From: erdgeist Date: Wed, 12 Aug 2026 01:59:02 +0200 Subject: Introduce a type scale and apply to the font-size rules --- public/stylesheets/admin.css | 69 +++++++++++++++++++++++++------------------- 1 file changed, 40 insertions(+), 29 deletions(-) (limited to 'public') diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css index d69a5e5c..db4b02a1 100644 --- a/public/stylesheets/admin.css +++ b/public/stylesheets/admin.css @@ -55,6 +55,15 @@ --shadow-modal: 0 4px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)); --radius: 6px; + + /* Type scale. Everything secondary is --text-sm; --text-xs is for hints + and paths. */ + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.125rem; + --text-xl: 1.25rem; + --badge-text: 0.65rem; } @media (prefers-color-scheme: light) { @@ -71,7 +80,7 @@ body { font-family: Helvetica, Arial, sans-serif; - font-size: 1rem; + font-size: var(--text-base); margin: 0px; } @@ -98,14 +107,14 @@ th { input[type=text], input[type=password], textarea { - font-size: 1rem; + font-size: var(--text-base); font-family: Helvetica, Arial, sans-serif; border: 1px solid var(--field-border); border-radius: 2px; } select { - font-size: 1rem; + font-size: var(--text-base); border: 1px solid var(--field-border); } @@ -162,7 +171,7 @@ input[type=radio] { #login_form h1 { margin-top: 0; - font-size: 1.25rem; + font-size: var(--text-xl); } #login_form label { @@ -534,7 +543,7 @@ form.button_to svg { } #main_navigation a.nav_locale { - font-size: 0.875rem; + font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; line-height: 1; @@ -548,7 +557,7 @@ form.button_to svg { width: 100%; box-sizing: border-box; padding: 10px 14px; - font-size: 1.1rem; + font-size: var(--text-lg); border-radius: 2px; } @@ -611,7 +620,7 @@ form.button_to svg { .dashboard_widget_meta { white-space: nowrap; color: var(--text-muted); - font-size: 0.85rem; + font-size: var(--text-sm); } .dashboard_widget_meta svg { @@ -690,7 +699,7 @@ form.button_to svg { align-items: center; gap: 0.3rem; margin-top: 0.25rem; - font-size: 0.875rem; + font-size: var(--text-sm); color: var(--text-muted); } @@ -913,6 +922,8 @@ form.button_to svg { background-color: var(--action-solid); } +/* Deliberate override of the rule above: the disabled tile takes its + layout from the shared selector and neutralises the fill and border. */ .action_item .disabled_action { color: var(--text-muted); background-color: transparent; @@ -1077,7 +1088,7 @@ div.layout_row_content { display: block; font-weight: normal; color: var(--text-muted); - font-size: 0.85rem; + font-size: var(--text-sm); text-transform: lowercase; } @@ -1127,7 +1138,7 @@ div.layout_row_content { .field_hint { display: block; margin-top: 2px; - font-size: 0.75rem; + font-size: var(--text-xs); color: var(--text-muted); padding-bottom: 4px; } @@ -1223,12 +1234,12 @@ div.layout_row_content { } .link_locale_tag { - font-size: 0.85rem; + font-size: var(--text-sm); color: var(--text-muted); } .link_matrix_locale { - font-size: 0.8rem; + font-size: var(--text-xs); font-variant: all-small-caps; letter-spacing: 0.06em; color: var(--text); @@ -1262,7 +1273,7 @@ div.layout_row_content { /* Transient "Copied!" text; empty at rest. */ .link_icon_button .copy_button_label:not(:empty) { margin-left: 0.35rem; - font-size: 0.85rem; + font-size: var(--text-sm); } @media (min-width: 1016px) { @@ -1407,7 +1418,7 @@ div.layout_row_content { changes. */ #sitemap summary { padding: 0 0 0.5rem 0; - font-size: 0.875rem; + font-size: var(--text-sm); margin-left: 1rem; color: var(--text-muted); } @@ -1675,7 +1686,7 @@ input#menu_item_title { padding: 2px 10px; border-radius: 999px; background-color: var(--surface-tint); - font-size: 0.85rem; + font-size: var(--text-sm); text-decoration: none; } @@ -1692,7 +1703,7 @@ input#menu_item_title { background: var(--surface-tint); border-radius: 999px; padding: 0.15rem 0.75rem; - font-size: 0.9em; + font-size: var(--text-sm); } /* ============================================================ @@ -1717,7 +1728,7 @@ input#menu_item_title { box-sizing: border-box; padding: 8px 12px; border-radius: 2px; - font-size: 18px; + font-size: var(--text-lg); } .search_results p { @@ -1730,13 +1741,13 @@ input#menu_item_title { text-decoration: none; display: block; font-weight: bold; - font-size: 0.95rem; + font-size: var(--text-base); } .search_results p span.result_path { display: block; margin-top: 2px; - font-size: 0.75rem; + font-size: var(--text-xs); font-family: monospace; color: var(--text-muted); padding-bottom: 4px; @@ -1744,14 +1755,14 @@ input#menu_item_title { .search_results .restricted_result { display: block; - font-size: 0.85rem; + font-size: var(--text-sm); color: var(--accent); } .search_results p.search_more { margin: 0; padding: 6px 4px; - font-size: 0.8rem; + font-size: var(--text-xs); color: var(--text-muted); font-style: italic; border-bottom: none; @@ -1761,7 +1772,7 @@ input#menu_item_title { margin: 8px 0 2px; padding: 0; border-bottom: none; - font-size: 0.75rem; + font-size: var(--text-xs); color: var(--text-muted); text-transform: lowercase; font-weight: normal; @@ -1802,7 +1813,7 @@ input#menu_item_title { .menu_item_translation { display: block; - font-size: 0.85rem; + font-size: var(--text-sm); color: var(--text-muted); } @@ -2138,7 +2149,7 @@ input#menu_item_title { right: 2px; background: var(--headline-badge-bg); color: var(--headline-badge-fg); - font-size: 0.65em; + font-size: var(--badge-text); text-align: center; border-radius: 3px; padding: 1px 0; @@ -2167,7 +2178,7 @@ input#menu_item_title { #node_action_list td.node_action_time { white-space: nowrap; vertical-align: top; - font-size: 0.8em; + font-size: var(--text-xs); color: var(--text-muted); padding-right: 1em; } @@ -2183,19 +2194,19 @@ input#menu_item_title { .node_action_inferred { opacity: 0.5; - font-size: smaller; + font-size: var(--text-xs); margin-left: 0.5em; } .node_action_zoom { - font-size: smaller; + font-size: var(--text-xs); margin-left: 0.5em; } .node_action_details summary { margin-top: 0.2rem; cursor: pointer; - font-size: smaller; + font-size: var(--text-xs); color: var(--text-muted); } @@ -2206,7 +2217,7 @@ input#menu_item_title { } .revision_lifecycle { - font-size: 0.85rem; + font-size: var(--text-sm); color: var(--text-muted); } -- cgit v1.3