surtic86andClaude Opus 5.5
f08d2c3f6c
The size modes scale rem line heights to fractions (1.25rem = 22.857px in Large), and pixel rounding moved text up to 1.2px off center. Type scale line heights and the header's 3rem now round to whole px (no change in Normal). Segmented buttons, Reset to default and the project select drop core's vertical padding, which made the line overflow and sink. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
350 lines
14 KiB
CSS
350 lines
14 KiB
CSS
/*
|
|
* Page layout: top app bar (top menu + header), primary tabs (project menu),
|
|
* sidebar card, content, footer, menus.
|
|
*
|
|
* State layers: M3 draws hover/focus/press as a translucent layer of the content
|
|
* color. Here that is a background-image of currentColor mixed at the state opacity,
|
|
* so it works on top of any background color.
|
|
*/
|
|
|
|
:root {
|
|
--nm-state-hover: linear-gradient(color-mix(in srgb, currentColor var(--md-sys-state-hover-state-layer-opacity), transparent) 0 0);
|
|
--nm-state-pressed: linear-gradient(color-mix(in srgb, currentColor var(--md-sys-state-pressed-state-layer-opacity), transparent) 0 0);
|
|
--nm-transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
|
|
color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
|
|
}
|
|
|
|
#wrapper { background: var(--md-sys-color-surface); }
|
|
|
|
/***** Top app bar *****/
|
|
nav.top-menu {
|
|
background: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-large);
|
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
padding-block: 4px;
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
.top-menu__links a, .top-menu__links a:link, .top-menu__links a:visited, #account .dropdown-trigger {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
padding-block: 6px;
|
|
padding-inline: 12px;
|
|
transition: var(--nm-transition);
|
|
}
|
|
|
|
.top-menu__links a:hover, #account .dropdown-trigger:hover {
|
|
color: var(--md-sys-color-on-surface);
|
|
background-color: transparent;
|
|
background-image: var(--nm-state-hover);
|
|
}
|
|
|
|
.top-menu__links svg.icon-svg, #account .dropdown-trigger .icon-svg,
|
|
.top-menu__links a:hover svg.icon-svg, #account .dropdown-trigger:hover .icon-svg {
|
|
stroke: currentColor;
|
|
}
|
|
|
|
#header {
|
|
background: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface);
|
|
padding-block: 4px 0;
|
|
padding-inline: 24px;
|
|
}
|
|
body.has-main-menu #header { padding-block-end: 48px; }
|
|
#header a, #header a:hover { color: var(--md-sys-color-on-surface); }
|
|
|
|
#header h1 {
|
|
font: var(--md-sys-typescale-title-large);
|
|
min-block-size: round(3rem, 1px); /* whole px, so the header controls do not sit between pixels */
|
|
}
|
|
#header h1 .breadcrumbs {
|
|
font: var(--md-sys-typescale-label-medium);
|
|
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
#header h1 .breadcrumbs a { color: var(--md-sys-color-on-surface-variant); }
|
|
|
|
#quick-search { min-block-size: round(3rem, 1px); color: var(--md-sys-color-on-surface-variant); }
|
|
#quick-search #q {
|
|
inline-size: 220px;
|
|
block-size: calc(40px + var(--nm-density));
|
|
padding-inline: 16px;
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-large);
|
|
}
|
|
#quick-search #q:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: 0; }
|
|
#quick-search form label { font: var(--md-sys-typescale-label-large); }
|
|
|
|
#project-jump.drdn { margin-inline-start: 8px; }
|
|
#project-jump .drdn-trigger {
|
|
block-size: calc(40px + var(--nm-density));
|
|
padding-block: 0; /* core's 1.5px / 3px pushed the text down */
|
|
padding-inline: 16px 36px;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-label-large);
|
|
line-height: calc(38px + var(--nm-density));
|
|
}
|
|
#project-jump .drdn-trigger:hover { background-image: var(--nm-state-hover); }
|
|
|
|
/***** Primary tabs (project menu) *****/
|
|
#main-menu {
|
|
background: var(--md-sys-color-surface-container);
|
|
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
|
padding-block: 0;
|
|
padding-inline: 16px;
|
|
}
|
|
#main-menu ul { min-block-size: calc(48px + var(--nm-density)); }
|
|
#main-menu li a {
|
|
position: relative;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-small);
|
|
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
padding-block: 14px;
|
|
padding-inline: 16px;
|
|
line-height: 20px;
|
|
transition: var(--nm-transition);
|
|
}
|
|
#main-menu li a:hover {
|
|
background-color: transparent;
|
|
background-image: var(--nm-state-hover);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
#main-menu li a.selected, #main-menu li a.selected:hover {
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-primary);
|
|
font-weight: 500;
|
|
box-shadow: none;
|
|
}
|
|
#main-menu li a.selected::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset-inline: 16px;
|
|
inset-block-end: 0;
|
|
block-size: 3px;
|
|
border-radius: 3px 3px 0 0;
|
|
background: var(--md-sys-color-primary);
|
|
}
|
|
|
|
/* "+" new object: tonal icon button */
|
|
#main-menu li a.new-object {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: calc(40px + var(--nm-density));
|
|
block-size: calc(40px + var(--nm-density));
|
|
padding: 0;
|
|
margin-block: 0;
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-medium);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
#main-menu li a.new-object:hover {
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
background-image: var(--nm-state-hover);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
/* Scroll arrows when the menu overflows: icon buttons on the bar's colour, so menu items
|
|
slide under them instead of showing through (button styles in components.css) */
|
|
#main-menu div.tabs-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
inline-size: auto;
|
|
block-size: calc(48px + var(--nm-density));
|
|
inset-inline-end: 0;
|
|
padding-inline: 8px;
|
|
border: 0;
|
|
background-color: var(--md-sys-color-surface-container);
|
|
}
|
|
|
|
/***** Menus: project menu children, dropdowns, profile menu *****/
|
|
#main-menu .menu-children,
|
|
html .drdn-content,
|
|
html .dropdown-content {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
box-shadow: var(--md-sys-elevation-level2);
|
|
color: var(--md-sys-color-on-surface);
|
|
padding-block: 8px;
|
|
overflow: hidden;
|
|
}
|
|
#main-menu .menu-children li a,
|
|
html .dropdown-content li a,
|
|
html .dropdown-content .dropdown-items a,
|
|
.drdn-items > * {
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-label-large);
|
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
padding-block: 10px;
|
|
padding-inline: 12px;
|
|
}
|
|
#main-menu .menu-children li a:hover,
|
|
html .dropdown-content li a:hover,
|
|
html .dropdown-content .dropdown-items a:hover,
|
|
.drdn-items > a:hover,
|
|
.drdn-items > a:focus {
|
|
background-color: transparent;
|
|
background-image: var(--nm-state-hover);
|
|
color: var(--md-sys-color-on-surface);
|
|
text-decoration: none;
|
|
}
|
|
#main-menu .menu-children li a:hover::after { display: none; }
|
|
.drdn-items > .selected { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
|
|
/* At medium/high contrast secondary-container turns into a dark block; the check mark already marks the item */
|
|
:root:is([data-contrast="medium"], [data-contrast="high"]) .drdn-items > .selected { background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
|
|
#project-jump .drdn-items > a:hover { background-color: transparent; color: var(--md-sys-color-on-surface) !important; }
|
|
/* Section headers (Bookmarks, Recently used, All Projects): small primary labels, a divider between sections */
|
|
#project-jump .drdn-items > strong {
|
|
padding-block: 12px 4px;
|
|
color: var(--md-sys-color-primary) !important; /* core: gray !important */
|
|
font: var(--md-sys-typescale-label-medium);
|
|
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
}
|
|
#project-jump .drdn-items > strong:not(:first-child) { margin-block-start: 8px; border-block-start: 1px solid var(--md-sys-color-outline-variant); }
|
|
div + .drdn-items, .dropdown-divider, #account .dropdown-content .logout { border-color: var(--md-sys-color-outline-variant); }
|
|
#account .dropdown-content .user-info { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
|
|
#account .dropdown-content .user-info .user-name { color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-title-small); }
|
|
|
|
/***** Content and sidebar *****/
|
|
#main { background: var(--md-sys-color-surface); }
|
|
|
|
#content {
|
|
background-color: var(--md-sys-color-surface);
|
|
padding-block: 24px 16px;
|
|
padding-inline: 24px;
|
|
}
|
|
|
|
#sidebar {
|
|
background: var(--md-sys-color-surface-container-low);
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-large);
|
|
margin-block: 16px;
|
|
margin-inline-end: 16px;
|
|
padding-block: 16px;
|
|
padding-inline: 16px;
|
|
box-sizing: border-box;
|
|
align-self: flex-start;
|
|
}
|
|
/* Collapsed: only the switch button remains, in a small rounded surface */
|
|
#main.collapsedsidebar #sidebar { inline-size: auto; margin-block: 16px; margin-inline-end: 16px; padding: 4px; }
|
|
#main.collapsedsidebar #sidebar-switch-panel { float: none; margin: 0; }
|
|
#sidebar h3 {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-small);
|
|
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
margin-block: 16px 8px;
|
|
}
|
|
#sidebar hr { background: var(--md-sys-color-outline-variant); margin-block: 12px; }
|
|
|
|
/* Collapse button: 32px icon button in the top corner, level with the first heading */
|
|
#sidebar-switch-panel { float: inline-end; inline-size: auto; margin-block: -6px 0; margin-inline: 8px -6px; padding: 0; }
|
|
#sidebar-switch-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: 32px;
|
|
block-size: 32px;
|
|
padding: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
#sidebar-switch-button svg { stroke: var(--md-sys-color-on-surface-variant); color: inherit; }
|
|
#sidebar-switch-button:hover { background-color: transparent; background-image: var(--nm-state-hover); }
|
|
|
|
/* Sidebar forms (activity, roadmap, …): label above a full-width field */
|
|
#sidebar form > p:has(> input:not([type="submit"], [type="hidden"], [type="checkbox"]), > select) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
margin-block: 0 12px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-medium);
|
|
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
}
|
|
#sidebar form > p > :is(input:not([type="submit"], [type="checkbox"]), select) { inline-size: 100%; max-inline-size: none; margin: 0; }
|
|
/* First heading sits level with the collapse button, also after hidden form inputs */
|
|
#sidebar-wrapper > form:first-child > h3:first-of-type,
|
|
#sidebar-wrapper > .contextual:first-child + h3 { margin-block-start: 0; }
|
|
#sidebar-wrapper > .contextual:first-child { margin-block: 0; }
|
|
/* Watchers opening the sidebar: "Add" sits next to the collapse button, heading level with it */
|
|
#sidebar-wrapper > #watchers:first-child > .contextual { margin-block: 0; margin-inline-end: 0; }
|
|
#sidebar-wrapper > #watchers:first-child > .contextual + h3 { margin-block-start: 0; }
|
|
#sidebar form > p:empty { display: none; }
|
|
|
|
/* Checkbox lists: even 32px rows, text-colored labels */
|
|
#sidebar li:has(input[type="checkbox"]),
|
|
#sidebar :is(li, form > p) > label:has(input[type="checkbox"]),
|
|
#sidebar form > p:has(> input[type="checkbox"]) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-block-size: calc(32px + var(--nm-density));
|
|
}
|
|
#sidebar :is(li, form > p) > label:has(input[type="checkbox"]) { flex: 1; }
|
|
#sidebar input[type="checkbox"] { inline-size: 18px; block-size: 18px; margin: 0; flex-shrink: 0; }
|
|
#sidebar li label, #sidebar li label a, #sidebar form > p > label { color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-medium); }
|
|
#sidebar ul + ul, #sidebar ul + p { margin-block-start: 12px; }
|
|
|
|
/* Navigation-drawer style items for plain link lists in the sidebar (queries, sort order,
|
|
versions, wiki index, …): a link that is alone in its list item, or a saved query */
|
|
#sidebar li > a:is(:only-child, .query), #admin-menu li a {
|
|
display: flex;
|
|
align-items: center;
|
|
min-block-size: calc(36px + var(--nm-density));
|
|
padding-block: 8px; /* long names wrap: keep the items apart */
|
|
padding-inline: 12px;
|
|
box-sizing: border-box;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-medium); /* regular weight: only the section titles are bold */
|
|
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
transition: var(--nm-transition);
|
|
}
|
|
#sidebar li > a:is(:only-child, .query):hover, #admin-menu li a:hover { background-image: var(--nm-state-hover); text-decoration: none; }
|
|
#sidebar li > a.selected:is(:only-child, .query), #admin-menu li a.selected {
|
|
margin-inline-start: 0; /* core: -6px, inset marker bar */
|
|
padding-block: 8px;
|
|
box-shadow: none;
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
#admin-menu li, #sidebar li:has(> a:is(:only-child, .query)) { padding-block-end: 2px; }
|
|
/* The selected query also holds its "clear" icon: it sits at the end, inside the pill */
|
|
#sidebar li:has(> .icon-clear-query) { display: grid; align-items: center; }
|
|
#sidebar li:has(> .icon-clear-query) > * { grid-area: 1 / 1; }
|
|
#sidebar li:has(> .icon-clear-query) > a.query { padding-inline-end: 40px; }
|
|
#sidebar li > .icon-clear-query { justify-self: end; margin-inline-end: 12px; color: var(--md-sys-color-on-secondary-container); }
|
|
|
|
/***** Footer *****/
|
|
#footer {
|
|
background: var(--md-sys-color-surface);
|
|
border: 0;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-small);
|
|
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
padding: 16px;
|
|
}
|
|
|
|
/***** Login *****/
|
|
#login-form {
|
|
inline-size: 400px;
|
|
padding: 24px;
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
}
|
|
#login-form label { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); }
|
|
#login-form input { block-size: calc(40px + var(--nm-density)); }
|