/* Application shell on top of the Kendo Meridian theme. Loaded after bootstrap.css and site.css by both layouts. Bootstrap is kept only for its grid and spacing utilities (row, col-*, mb-3...); every control - text boxes, buttons, check boxes, cards, the app bar - is a Kendo component, and this file makes the page chrome around them use the same theme tokens so the whole application reads as one design. Colours that the company can configure (menu background/text, forum background, font colour) are applied by Views/Shared/Components/CompanySettings/Default.cshtml and override these. */ :root { --forum-page-bg: #f4f6fa; --forum-radius: var(--kendo-border-radius-lg, 8px); --forum-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08); --forum-shadow-raised: 0 4px 12px rgba(16, 24, 40, .08); --forum-appbar-height: 60px; } body { font-family: var(--kendo-font-family); background-color: var(--forum-page-bg); color: var(--kendo-color-on-app-surface, #1e293b); } h1, h2, h3, h4, h5 { font-weight: 600; } /* ---- Reading text --------------------------------------------------------------------------- Kendo's 1.5 line-height suits dense UI (grids, toolbars, form labels) but is tight for prose. Posts, answers and excerpts get looser leading, and paragraphs get a maximum line length - about 70 characters is comfortable to read, where a wide screen would otherwise give 150+. The cap is on the text blocks only, so screenshots and tables still use the full width. */ .forum-post-body, #chat .k-message { line-height: 1.65; } .forum-post-body > p, .forum-post-body > ul, .forum-post-body > ol { max-width: 72ch; } .forum-result-excerpt, .forum-chat-sub { line-height: 1.55; } /* ---- App bar (header) --------------------------------------------------------------------- */ /* offcanvas.css sets overflow-x: hidden on both html and body. With both set, body becomes its own scroll container - one that never scrolls - and position: sticky on the app bar sticks to that instead of the window, so the bar scrolled away with the page. clip hides the sideways overflow the same way without creating a scroll container. */ html, body { overflow-x: clip; } /* The bar sticks to the top of the window. site.js toggles two classes on as the page scrolls: forum-scrolled once the page has left the top, which makes the bar more compact, translucent and gives it a shadow; and forum-appbar-hidden on small screens while scrolling down, which slides it out of the way until the reader scrolls back up. */ html.forum-scrolled { --forum-appbar-height: 48px; } .forum-appbar { min-height: var(--forum-appbar-height); padding-inline: 1.25rem; gap: .5rem; z-index: 1030; /* Edge to edge: rounded corners on a bar pinned to the top show the page through them. */ border-radius: 0; /* At the top of the page only a hairline, so the bar looks part of the page. The hairline is mixed from the text colour so it works whatever menu colour the company configures. */ box-shadow: 0 1px 0 color-mix(in srgb, currentColor 12%, transparent); transition: min-height .2s ease, padding-block .2s ease, background-color .2s ease, box-shadow .2s ease, transform .25s ease; } /* Scrolled: content passes under the bar, so it lifts off the page with a soft shadow and lets the content show faintly through (Kendo already gives the app bar a backdrop blur). --forum-appbar-bg is the company's menu colour, set by the CompanySettings component. The selector is more specific than the company rule, so it wins over its !important. */ html.forum-scrolled .forum-appbar { padding-block: .375rem; box-shadow: 0 1px 0 color-mix(in srgb, currentColor 10%, transparent), 0 8px 24px -12px rgba(16, 24, 40, .35); } @supports (backdrop-filter: blur(1px)) { html.forum-scrolled .forum-appbar { background-color: color-mix(in srgb, var(--forum-appbar-bg, var(--kendo-color-inverse)) 82%, transparent) !important; backdrop-filter: saturate(1.6) blur(14px); } } @media (max-width: 767.98px) { html.forum-appbar-hidden .forum-appbar { transform: translateY(-100%); box-shadow: none; } } .forum-appbar .companyLogo { display: inline-flex; align-items: center; font-size: 1.125rem; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; transition: font-size .2s ease; } .forum-appbar .companyLogo img { max-height: 40px; width: auto; transition: max-height .2s ease; } html.forum-scrolled .forum-appbar .companyLogo { font-size: 1rem; } html.forum-scrolled .forum-appbar .companyLogo img { max-height: 32px; } /* The side menu follows the bar's height as it changes. */ .forum-shell > .k-drawer-container { transition: top .2s ease, height .2s ease; } @media (prefers-reduced-motion: reduce) { .forum-appbar, .forum-appbar .companyLogo, .forum-appbar .companyLogo img, .forum-shell > .k-drawer-container { transition: none; } } .forum-appbar .k-appbar-section { display: flex; align-items: center; gap: .25rem; } /* ---- App bar navigation ------------------------------------------------------------------- The links are pills that only show a surface on hover or for the current section, so the bar stays quiet until it is used. Everything is mixed from currentColor, which the company menu text colour sets, so the same rules hold on a light or a dark bar. */ .forum-appbar .forum-nav { gap: .125rem; } .forum-appbar .forum-nav .k-button { border: 0; border-radius: 999px; padding-block: .4375rem; padding-inline: .875rem; font-size: .9375rem; font-weight: 500; letter-spacing: -.005em; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Icons sit back a little so the labels lead; they come forward with the link. */ .forum-appbar .forum-nav .k-button .k-button-icon { opacity: .7; transition: opacity .18s ease; } /* The Meridian theme sets the flat button's background and box-shadow with !important, so the pill states have to match that to take effect. */ .forum-appbar .forum-nav .k-button.k-button-flat:hover, .forum-appbar .forum-nav .k-button.k-button-flat:focus-visible { background-color: color-mix(in srgb, currentColor 8%, transparent) !important; } .forum-appbar .forum-nav .k-button.k-button-flat:active { background-color: color-mix(in srgb, currentColor 14%, transparent) !important; } .forum-appbar .forum-nav .k-button:hover .k-button-icon, .forum-appbar .forum-nav .k-button:focus-visible .k-button-icon { opacity: 1; } .forum-appbar .forum-nav .k-button.k-button-flat:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent) !important; } /* Avatar button in the app bar, and the user card it opens. */ /* No line-height:0 here to remove the inline-block gap - use flex instead. Kendo copies the anchor's font styles onto the popup, so a 0 line-height would collapse the card's text. */ .forum-user-trigger { display: inline-flex; padding: 2px; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: box-shadow .15s ease; } .forum-user-trigger:hover, .forum-user-trigger:focus-visible { box-shadow: 0 0 0 2px var(--kendo-color-primary); outline: none; } /* Until Kendo has initialised them, the user card and the avatar are plain markup in the bar: the card (name, e-mail, "Logga ut") would show in the bar and then vanish, and the avatar would pop in. The card stays hidden until it is a popup, and the avatar spot shows a skeleton circle of the same size, so nothing in the bar moves while the page loads. */ #userMenuPopup:not(.k-popup) { display: none; } .forum-user-trigger { min-width: 36px; min-height: 36px; } .forum-user-trigger > :not(.k-avatar) { width: 32px; height: 32px; overflow: hidden; border-radius: 50%; color: transparent; background: linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent) 25%, color-mix(in srgb, currentColor 20%, transparent) 50%, color-mix(in srgb, currentColor 10%, transparent) 75%) 0 0 / 200% 100%; animation: forum-skeleton 1.2s ease-in-out infinite; } @keyframes forum-skeleton { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .forum-user-trigger > :not(.k-avatar) { animation: none; } } .forum-user-card { min-width: 260px; max-width: 320px; padding: 1rem; } .forum-user-card-head { display: flex; align-items: center; gap: .875rem; } .forum-user-card-id { display: flex; flex-direction: column; min-width: 0; } .forum-user-card-name { font-weight: 600; } .forum-user-card-email { font-size: .875rem; color: var(--kendo-color-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forum-user-card .k-hr { margin-block: .875rem; } .forum-user-card-logout { width: 100%; justify-content: flex-start; } .forum-appbar form { margin: 0; } @media (max-width: 575.98px) { .forum-appbar .forum-nav .k-button-text { display: none; } } /* ---- Side menu (Kendo Drawer, admin layout) ----------------------------------------------- */ /* The drawer and the page sit side by side; the drawer pushes the page as it expands. */ .forum-shell { display: flex; align-items: flex-start; } .forum-shell > main { flex: 1 1 auto; min-width: 0; } /* The menu stays in view while the page scrolls. */ .forum-shell > .k-drawer-container { position: sticky; top: var(--forum-appbar-height); height: calc(100vh - var(--forum-appbar-height)); flex: 0 0 auto; z-index: 1020; } .forum-shell > .k-drawer-container > .k-drawer { height: 100%; background-color: var(--kendo-color-app-surface, #fff); box-shadow: 1px 0 0 var(--kendo-color-border); } .forum-shell .k-drawer-items { gap: 2px; padding: .75rem .5rem; } /* Drawer.show()/hide() re-insert the template inside .k-drawer-items, nesting a second