admin/felhom.eu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website: neutralise the six declarations that leak into the shell
gates / gates (push) Successful in 7m3s
Details

Browse Source 
shell.css loads after site.css, but later-wins is per PROPERTY, not per rule.
Where site.css declares something the controller's rule does not, the website's
value survives inside the shell. Measured: exactly six declarations, three
selectors, and the first one was visibly broken on the deployed page -

  .nav-links        display:flex + gap:32px -> the sidebar menu rendered as a
                    HORIZONTAL row spilling across the content column
  .lang-globe-menu  top + right -> fought the controller's bottom/left
  .page-header      padding + text-align -> the website's centred subpage header
                    fought the controller's left-aligned flex row

Reset in site.css, the website's own file, so shell.css stays a verbatim copy.
Found by diffing the two files' declaration sets per selector rather than by
spotting the one that happened to be visible.
This commit is contained in:
authentik Default Admin
2026-10-11 13:51:23 +02:00
parent 80659232bc
commit 71df90f9fc
23 changed files with 39 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/site.css
+16
View File
@@ -2427,3 +2427,19 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
.launch-grid--mini { grid-template-columns: repeat(3, 1fr); }
.shell-section { margin-bottom: 2.5rem; }
}
/* --- the six declarations that leak into the shell, neutralised ---------------
shell.css loads after site.css, but "later wins" is per PROPERTY, not per rule.
Where site.css declares something the controller's rule does not, the website's
value survives inside the shell. Measured 2026-10-11: exactly six such
declarations across three selectors. They are reset HERE, in the website's own
file, so shell.css stays a verbatim copy.
.nav-links display:flex + gap:32px -> the sidebar menu rendered as a
horizontal row spilling across the content column
.lang-globe-menu top + right -> fought the controller's
bottom/left, so the globe opened the wrong way
.page-header padding + text-align -> the website's centred subpage
header fought the controller's left-aligned flex row */
.shell .sidebar .nav-links { display: block; gap: 0; }
.shell .sidebar .lang-globe-menu { top: auto; right: auto; }
.shell .page-header { padding: 0 0 1.25rem; text-align: left; }