summaryrefslogtreecommitdiff
path: root/public/stylesheets
diff options
context:
space:
mode:
Diffstat (limited to 'public/stylesheets')
-rw-r--r--public/stylesheets/admin.css69
1 files changed, 40 insertions, 29 deletions
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 @@
55 --shadow-modal: 0 4px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)); 55 --shadow-modal: 0 4px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
56 56
57 --radius: 6px; 57 --radius: 6px;
58
59 /* Type scale. Everything secondary is --text-sm; --text-xs is for hints
60 and paths. */
61 --text-xs: 0.75rem;
62 --text-sm: 0.875rem;
63 --text-base: 1rem;
64 --text-lg: 1.125rem;
65 --text-xl: 1.25rem;
66 --badge-text: 0.65rem;
58} 67}
59 68
60@media (prefers-color-scheme: light) { 69@media (prefers-color-scheme: light) {
@@ -71,7 +80,7 @@
71 80
72body { 81body {
73 font-family: Helvetica, Arial, sans-serif; 82 font-family: Helvetica, Arial, sans-serif;
74 font-size: 1rem; 83 font-size: var(--text-base);
75 margin: 0px; 84 margin: 0px;
76} 85}
77 86
@@ -98,14 +107,14 @@ th {
98input[type=text], 107input[type=text],
99input[type=password], 108input[type=password],
100textarea { 109textarea {
101 font-size: 1rem; 110 font-size: var(--text-base);
102 font-family: Helvetica, Arial, sans-serif; 111 font-family: Helvetica, Arial, sans-serif;
103 border: 1px solid var(--field-border); 112 border: 1px solid var(--field-border);
104 border-radius: 2px; 113 border-radius: 2px;
105} 114}
106 115
107select { 116select {
108 font-size: 1rem; 117 font-size: var(--text-base);
109 border: 1px solid var(--field-border); 118 border: 1px solid var(--field-border);
110} 119}
111 120
@@ -162,7 +171,7 @@ input[type=radio] {
162 171
163#login_form h1 { 172#login_form h1 {
164 margin-top: 0; 173 margin-top: 0;
165 font-size: 1.25rem; 174 font-size: var(--text-xl);
166} 175}
167 176
168#login_form label { 177#login_form label {
@@ -534,7 +543,7 @@ form.button_to svg {
534} 543}
535 544
536#main_navigation a.nav_locale { 545#main_navigation a.nav_locale {
537 font-size: 0.875rem; 546 font-size: var(--text-sm);
538 font-weight: 700; 547 font-weight: 700;
539 letter-spacing: 0.04em; 548 letter-spacing: 0.04em;
540 line-height: 1; 549 line-height: 1;
@@ -548,7 +557,7 @@ form.button_to svg {
548 width: 100%; 557 width: 100%;
549 box-sizing: border-box; 558 box-sizing: border-box;
550 padding: 10px 14px; 559 padding: 10px 14px;
551 font-size: 1.1rem; 560 font-size: var(--text-lg);
552 border-radius: 2px; 561 border-radius: 2px;
553} 562}
554 563
@@ -611,7 +620,7 @@ form.button_to svg {
611.dashboard_widget_meta { 620.dashboard_widget_meta {
612 white-space: nowrap; 621 white-space: nowrap;
613 color: var(--text-muted); 622 color: var(--text-muted);
614 font-size: 0.85rem; 623 font-size: var(--text-sm);
615} 624}
616 625
617.dashboard_widget_meta svg { 626.dashboard_widget_meta svg {
@@ -690,7 +699,7 @@ form.button_to svg {
690 align-items: center; 699 align-items: center;
691 gap: 0.3rem; 700 gap: 0.3rem;
692 margin-top: 0.25rem; 701 margin-top: 0.25rem;
693 font-size: 0.875rem; 702 font-size: var(--text-sm);
694 color: var(--text-muted); 703 color: var(--text-muted);
695} 704}
696 705
@@ -913,6 +922,8 @@ form.button_to svg {
913 background-color: var(--action-solid); 922 background-color: var(--action-solid);
914} 923}
915 924
925/* Deliberate override of the rule above: the disabled tile takes its
926 layout from the shared selector and neutralises the fill and border. */
916.action_item .disabled_action { 927.action_item .disabled_action {
917 color: var(--text-muted); 928 color: var(--text-muted);
918 background-color: transparent; 929 background-color: transparent;
@@ -1077,7 +1088,7 @@ div.layout_row_content {
1077 display: block; 1088 display: block;
1078 font-weight: normal; 1089 font-weight: normal;
1079 color: var(--text-muted); 1090 color: var(--text-muted);
1080 font-size: 0.85rem; 1091 font-size: var(--text-sm);
1081 text-transform: lowercase; 1092 text-transform: lowercase;
1082} 1093}
1083 1094
@@ -1127,7 +1138,7 @@ div.layout_row_content {
1127.field_hint { 1138.field_hint {
1128 display: block; 1139 display: block;
1129 margin-top: 2px; 1140 margin-top: 2px;
1130 font-size: 0.75rem; 1141 font-size: var(--text-xs);
1131 color: var(--text-muted); 1142 color: var(--text-muted);
1132 padding-bottom: 4px; 1143 padding-bottom: 4px;
1133} 1144}
@@ -1223,12 +1234,12 @@ div.layout_row_content {
1223} 1234}
1224 1235
1225.link_locale_tag { 1236.link_locale_tag {
1226 font-size: 0.85rem; 1237 font-size: var(--text-sm);
1227 color: var(--text-muted); 1238 color: var(--text-muted);
1228} 1239}
1229 1240
1230.link_matrix_locale { 1241.link_matrix_locale {
1231 font-size: 0.8rem; 1242 font-size: var(--text-xs);
1232 font-variant: all-small-caps; 1243 font-variant: all-small-caps;
1233 letter-spacing: 0.06em; 1244 letter-spacing: 0.06em;
1234 color: var(--text); 1245 color: var(--text);
@@ -1262,7 +1273,7 @@ div.layout_row_content {
1262/* Transient "Copied!" text; empty at rest. */ 1273/* Transient "Copied!" text; empty at rest. */
1263.link_icon_button .copy_button_label:not(:empty) { 1274.link_icon_button .copy_button_label:not(:empty) {
1264 margin-left: 0.35rem; 1275 margin-left: 0.35rem;
1265 font-size: 0.85rem; 1276 font-size: var(--text-sm);
1266} 1277}
1267 1278
1268@media (min-width: 1016px) { 1279@media (min-width: 1016px) {
@@ -1407,7 +1418,7 @@ div.layout_row_content {
1407 changes. */ 1418 changes. */
1408#sitemap summary { 1419#sitemap summary {
1409 padding: 0 0 0.5rem 0; 1420 padding: 0 0 0.5rem 0;
1410 font-size: 0.875rem; 1421 font-size: var(--text-sm);
1411 margin-left: 1rem; 1422 margin-left: 1rem;
1412 color: var(--text-muted); 1423 color: var(--text-muted);
1413} 1424}
@@ -1675,7 +1686,7 @@ input#menu_item_title {
1675 padding: 2px 10px; 1686 padding: 2px 10px;
1676 border-radius: 999px; 1687 border-radius: 999px;
1677 background-color: var(--surface-tint); 1688 background-color: var(--surface-tint);
1678 font-size: 0.85rem; 1689 font-size: var(--text-sm);
1679 text-decoration: none; 1690 text-decoration: none;
1680} 1691}
1681 1692
@@ -1692,7 +1703,7 @@ input#menu_item_title {
1692 background: var(--surface-tint); 1703 background: var(--surface-tint);
1693 border-radius: 999px; 1704 border-radius: 999px;
1694 padding: 0.15rem 0.75rem; 1705 padding: 0.15rem 0.75rem;
1695 font-size: 0.9em; 1706 font-size: var(--text-sm);
1696} 1707}
1697 1708
1698/* ============================================================ 1709/* ============================================================
@@ -1717,7 +1728,7 @@ input#menu_item_title {
1717 box-sizing: border-box; 1728 box-sizing: border-box;
1718 padding: 8px 12px; 1729 padding: 8px 12px;
1719 border-radius: 2px; 1730 border-radius: 2px;
1720 font-size: 18px; 1731 font-size: var(--text-lg);
1721} 1732}
1722 1733
1723.search_results p { 1734.search_results p {
@@ -1730,13 +1741,13 @@ input#menu_item_title {
1730 text-decoration: none; 1741 text-decoration: none;
1731 display: block; 1742 display: block;
1732 font-weight: bold; 1743 font-weight: bold;
1733 font-size: 0.95rem; 1744 font-size: var(--text-base);
1734} 1745}
1735 1746
1736.search_results p span.result_path { 1747.search_results p span.result_path {
1737 display: block; 1748 display: block;
1738 margin-top: 2px; 1749 margin-top: 2px;
1739 font-size: 0.75rem; 1750 font-size: var(--text-xs);
1740 font-family: monospace; 1751 font-family: monospace;
1741 color: var(--text-muted); 1752 color: var(--text-muted);
1742 padding-bottom: 4px; 1753 padding-bottom: 4px;
@@ -1744,14 +1755,14 @@ input#menu_item_title {
1744 1755
1745.search_results .restricted_result { 1756.search_results .restricted_result {
1746 display: block; 1757 display: block;
1747 font-size: 0.85rem; 1758 font-size: var(--text-sm);
1748 color: var(--accent); 1759 color: var(--accent);
1749} 1760}
1750 1761
1751.search_results p.search_more { 1762.search_results p.search_more {
1752 margin: 0; 1763 margin: 0;
1753 padding: 6px 4px; 1764 padding: 6px 4px;
1754 font-size: 0.8rem; 1765 font-size: var(--text-xs);
1755 color: var(--text-muted); 1766 color: var(--text-muted);
1756 font-style: italic; 1767 font-style: italic;
1757 border-bottom: none; 1768 border-bottom: none;
@@ -1761,7 +1772,7 @@ input#menu_item_title {
1761 margin: 8px 0 2px; 1772 margin: 8px 0 2px;
1762 padding: 0; 1773 padding: 0;
1763 border-bottom: none; 1774 border-bottom: none;
1764 font-size: 0.75rem; 1775 font-size: var(--text-xs);
1765 color: var(--text-muted); 1776 color: var(--text-muted);
1766 text-transform: lowercase; 1777 text-transform: lowercase;
1767 font-weight: normal; 1778 font-weight: normal;
@@ -1802,7 +1813,7 @@ input#menu_item_title {
1802 1813
1803.menu_item_translation { 1814.menu_item_translation {
1804 display: block; 1815 display: block;
1805 font-size: 0.85rem; 1816 font-size: var(--text-sm);
1806 color: var(--text-muted); 1817 color: var(--text-muted);
1807} 1818}
1808 1819
@@ -2138,7 +2149,7 @@ input#menu_item_title {
2138 right: 2px; 2149 right: 2px;
2139 background: var(--headline-badge-bg); 2150 background: var(--headline-badge-bg);
2140 color: var(--headline-badge-fg); 2151 color: var(--headline-badge-fg);
2141 font-size: 0.65em; 2152 font-size: var(--badge-text);
2142 text-align: center; 2153 text-align: center;
2143 border-radius: 3px; 2154 border-radius: 3px;
2144 padding: 1px 0; 2155 padding: 1px 0;
@@ -2167,7 +2178,7 @@ input#menu_item_title {
2167#node_action_list td.node_action_time { 2178#node_action_list td.node_action_time {
2168 white-space: nowrap; 2179 white-space: nowrap;
2169 vertical-align: top; 2180 vertical-align: top;
2170 font-size: 0.8em; 2181 font-size: var(--text-xs);
2171 color: var(--text-muted); 2182 color: var(--text-muted);
2172 padding-right: 1em; 2183 padding-right: 1em;
2173} 2184}
@@ -2183,19 +2194,19 @@ input#menu_item_title {
2183 2194
2184.node_action_inferred { 2195.node_action_inferred {
2185 opacity: 0.5; 2196 opacity: 0.5;
2186 font-size: smaller; 2197 font-size: var(--text-xs);
2187 margin-left: 0.5em; 2198 margin-left: 0.5em;
2188} 2199}
2189 2200
2190.node_action_zoom { 2201.node_action_zoom {
2191 font-size: smaller; 2202 font-size: var(--text-xs);
2192 margin-left: 0.5em; 2203 margin-left: 0.5em;
2193} 2204}
2194 2205
2195.node_action_details summary { 2206.node_action_details summary {
2196 margin-top: 0.2rem; 2207 margin-top: 0.2rem;
2197 cursor: pointer; 2208 cursor: pointer;
2198 font-size: smaller; 2209 font-size: var(--text-xs);
2199 color: var(--text-muted); 2210 color: var(--text-muted);
2200} 2211}
2201 2212
@@ -2206,7 +2217,7 @@ input#menu_item_title {
2206} 2217}
2207 2218
2208.revision_lifecycle { 2219.revision_lifecycle {
2209 font-size: 0.85rem; 2220 font-size: var(--text-sm);
2210 color: var(--text-muted); 2221 color: var(--text-muted);
2211} 2222}
2212 2223