From bcfc2b5901caeaabdf3efa745441a339568b671a Mon Sep 17 00:00:00 2001 From: erdgeist Date: Sun, 12 Jul 2026 23:43:25 +0200 Subject: Style the new dashboard; consolidate duplicated button/link CSS New rules for the icon nav, search bar, signpost/housekeeping button rows, and the two dashboard widgets. Generalizes .action_button from an anchor-only selector to cover any element, needed once Filter and Search became real buttons rather than submit_tag inputs coincidentally sharing similar values with the generic input[type=submit] fallback. Also folds three hand-copied duplicates of the wavy-underline "plain link" treatment (#flash a, div.pagination a, #menu_item_list td a) into the one shared rule they were always copies of -- two of the three had already silently drifted by missing the -webkit-prefixed property, the actual cost of copying instead of sharing rather than a hypothetical one. --- public/stylesheets/admin.css | 156 ++++++++++++++++++++++++++++++------------- 1 file changed, 111 insertions(+), 45 deletions(-) (limited to 'public') diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css index ade3a62..c1cc456 100644 --- a/public/stylesheets/admin.css +++ b/public/stylesheets/admin.css @@ -25,7 +25,11 @@ a:hover { body content, node listing tables, the child-creation shortcuts on nodes#show, and the dashboard draft list's Show/Revisions links. */ #page_editor a, +.dashboard_widget a, #sitemap a, +#flash a, +div.pagination a, +#menu_item_list td a, table.node_table a, table.assets_table a, table.events_table a, @@ -191,15 +195,6 @@ input[type=radio] { margin-left: 5px; } -#flash a { - text-decoration: underline; - -webkit-text-decoration-style: wavy; - text-decoration-style: wavy; - text-decoration-color: #b0b0b0; - text-decoration-thickness: 1px; - text-underline-offset: 2px; -} - #flash span { letter-spacing: 1px; margin-right: 10px; @@ -263,14 +258,6 @@ div.pagination span.gap { font-style: normal; } -div.pagination a { - text-decoration: underline; - text-decoration-style: wavy; - text-decoration-color: #b0b0b0; - text-decoration-thickness: 1px; - text-underline-offset: 2px; -} - div.pagination a:hover { color: #ff9600; } @@ -385,31 +372,108 @@ input[type="submit"]:hover { } /* ============================================================ - Wizard buttons + Admin dashboard ============================================================ */ -#admin_wizard { +#main_navigation { + display: flex; + align-items: center; + gap: 0.5rem; +} + +#main_navigation a, +#main_navigation form.button_to button { + display: inline-flex; + align-items: center; + background-color: #f7f7f7; + justify-content: center; + width: 2rem; + height: 2rem; + padding: 0; + border-radius: 2px; +} + +#main_navigation a:hover, +#main_navigation form.button_to button:hover { + background-color: #000000; + color: #ffffff; +} + +#main_navigation svg, +.action_button svg { + width: 1.25rem; + height: 1.25rem; +} + +#dashboard_search { + margin-bottom: 1.5rem; +} + +#dashboard_search input[type=text] { + width: 100%; + box-sizing: border-box; + padding: 10px 14px; + font-size: 1.1rem; + border-radius: 2px; +} + +.button_row { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: center; +} + +.button_row .action_button, +.node_search_form .action_button { + margin-bottom: 0; +} + +#dashboard_signposts { margin-bottom: 2rem; } -#page_submit, -.admin_wizard_button { - display: inline-block; - font-size: 1rem; - font-weight: bold; - padding: 0.5rem; - margin-bottom: 0.5rem; - background-color: green; +#dashboard_housekeeping h3 { + margin-bottom: 0.75rem; +} + +#dashboard_widgets { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + margin-bottom: 2rem; +} + +.dashboard_widget { + flex: 1 1 300px; + border: 1px solid #e8e8e8; + border-radius: 6px; + padding: 0.5rem 0.75rem; +} + +.dashboard_widget h3 { + margin-top: 0; +} + +.dashboard_widget ul { + list-style: none; + margin: 0 0 0.75rem; + padding: 0; } -#page_submit a, -.admin_wizard_button a { - color: white !important; +.dashboard_widget li { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + padding: 0.35rem 0; + border-bottom: 1px solid #f1f1f1; } -#page_submit:hover, -.admin_wizard_button:hover { - background-color: lime !important; +.dashboard_widget_meta { + white-space: nowrap; + color: #969696; + font-size: 0.85rem; } /* ============================================================ @@ -721,7 +785,7 @@ table.user_table td.user_login { display: block; } -a.action_button, +.action_button, form.button_to input[type="submit"], form.button_to button[type="submit"] { padding: 4px 12px; @@ -768,6 +832,11 @@ form.button_to button[type="submit"] { border-radius: 2px; } +.node_search_form .action_button { + height: 2.25rem; + box-sizing: border-box; +} + /* Layout only -- the at-rest visibility (wavy underline) for these links comes from the scoped rule in Base elements above. */ .add_child_links { @@ -840,8 +909,10 @@ div#page_editor { } #page_editor a.action_button, -a.action_button { - display: inline-block; +.action_button { + display: inline-flex; + align-items: center; + gap: 0.5rem; -webkit-appearance: none; appearance: none; border: 1px solid #000000; @@ -851,10 +922,13 @@ a.action_button { text-decoration: none; color: #000000; margin-bottom: 1rem; + background: none; + cursor: pointer; + font: inherit; } #page_editor a.action_button:hover, -a.action_button:hover { +.action_button:hover { color: #ffffff; background-color: #000000; } @@ -1104,14 +1178,6 @@ div#draft_list table td.actions a { cursor: grab; } -#menu_item_list td a { - text-decoration: underline; - text-decoration-style: wavy; - text-decoration-color: #b0b0b0; - text-decoration-thickness: 1px; - text-underline-offset: 2px; -} - .ui-state-highlight td { height: 20px; } -- cgit v1.3