/* Theme Name: Kommunity Description: Ett roligare intranät. Version: 1.0 Author: Tobias Hassgård Author URI: https://hillsidepeak.com/ Copyright: Svedala kommun */ /* ================================ INDEX: 01 Defaults 02 Commons 03 Navigations 04 Layouts and contents 05 Misc 06 Overriding styles ================================ ------------------------------------------------------------------------------------------------------------- 01 Defaults ------------------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /*** Imports ***/ @import url('css/reset.css'); @import url('css/fonts/lato.css'); @import url('css/color-palette.css'); :root { color-scheme: light dark; --filter-lighten: invert(98%) sepia(14%) saturate(184%) hue-rotate(233deg) brightness(115%) contrast(73%); --radius-3: 3px; --radius-5: 5px; --box-shadow-bottom: 0 3px 5px rgba(0,0,0,0.1); --box-shadow-left: -3px 0 5px rgba(0,0,0,0.1); } * { scroll-margin-top: 4.5rem; } *[data-width-limit="true"] { max-width: 80rem !important; } body { font-family:'Lato', sans-serif; background-image:none; background-repeat:repeat; background-size:cover; background-attachment:fixed; background-position:center; } input, button, .button, select, textarea { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1rem; text-decoration: none; width: 100%; border: 1px solid; padding: 0.75rem 1.25rem; margin-top: 0.5rem; box-sizing: border-box; } button, button[type="reset"], input[type="submit"], .button, input[type="reset"] { font-size: 0.75rem; line-height: normal; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; border-radius: var(--radius-3); position: relative; -webkit-appearance: none; appearance: none; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } input[type="search"] { appearance: none; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-family: 'Lato', serif; font-weight: 700; } button[role="switch"] { width:3.5rem; padding: 0.25rem; border-radius: 2rem; transition: all 200ms ease-in-out; } button[role="switch"] span { display: block; width: 1rem; height: 1rem; border-radius: 50%; transition: all 100ms ease-in-out; } button[role="switch"][aria-checked="false"] span { margin: 0 auto 0 0; } button[role="switch"][aria-checked="true"] span { margin: 0 0 0 auto; outline: 5px solid; outline-offset: -10px; } h1 { font-size: 1.625rem; } h2 { font-size: 1.25rem; margin: 0.75rem 0 0.875rem 0; } h3 { font-size: 1.125rem; margin-top: 0.5rem; } h4 { font-family: 'Lato', sans-serif; font-size: 1rem; font-style: italic; margin-top: 0.25rem; } p { word-break: break-word; hyphens: auto; } p:last-of-type { margin-bottom: 0; } a { display: flex; flex-direction: row; text-decoration:underline; font-weight:normal; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } a:focus, button:focus { outline: 3px solid; outline-offset: 0px; } a.button:focus, button:focus { outline-offset: -3px; } a[target="_blank"]:not(:empty)::after, .anchor::after, a[href$=".pdf"]::after { content: ''; display: inline-block; position: relative; width: 0.625rem; height: 0.625rem; mask-size: contain; margin-right: 0.625rem; top: 0; left: 0.25rem; } a[href$=".pptx"]::after, a[href$=".ppt"]::after, a[href$=".docx"]::after, a[href$=".doc"]::after, a[href$=".xlsx"]::after, a[href$=".xls"]::after { content: ''; display: inline-block; position: relative; width: 1rem !important; height: 1rem !important; background-size: cover; margin-right: 0.625rem; top: 0; left: 0.25rem; background-color: transparent !important; mask-image: none !important; } a[target="_blank"]:not(:empty)::after { mask-image: url('media/icons/iconNewWindow.svg'); } .anchor::after { mask-image: url('media/icons/iconAnchorLink.svg'); } a[href$=".pdf"]::after { mask-image: url('media/icons/iconPdf_simple.svg') !important; width:0.875rem !important; height:0.875rem !important; } a[href$=".pptx"]::after, a[href$=".ppt"]::after { background-image: url('media/icons/iconPowerpoint.svg'); } a[href$=".docx"]::after, a[href$=".doc"]::after { background-image: url('media/icons/iconWord.svg'); } a[href$=".xlsx"]::after, a[href$=".xls"]::after { background-image: url('media/icons/iconExcel.svg'); } .article .content a[target="_blank"]:not(:empty) span::after { content: '(öppnas i ny flik)'; display: inline-block; margin-left: 0.25em; } .article .content a[target="_blank"][href$=".pdf"]:not(:empty) span::after { content: '(PDF, öppnas i ny flik)'; display: inline-block; margin-left: 0.25em; } .article .content a[target="_blank"][href$=".docx"]:not(:empty) span::after, .article .content a[target="_blank"][href$=".doc"]:not(:empty) span::after { content: '(Word, öppnas i ny flik)'; display: inline-block; margin-left: 0.25em; } .article .content a[target="_blank"][href$=".pptx"]:not(:empty) span::after, .article .content a[target="_blank"][href$=".ppt"]:not(:empty) span::after { content: '(PowerPoint, öppnas i ny flik)'; display: inline-block; margin-left: 0.25em; } .article .content a[target="_blank"][href$=".xlsx"]:not(:empty) span::after, .article .content a[target="_blank"][href$=".xls"]:not(:empty) span::after { content: '(Excel, öppnas i ny flik)'; display: inline-block; margin-left: 0.25em; } hr { width: 100%; } figure img { width: 100%; max-height: 25rem; object-fit: cover; } figure a[target="_blank"]:not(:empty)::after { display: none; } figcaption { font-size: 0.875rem; font-style: italic; line-height: 1.25; padding: 1rem; border-bottom: 1px solid; box-sizing: border-box; } form { display: block; width: 100%; } legend { width: 100%; } dialog { padding: 0; border: 1px solid; } .no-button[role="button"] { width: auto; appearance: none; cursor: pointer; background-color: unset; padding: 0; margin: 0; border: 0; text-transform: none; letter-spacing: 0; font-size: 0.875rem; } .no-button[role="button"]:hover { text-decoration: underline; } /* p + h2 { margin-top:1.5rem; } p + h3 { margin-top:1rem; } p + h4 { margin-top:0.5rem; } */ @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } /* ---------------------------------------------------------------------------------------------------------- 02 Common classes ------------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ .row, .column { display: flex; flex-grow: 1; flex-shrink: 1; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; } .row { display: flex; flex-basis:100%; flex-direction: row; align-items: stretch; width: 100%; margin: auto; } .column { display: flex; flex-direction: column; align-items: flex-start; margin: 0; row-gap: 2rem; } .widthFull { width: 100%; max-width: 100% !important; } .widthNormal { max-width: 54rem !important; width: 100%; margin: auto; } .banner { flex:1 1 auto; width: 100%; padding: 2rem; background: #E83C4D; background: linear-gradient(90deg,rgba(232, 60, 77, 1) 0%, rgba(76, 60, 144, 1) 100%); background-size: cover; background-repeat: no-repeat; background-position: center; } .article.column { row-gap: 0; width: 100%; max-width: 54rem; margin: auto; text-align: left; border-radius: var(--radius-5); box-shadow: var(--box-shadow-bottom); } .article .header { font-size: 0.875rem; } .article .header > .row { column-gap: 1rem; padding: 1rem; border-bottom: 1px solid; } .article .header > .row.content { flex-direction: column; padding: 2rem 2rem 1rem 2rem; border: 0; } .article[data-post-type="application"] .header > .row.content { flex-direction: row; flex-wrap: wrap; padding: 1.5rem 2rem; border-bottom: 1px solid; } .article .header > .row.content .heading.h1 { align-self: flex-start; } .article .header .iconBefore { display: flex; align-items: center; margin: 0; } .article .header .iconCategory::before { width: 1.375rem; height: 1.375rem; margin-right: 0; } .article .moreActions { align-items: flex-end; } .article .moreActions [role="tablist"] { width: auto; flex-wrap: nowrap; } .article .moreActions [role="tablist"] .button { flex: 0 1 content; position: relative; padding: 0.5rem; border-color: var(--neutral-7); } .article .moreActions [role="tablist"] .button.iconBefore::before { margin-right: 0; background-color: var(--neutral-1); } .article .moreActions [role="tablist"] .button:hover { background-color: var(--blue-3); } .article .moreActions [role="tablist"] .button:hover::before { background-color: var(--neutral-8); } .article .moreActions .section[role="tabpanel"] { width: auto; min-width: fit-content; padding: 0.75rem; position: absolute; border: 1px solid; border-color: light-dark(var(--neutral-3), var(--neutral-8)); border-radius:var(--radius-5); box-shadow: var(--box-shadow-bottom); background-color: light-dark(var(--neutral-1), var(--neutral-7)); z-index: 10; } .article .moreActions .section[aria-hidden="true"] { visibility: hidden; opacity: 0; top: -100vh; } .article .moreActions .section[aria-hidden="false"] { visibility: visible; opacity: 1; top: calc(100% + 0.25rem); } .article .moreActions .section ul { row-gap: 0.25rem; margin: 0; } .article .moreActions .section ul li { width: 100%; list-style-type: none; margin: 0; } .article .moreActions .section .button { width: 100%; min-width: auto; position: relative; padding: 0.75rem 1rem; border-width: 1px; border-radius: var(--radius-3); font-size: 0.75rem; z-index: 5; } .article .moreActions .section .button::before { margin-right: 0; font-size: 1rem; } .article[data-post-type="page"] .moreActions { position: absolute; top: 1rem; right: 1rem; z-index: 5; } .article .header .iconBookmark::before { mask-image: url('media/icons/iconBookmark.svg'), url('media/icons/iconBookmark.svg'), url('media/icons/iconBookmark.svg'), url('media/icons/iconBookmark.svg'); } /* Doubled up to make it more bold. */ .article .profileImage { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; margin: 0; z-index: 2; } .article .header .column { width: auto; justify-content: center; row-gap: 0; flex: 1 1 fit-content; } .article[data-post-type="application"] .header .column { flex: 1 1 auto; width: auto; } .article .header .metadata div { margin: 0; row-gap: 0.25rem; } .article table { width: 100%; margin-bottom: 1rem; } .article table caption { font-size: 1.125rem; margin: 0.5rem 0 0.25rem 0; font-weight: 700; } .article table th, .article table td { padding: 0.5rem 1rem; vertical-align: middle; } .article .tableWrapper { width: 100%; margin: 0; overflow-y: auto; } .article .metainformation table { margin-top: 1rem; } .article .metainformation .header > .row.content { padding: 1rem 2rem; border-bottom: 1px solid; } .article .metainformation .header h2 { margin: 0.75rem 0; } .article .column { width: 100%; row-gap: 0; } .article .featuredImageWrapper { } .article .featuredImage { padding: 1rem 0; } .article .featuredImage video { width: 100%; max-height: 25rem; object-fit: cover; } .article .featuredImage iframe { display: flex; width: 100%; max-height: 25rem; } .article .featuredImage img { height: 100%; max-height: 25rem; } .article .content { padding: 1rem 2rem 2rem 2rem; } .article .content .row { column-gap: 2rem; } .article .content a { display: inline-block; width: fit-content; } .article .form { margin: 1rem 0; } .article .form fieldset > .row { flex-wrap: wrap; row-gap: 0.5rem; margin: 0; } .article .form fieldset > .row .column { flex: 1 1 auto; width: fit-content; } .article .form fieldset > .row .column label { display: flex; flex: 1 1 100%; flex-direction: column; width: 100%; } .article .form fieldset p { margin-bottom: 0.5rem; } .article .form .switch { border-radius: var(--radius-5); margin: 0; width: 4.5rem; padding: 0.375rem; background-color: var(--neutral-2); border-color: var(--neutral-4); } .article .form .switch span { padding: 0.375rem; border-radius: var(--radius-3); } .article .form .switch[aria-checked="false"] span { background-color: var(--neutral-5); } .article .form .switch[aria-checked="true"] span { background-color: var(--blue-4); } .grid { width: 100%; } .grid > .row { column-gap: 2rem; row-gap: 2rem; } .grid > .row .column { flex: 1 1 50%; margin: 0; } .grid > .row[data-columns="1"] .column { flex: 1 1 100%; margin: auto; } .grid > .row [data-column-items="single"] .article > .column.featuredImage { flex: 0 1 50%; max-height: fit-content; } .grid > .row [data-column-items="single"] .article .column:first-of-type .featuredImage { border-radius: var(--radius-5) var(--radius-5) 0 0; overflow: hidden; } .grid > .row [data-column-items="multiple"] .article .row > .column:first-of-type { flex: 1 1 8rem; } .grid > .row [data-column-items="multiple"] .article .row > .column:first-of-type .featuredImage { height: 100%; border-radius: var(--radius-5) 0 0 var(--radius-5); overflow: hidden; } .grid > .row [data-column-items="multiple"] .article .row > .column:first-of-type .featuredImage img { max-height: none; } .grid > .row .featuredImage { padding: 0; } .grid > .row .featuredImage img { max-height: 12.5rem; } .grid > .row .article .footer { flex: 0 1 fit-content; } .grid > .row .article .footer .row { justify-content: center; } .grid > .row .button { max-width: 25rem; } .content { line-height: 1.5; row-gap: 0; } .content.column { row-gap: 0; } .content ul { margin-bottom: 0.75rem; } .content ul li, .content ol li { margin-left: 2rem; } .preamble { font-size: 1.25rem; font-weight: 400; line-height: 1.5; } .preamble p { margin: auto; } .profileImage { width: 5.5rem; height: 5.5rem; background-size:contain; border-radius:50%; border:2px solid; } .profileImage.missing { background-image: url('media/icons/iconProfileMissing.svg'); } img.profileImage { object-fit: cover; box-sizing: border-box; } .profileImageEdit { flex: 0 0 fit-content; display: inline-flex; padding: 0; margin: 0; border: none; border-radius: 50%; background: none; cursor: pointer; } .profileImageEdit .profileImage { transition: filter 0.15s ease-in-out; } .profileImageEdit:hover .profileImage, .profileImageEdit:focus-visible .profileImage { filter: brightness(0.8); } .profileImageEdit:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } .heading { display: flex; align-items: center; align-self: center; font-size: 3rem; font-weight: 700; } .heading.h1 { color: inherit; font-size: 1.625rem; text-shadow: none; } .heading.h2 { color: inherit; font-size: 1.25rem; margin: 0.75rem 0 0.875rem 0; text-shadow: none; } .heading.h3 { color: inherit; font-size: 1.125rem; margin-top: 0.5rem; text-shadow: none; } .submenu { width: 100%; text-align: left; font-size: 0.75rem; text-transform: uppercase; box-sizing: border-box; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin: auto; text-align: center; clear: both; } .clear { clear: both; margin: 0; padding: 0; } .fixed { position: fixed !important; } .visible { visibility: visible !important; opacity: 1; transition: opacity 250ms linear; } .invisible { visibility: hidden; opacity: 0; width: 0; height: 0; padding: 0; margin: 0; transition: visibility 0s 250ms, opacity 250ms linear; } .buttonGroup { display: flex; flex-direction: row; } .button { display: flex; flex: 1 1 content; justify-content: center; align-items: center; column-gap: 0.75rem; width: auto; font-size: 0.75rem; letter-spacing: 1px; border-radius: var(--radius-3); margin: 0; min-width: 2.625rem; text-decoration: none; } .button[disabled] { cursor: not-allowed; } .button.edit { flex: 0 1 fit-content; padding: 0.25rem 0.5rem; margin: 1rem 0 0 0; } .button.edit::before { margin-right: 0; } .logo { width: auto; text-align: center; display: block; position: relative; margin: auto; } .logo img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; } .logo.application { margin-right: 1rem; } .logo.application img { max-width: 10rem; max-height: 3rem; } .description { text-align:left; } .separator { margin: 0 0.25rem; } .author { font-weight: 700; } .author a { display: inline-block; font-weight: 700; text-decoration: none; } .author a:hover { text-decoration: underline; } .badgeGroup { display: flex; flex-direction: row; column-gap: 0.25rem; row-gap: 0.25rem; } .badge { flex: 0 0 auto; padding: 0.25rem 0.375rem; border-radius: var(--radius-3); font-size: 0.75rem; font-weight: 400; white-space: nowrap; } .badge.author { background-color: var(--blue-4); color: var(--neutral-1); } .badge[data-state] { border-width: 1px; border-style: solid; } .cancel { display: flex; flex-direction: row; align-items: center; column-gap: 0.5rem; } .cancel::before { content: '\2A2F'; display: flex; width: 1em; height: 1em; justify-content: center; justify-items: center; align-items: center; align-self: center; font-size: 1em; } .cancel:not(:empty)::before { } .help { cursor: help; } .form { width: 100%; column-gap: 0.5rem !important; row-gap: 0.75rem !important; box-sizing: border-box; } .input, .select { flex: 1 1 auto; padding: 0.75rem 1rem; margin-top: 0; border: 1px solid; border-radius: var(--radius-5); font-size: 0.875rem; } .select { padding: calc(0.75rem - 1px) 1rem; } textarea.input { height: 2.5rem; min-height: 2.5rem; resize: vertical; } .breadcrumbs > *:nth-child(1) { display: flex; margin-left: 0; } .mandatory .submenu { border-top: 1px solid; } .flag { position: absolute; left: 0; top: 0; z-index: 10; text-transform: uppercase; border: 0; padding: 0.625rem 1rem; font-size: 0.75rem; background-color: var(--neutral-8); color: var(--neutral-1); border-radius: var(--radius-5) 0 var(--radius-5) 0; } .nav-links { flex-wrap: wrap; column-gap: 2rem; } .nav-links .anchor::after { display: none; } .modal { max-width:70vw; min-height: 10vh; max-height: 80vh; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); } .modal #commentSection { width:43.75rem; } .modal #postLikesSection { width:32rem; } .modal #postLikesSection li a { display: flex; width: 100%; margin: 0; box-sizing: border-box; text-decoration: none; } .modal-content { width: 100%; } .modal .article.column { box-shadow: none; } .modal .article .header > .row { flex-direction: row; justify-content: center; column-gap: 0.5rem; padding: 1rem; } .modal > .column > .cancel { width: auto; height: auto; margin: 0; padding: 0.75rem; position: absolute !important; top: 0.25rem; right: 0.25rem; z-index: 5; border-radius: var(--radius-5); } .modal .form label { width: 100%; } .modal .form .submit { padding: 0.75rem 1.25rem; border-radius: var(--radius-3); } #profileImageModal .modal-content { width: 26rem; max-width: 100%; } #profileImageModal .content { padding: 1rem; } #profileImageModal .form { } #profileImageModal .buttonGroup { justify-content: flex-end; column-gap: 0.5rem; } #profileImageModal .profileImagePreview { justify-content: center; } #profileImageModal .profileImagePreview .profileImage { width: 8rem; height: 8rem; } .feed.row { flex-direction: column; row-gap: 3rem; } .feed > li { width: 100%; list-style-type: none; } .feed .article header { padding: 0; } .feed .article header > .row { padding: 1rem; border-bottom: 1px solid; } .feed .article header.column { row-gap: 0; } .article .footer { flex: 0 1 fit-content; border-top: 1px solid; } .article .footer > .row { justify-content: space-between; } .article .footer > .row:first-child { padding: 1rem; font-size: 0.875rem; } .feed .article a { text-decoration: none; } .feed .article a:hover { text-decoration: underline; } .feed .article a.button:hover { text-decoration: none; } .feed .article .heading.h1 { align-self: flex-start; width: 100%; font-size: 1.375rem; margin:0 0 0.75rem 0; } .feed .article .heading.h1 a { width: 100%; } .article .heading.h1, .article .heading.h1 a { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.5rem; } .feed .article .featuredImage { height: 100%; padding: 0; } .feed .article .content { padding: 1.5rem; } .feed .article .content .read-more { font-weight: bold; } .feed .article span[role="button"]:hover { text-decoration: underline; } .feed.related { flex-direction: row; column-gap: 1rem; } .feed.related > li { flex: 0 1 50%; margin: 0; } .feed.related .article .featuredImage img { max-height: 9rem; border-radius: var(--radius-5) var(--radius-5) 0 0; } .feed.related .article .heading.h1 { margin: 0; } .feed.compact { margin-bottom: 1rem; } .feed.compact .article > .row > .column:first-of-type { flex: 1 0 30%; } .feed.compact .article header > .row { padding: 1.25rem; } .feed.compact .article .featuredImageWrapper { max-width: 15rem; } .feed.compact .article .button { margin-top: 1rem; } .feed.compact .article .footer > .row { padding: 0; } .feed.compact.sticky .article .featuredImage { border-radius: var(--radius-5) 0 0 var(--radius-5); overflow: hidden; } .feed.comments .badgeGroup { margin-bottom: 0.25rem; } .feed.comments .comment-form { display: flex; flex-direction: row; } .feed.comments .content { width: 100%; padding: 0; margin: 0; text-align: left; } .feed.comments .content ol li { margin-left: 0; } .feed.comments .article::after { content: ''; display: block; width: 2px; height: calc(100% - 3.75rem); position: absolute; top: 2.75rem; left: 3rem; z-index: 1; } .feed.comments .article::before { content: ''; display: block; width: 2rem; height: 4.25rem; position: absolute; top: -1.25rem; border-left: 2px solid; border-bottom: 2px solid; border-bottom-left-radius: 10px; } .feed.comments .article:last-child .line-vertical { height: calc(100% - 3.25rem); } .feed.comments .header > .row { flex-direction: row; justify-content: center; column-gap: 0.5rem; padding: 1rem; } .feed.comments ol li { list-style-type: none; } .feed.comments ol header > .row { flex-wrap: nowrap; padding: 1rem 1.5rem 0.5rem 1.5rem; border: 0; } .feed.comments ol[data-level="1"] { width: 100%; max-width: 100%; } .feed.comments ol[data-level="1"] > .comment { border-bottom: 1px solid; } .feed.comments ol[data-level="1"] > .comment:last-child { border-bottom:0; } .feed.comments .article.column { border: 0; border-radius: 0; box-shadow: none; } .feed.comments .article .content { width: auto; padding: 0.5rem 0.75rem; margin: 0 2rem 0 5rem; border-radius: var(--radius-5); font-size: 0.875rem; } .feed.comments .article footer { padding-left: 3rem; border: 0; } .feed.comments .article footer > .row { padding: 1rem 2rem; } .feed.comments .article footer > .row > .row { width: auto; max-width: fit-content; margin: 0; } .feed.comments .article .button { flex: 0 1 auto; width: auto; min-width:auto; min-height: auto; padding: 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration: none; border: 0; } .feed.comments .article .button:hover { text-decoration: underline; } .feed.comments .article footer .buttonGroup { row-gap: 0.5rem; } .feed.comments .article footer .buttonGroup .button { column-gap: 0.5rem; } .feed.comments .article footer .buttonGroup .button.iconBefore { margin-left: 0; } .feed.comments .article footer .buttonGroup .button.iconBefore::before { margin-right: 0; } .feed.comments .article footer .buttonGroup .likeGroup { column-gap: 0; border: 1px solid; border-radius: var(--radius-3); } .feed.comments .article footer .buttonGroup .button.iconLike { padding: 0 0.5rem; font-weight: normal; } .feed.comments .article footer .buttonGroup .likeCount { padding: 0 0.5rem; border-left: 1px solid; font-size: 0.875rem; } .feed.likes li { margin-left: 0; transition: all 150ms ease-in-out; } .feed.likes li .row { justify-content: flex-start; align-items: center; column-gap: 1rem; padding: 0.375rem 1rem; } [class*="comment-level-"]:not(.comment-level-1) { margin-left: 3rem; } ol[class*="comment-level-"] > li::before { content:''; display: block; width: 2px; height: 100%; position: absolute; z-index: 1; } ol[class*="comment-level-"] > li:last-of-type::before { display: none; } ol.comment-level-1 > li::before { display: none; } .feed.comments ol.comment-level-1 > li > article::before { display: none; } .feed.comments .input { margin-top: 0; } .feed.comments .form.row { column-gap: 0.75rem; box-sizing: border-box; padding: 1.5rem; } .feed.comments .form.row .profileImage { flex: 0 0 2.5rem; height: 2.5rem; margin: 0; } .feed.comments .form.column { padding: 1.5rem; margin: 0; } .feed.comments .form.column .row { column-gap: 0.75rem; } .feed.comments .form.column .profileImage { flex: 0 0 2.5rem; height: 2.5rem; margin: 0; } .feed.comments .form.column .buttonGroup { width: auto; column-gap: 0.5rem; row-gap: 0.25rem; align-items: stretch; margin-right: 0; } .feed.comments .form.column .buttonGroup .button { min-width: auto; min-height: auto; border-radius: var(--radius-5); font-size: 0.75rem; } .feed.comments .form.column .buttonGroup .button.cancel::before { display: none; } #commentFormRoot { padding: 0; border-top: 1px solid; } #commentFormRoot div { width: 100%; } #commentFormRoot .buttonGroup { width: auto; } .itemList { column-gap: 0.25rem !important; row-gap: 0.25rem; flex-wrap: wrap; align-items: center; } .itemList li { display: flex; flex-direction: row; column-gap: 0.25rem; margin: 0; list-style-type: none; } .itemList .badge { display: flex; padding: 0.25rem 0.5rem; text-decoration: none; border-width: 1px; border-style: solid; border-radius: var(--radius-3); font-size: 0.75rem; } .itemList .badge a { } .itemList.skills li { margin: 0; } .itemList.skills .badge { border-radius: 2rem; font-size: 0.875rem; } .itemList.skills .badge.cancel { cursor:pointer; } .itemList.skills .badge.cancel:hover { transition: all 250ms ease-in-out; } #skills-edit label { display: flex; align-items: center; margin-top: 1rem; } #skills-edit .description { font-size: 0.875rem; font-style: italic; } .componentGroup { } .component { width:100%; row-gap: 0; flex-grow: 0; border: 1px solid; border-radius: var(--radius-5); box-shadow: var(--box-shadow-bottom); } .component > a { flex-direction: column; width: 100%; text-decoration: none; } .component > a p.button { } .component .row { justify-content: center; } .component .banner { padding: 3.5rem; border-top-left-radius: 5px; border-top-right-radius: 5px; } .component.profile .banner { padding: 2rem; } .component .column { width: 100%; row-gap: 0; padding: 1.25rem; } .component .profileImage { margin-top: -4rem; } .component .heading { padding: 0.125rem 0.75rem; margin: 0; font-size: 1.125rem; border-radius: var(--radius-5); text-shadow: none; transition: all 200ms ease-in-out; } .component .button { margin-top: 1rem; } .component p { margin: auto; } .component .header { padding: 1rem 1.25rem; border-bottom: 1px solid; } .component ul[data-list-type="interactiveTree"] { padding: 1px 0 0 0; border-bottom: 0; } .component ul[data-list-type="interactiveTree"] li:last-of-type .row:not(.sublist .row), .component ul[data-list-type="interactiveTree"] li:last-of-type .row:not(.sublist .row) a, .component ul[data-list-type="interactiveTree"] .sublist { border-bottom-left-radius: var(--radius-5); border-bottom-right-radius: var(--radius-5); } .component ul[data-list-type="interactiveTree"] li:last-of-type .sublist li:last-of-type .row { border-bottom-right-radius: var(--radius-5); } .component ul[data-list-type="interactiveTree"] li:last-of-type .row button { border-bottom-right-radius: var(--radius-5); } .iconBefore { margin-left: 0.5rem; } .iconAfter { margin-right: 0.5rem; vertical-align: baseline; } .iconBefore::before, .iconAfter::after { content:''; display: flex; justify-content: center; align-items: center; width: 1em; height: 1em; position: relative; background-size: cover; } .iconBefore::before { margin-right: 0.375rem; } .iconAfter::after { margin-left: 0.375rem; } .iconHome::before { mask-image: url('media/icons/iconHome_filled.svg'); } .iconBug::before { mask-image: url('media/icons/iconBug.svg'); } .iconBell::before { mask-image: url('media/icons/iconBell_filled.svg'); } .iconProfile::before { mask-image: url('media/icons/iconProfile.svg'); } .iconProfile.loggedIn::before { mask-image: url('media/icons/iconProfileActive.svg'); } .iconProfile.hasProfileImage::before, #headerBanner .iconProfile.hasProfileImage::before { mask-image: none; background: var(--profile-image) center / cover no-repeat; border-radius: 50%; } .iconSearch::before { mask-image: url('media/icons/iconSearch.svg'); } .iconNews::before { mask-image: url('media/icons/iconNews.svg'); } .iconHeart::before { mask-image: url('media/icons/iconHeart.svg'); } .iconBookmark::before { mask-image: url('media/icons/iconBookmark.svg'); } .iconFriends::before { mask-image: url('media/icons/iconFriends.svg'); } .iconPeople::before { mask-image: url('media/icons/iconPeople.svg'); } .iconApplications::before { mask-image: url('media/icons/iconApplications.svg'); } .iconApplicationsBold:before { mask-image: url('media/icons/iconApplications.svg'), url('media/icons/iconApplications.svg'); } .iconArrowcircle::before { mask-image: url('media/icons/iconArrowcircle.svg'); } .iconCategory::before { mask-image: url('media/icons/iconCategory.svg'); } .iconLike::before { mask-image: url('media/icons/iconLike.svg'); transform: scale(-1, 1); } .iconLike::after { mask-image: url('media/icons/iconLike.svg'); } .iconLike.liked::before, .iconLike.liked::before { mask-image: url('media/icons/iconLike_filled.svg'); } .iconComments::before { mask-image: url('media/icons/iconComments.svg'); } .iconCopyUrl::before { mask-image: url('media/icons/iconCopyUrl.svg'); } .iconNewWindow::before { mask-image: url('media/icons/iconNewWindow.svg'); } .iconHelp::after, .iconHelp::before { mask-image: url('media/icons/iconHelp.svg'); } .iconPlus::after, .iconPlus::before { mask-image: url('media/icons/iconPlus.svg'); } .iconMinus::before { mask-image: url('media/icons/iconMinus.svg'); } .iconFavorites::before { mask-image: url('media/icons/iconFavorites.svg'), url('media/icons/iconFavorites.svg'); } /* Doubled up to make it more bold. */ .iconFavoritesFilled::before { mask-image: url('media/icons/iconFavorites_filled.svg'); } .iconTableOfContents::before { mask-image: url('media/icons/iconTOC.svg'); } .iconMenu::before { mask-image: url('media/icons/iconMenu.svg'); } .iconPencil::before { mask-image: url('media/icons/iconPencil.svg'); } /* ---------------------------------------------------------------------------------------------------------- 03 Specific areas ------------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ #headerBanner { height: auto; border-bottom: 1px solid; box-shadow: 0 3px 7px rgba(0,0,0,0.05); z-index: 50; position: sticky; top: 0; } #headerBanner > .row:first-of-type { flex-basis: auto; width: fit-content; } #headerBanner .logo { width: 3.375rem; height: 3.375em; margin: 0; padding: 0.5rem; } #headerBanner .description { display: flex; flex-direction: column; align-items: flex-start; margin: auto 1rem; white-space: nowrap; } #headerBanner .description span { font-weight:700; } #headerBanner .column { row-gap: 0; } #headerBanner header.row { border-bottom: 1px solid; } #headerBanner > .column:last-of-type { align-items: flex-end; } #headerBanner > .column:last-of-type > .row { width: auto; margin-right: 0; border:0; } #headerBanner .iconBefore { margin-left: auto; } #headerBanner .iconBefore::before { width: 1.75rem; height: 1.75rem; margin-right: auto; } #headerBanner .button { border-width: 0 0 0 1px; border-radius: 0; padding: 1.25rem 1.75rem; position: relative; } #headerBanner .indicator { display: flex; align-items: center; justify-content: center; min-width: 1rem; width: auto; height: 1rem; padding: 0.125rem; border-radius: 50%; font-size: 0.75rem; line-height: normal; text-indent: 0; position: absolute; top: 20%; right: 25%; } #headerBanner #quickSearch { flex: 1 1 100%; width: auto; max-width: none; margin: auto 1.5rem; column-gap: 0; } #headerBanner #quickSearch input { flex: 1 1 auto; width: auto; margin: 0; font-size: 0.875rem; padding: 0.625rem 1rem; border-width: 1px; border-radius: var(--radius-3) 0 0 var(--radius-3); z-index: 10; } #headerBanner #quickSearch button { flex: 0 0 auto; width: auto; margin: 0; padding: 0.625rem 1.25rem; border-width: 1px 1px 1px 0; border-radius: 0 var(--radius-3) var(--radius-3) 0; } #headerBanner .container { display: flex; width: 20rem; position: absolute; top: 100%; right: 0; left: auto; transition: all 150ms; border: 1px solid; text-align: left; } #headerBanner .container[aria-hidden="true"] { display: none; } #headerBanner .container header > div { margin: 0; } #headerBanner .container .heading { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; text-shadow: none; } #headerBanner .container .row { align-items: center; column-gap: 1rem; width: 100%; padding: 1rem; } #headerBanner .container > .row:last-child { padding: 0; border: 0; } #headerBanner .container .content ul { width: 100%; } #headerBanner .container .content li { width: calc(100% - 3rem); } #headerBanner .container .column.list .row { padding: 0; } #headerBanner .modal > .column > .cancel { padding: 0.75rem; border: 1px solid; border-radius: var(--radius-5); } #headerBanner .modal .iconBefore { margin-left: 0; } #headerBanner .modal .form textarea { height: 8rem; } #headerBanner .modal .form .submit { padding: 0.75rem 1.25rem; border: 1px solid; border-radius: var(--radius-3); } #headerBanner .header > .row { border-color: light-dark(var(--neutral-3), var(--neutral-7)); } #toggleMainMenu { font-size: 0.75rem; text-indent: 1.75rem; } #toggleMainMenu .burgerMenu, #toggleMainMenu .burgerMenu::before, #toggleMainMenu .burgerMenu::after { content: ''; width: 1.25rem; height: 1px; display: block; } #toggleMainMenu .burgerMenu { position: absolute; left: 25%; top: 50%; transform: translate(-25%, 0); } #toggleMainMenu .burgerMenu::before { position: relative; top: -5px; transform: rotate(0deg); transition: all 0.2s ease; } #toggleMainMenu .burgerMenu::after { position: relative; top: 4px; transform: rotate(0deg); transition: all 0.2s ease; } #toggleMainMenu[aria-expanded="true"] .burgerMenu::before{ position: absolute; top: 0; right: 0; transform: rotate(45deg); } #toggleMainMenu[aria-expanded="true"] .burgerMenu::after { position: absolute; top: 0; right: 0; transform: rotate(-45deg); } #mainMenu { width: 21.25rem; height: 100%; text-align: left; transition: all 250ms ease-in-out; row-gap: 2rem !important; position: fixed; top: 0; bottom: 0; z-index: 10; border-style: solid; border-width: 0 0 0 1px; padding: 2rem 0; overflow: hidden auto; box-shadow: var(--box-shadow-left); } #mainMenu[aria-hidden="false"] { visibility: visible; opacity: 100%; right: 0; } #mainMenu[aria-hidden="true"] { visibility: hidden; opacity: 0; right: -100%; } #mainMenu button { width: auto; } #mainMenu nav { margin: 0; } #mainMenu .column { width: 100%; } #mainMenu > .column:first-of-type { flex: 0 0 auto; } #mainMenu > .column:first-of-type button { margin-top: 0; } #profileMenu .column { width: 100%; } #actionsMenu .column { width: 100%; } #actionsMenu ul li { list-style-type: none; } #profileMenu.container .button:last-of-type, #feedbackMenu.container .button:last-of-type, #actionsMenu.container .button:last-of-type { width: 100%; padding: 0.75rem; font-size: 0.75rem; border-width: 0; } #profileMenu.container .button.login.anchor::after { display: none; } #mainBreadcrumbs { padding: 1rem; border-style: solid; border-width: 0 0 1px 0; overflow: auto hidden; } #mainBreadcrumbs nav { font-size: 0.875rem; } #pageHeader { min-height: 15.625rem; } #pageHeader figure { position: absolute; height: 100%; } #pageHeader picture { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; overflow: hidden; } #pageHeader picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; } #pageHeader .heading { align-items: flex-end; row-gap: 0; padding: 4rem; position: relative; top: 40%; transform: translateY(-50%); z-index: 2; } #pageHeader .heading h1 { font-size: inherit; position: relative; } #pageHeader .heading .badges { flex: 0 1 fit-content; justify-content: flex-end; margin: 0; } #pageHeader .heading .badge { font-weight: 700; text-transform: uppercase; text-shadow: none; } ul[data-list-type="interactiveTree"] { display: flex; flex-direction: column; align-items: normal; margin: 0; row-gap: 1px !important; border-bottom: 1px solid; } ul[data-list-type="interactiveTree"][aria-hidden="true"] { display: none; } ul[data-list-type="interactiveTree"] a { width: 100%; padding: 0.75rem; border-left: 3px solid; box-sizing: border-box; text-align: left; text-decoration: none; } ul[data-list-type="interactiveTree"] a:hover { text-decoration: underline; } ul[data-list-type="interactiveTree"] a:focus { outline-offset: -3px; } ul[data-list-type="interactiveTree"] a::before { content: '»'; margin-right: 0.25rem; } ul[data-list-type="interactiveTree"] a[aria-current="page"] { font-weight: 700; } ul[data-list-type="interactiveTree"] li { display: flex; flex-direction: column; margin: 0; padding: 0; list-style-type: none; } ul[data-list-type="interactiveTree"] ul { display: flex; flex-direction: column; row-gap: 1px; padding: 1px 0 0 0.875rem; } ul[data-list-type="interactiveTree"] ul[aria-hidden="true"] { display: none; } ul[data-list-type="interactiveTree"] button, ul[data-list-type="interactiveTree"] .button { min-width: auto; min-height: auto; margin: 0; padding: 0.75rem 1.25rem !important; border:0; border-radius: 0; font-size: 1rem !important; } ul[data-list-type="interactiveTree"] .iconBefore::before { width: 1em !important; height: 1em !important; margin: 0; font-size: 1em !important; } ul[data-list-type="interactiveTree"] .row { row-gap: 0; column-gap: 1rem; } ul[data-list-type="interactiveTree"] .column { width: 100%; row-gap:0; } #quickAccess { display: flex; justify-self: center; row-gap: 0; width: 100%; max-width: 62.5rem; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% - 4.5rem); z-index: 10; } #quickAccess header { align-items: center; padding: 1rem; border-bottom: 1px solid; } #quickAccess section { margin: auto; } #quickAccess section[role="tabpanel"] { width: auto; min-width: 18rem; border: 1px solid; border-radius: 0 0 var(--radius-5) var(--radius-5); border-top-width: 8px; position: absolute; left: 50%; z-index: 20; transform: translateX(-50%); box-shadow: var(--box-shadow-bottom); } #quickAccess section[aria-hidden="false"] { visibility: visible; opacity: 1; top: 100%; } #quickAccess section[aria-hidden="true"] { visibility: hidden; opacity: 0; top:-100vh; } #quickAccess .footer { align-items: center; } #quickAccess .buttonGroup { column-gap: 1px; } #quickAccess .buttonGroup a:before { font-size: 1.5rem; margin-right: 0; min-width: 1em; min-height: 1em; } #quickAccess .buttonGroup .iconBefore { margin-left: 0; } #quickAccess .buttonGroup .button { column-gap: 0.5rem; border: 0; border-radius: 0; } #quickAccess .buttonGroup .button:first-child { border-bottom-left-radius: var(--radius-5); } #quickAccess .buttonGroup .button:last-child { border-bottom-right-radius: var(--radius-5); } #quickAccess h2 { margin: auto; font-size: 1.25rem; } #quickAccess .submenu { justify-content: flex-start; column-gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; margin: 0; border-width: 0 0 1px 0; border-radius: 0; font-weight: 700; letter-spacing: 1px; } #quickAccess .list { max-height: 15.25rem; overflow: auto; } #quickAccess .column { width: 100%; row-gap:0; } #quickAccess .iconBefore::before { margin: 0; font-size: 2.675em; } #quickAccess .iconBefore.submenu::before { font-size: 1em; } #quickAccess *[role="tablist"] { width: auto; flex-wrap: nowrap; row-gap: 0; border-radius: var(--radius-5); box-shadow: var(--box-shadow-bottom); } #quickAccess *[role="tablist"] .button { display:flex; flex: 1 1 10rem; flex-direction: column; row-gap: 0.375rem; margin-left: auto; padding: 3rem; border-radius: 0; font-weight:700; letter-spacing: 0; border-style: solid; border-width: 1px 0 1px 1px; } #quickAccess *[role="tablist"] .button:first-child { border-radius: var(--radius-5) 0 0 var(--radius-5); } #quickAccess *[role="tablist"] .button:last-child { border-right-width: 1px; border-radius: 0 var(--radius-5) var(--radius-5) 0; } #quickAccess li .row { row-gap: 0; column-gap: 1rem; } #quickAccess li .row .description { padding: 0.75rem; } #quickAccess ul[data-list-type="interactiveTree"] a.button { padding: 0.75rem 1rem !important; } #quickAccess ul[data-list-type="interactiveTree"] a.button:hover { text-decoration: none; } #quickAccess #menuqaapps a::after { display: none; } #pageContent { padding: 8rem 1rem 1rem 1rem; } #pageContent > .column { } #pageContent.home > .row:first-of-type { column-gap: 2rem; } #pageContent.home > .row > .column { flex: 1 1 20%; } #pageContent.home > .row > .column:nth-child(2) { flex: 1 1 60%; } .nav.submenu { justify-content: center; column-gap: 0.75rem; padding: 0.25rem 0; overflow: auto hidden; } .nav.submenu a { flex: 0 1 content; min-width: auto; box-shadow: var(--box-shadow-bottom); } .nav.submenu a::before { font-size: 1.5rem; margin-right: 0; } .nav.submenu a[aria-current="page"] { font-weight: 700; box-shadow: none; } .nav.submenu .iconBefore { margin-left: 0; } .form.filter .column { flex: 0 1 content; } [data-content-type="profile"] #pageContent > .column { row-gap: 2rem; } [data-content-type="profile"] .content.profile > .row { flex: 0 1 auto; align-items: center; margin-bottom: 1rem; column-gap: 1rem; } [data-content-type="profile"] .content.profile .author { font-size: 1.125rem; } [data-content-type="profile"] .content.profile .profileImage { width: 4.5rem; height: 4.5rem; } [data-content-type="profile"] .content.profile .metadata p { margin-bottom: 0; } [data-content-type="profile"] .content.profile .metadata h3 { margin-top: 0.875rem; } [data-content-type="profile"] .itemList.skills { flex: 0 1 fit-content; margin: 0.5rem 0; row-gap: 0.5rem; column-gap: 0.5rem !important; } .editmode { width: 100%; height: 100%; row-gap: 1rem !important; } .editmode textarea { padding: 0.5rem; border-style: dotted; overflow: hidden; resize: none; } .editmode .buttonGroup { align-items: flex-start; column-gap: 0.25rem !important; margin-right: 0; } #newsFeed { height: fit-content; } #newsFeed .column.section { row-gap: 1rem; } #newsFeed .createPost { justify-content: center; column-gap: 1rem; padding: 1rem; border-radius: var(--radius-5); box-shadow: var(--box-shadow-bottom); } #newsFeed .createPost .button { flex: none; width: auto; padding: 0; border: 0; border-radius: 0; font-style: italic; letter-spacing: 0; font-size: 1rem; text-transform: none; } #newsFeed .createPost .profileImage { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; margin:0; } .article .footer .buttonGroup { column-gap: 1px; padding-top:1px; border-radius: 0 0 var(--radius-5) var(--radius-5); } .article .footer .buttonGroup .button { border: 0; border-radius: 0; margin: 0; column-gap: 0.375rem; } .article .footer .buttonGroup .button:first-child { border-bottom-left-radius: var(--radius-5); } .article .footer .buttonGroup .button:last-child { border-bottom-right-radius: var(--radius-5); } .article .footer .buttonGroup .iconBefore::before { flex: 0 0 1.125rem; margin: 0; font-size: 1.125rem; } .article .footer .buttonGroup .iconLike::before { flex: 0 0 1rem; font-size: 1rem; } #favoriteList { user-select: none; } #favoriteList tbody th > .row { align-items: center; column-gap: 0.5rem; } #favoriteList tbody th a { font-weight: 700; } #favoriteList tbody tr { transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } #favoriteList tr.dragging, #favoriteList tr.touch-dragging { opacity: 0.8; box-shadow: var(--box-shadow-bottom); position: relative; z-index: 1000; } #favoriteList .button.favorite::before { display: none; } #favoriteList .title { font-weight: 400; font-size: 0.875rem; } #favoriteList .profileImage { display: inline-block; vertical-align: middle; margin-right: 0.5rem; } #favoriteList [draggable="true"] { cursor: grab; } #favoriteList .drag-handle { width: 2rem; text-align: center; cursor: grab; touch-action: none; } #favoriteList .drag-handle:active { cursor: grabbing; } #favoriteList .drag-handle::before { content: '☰'; } .tableTaskList tbody th a { font-weight: 700; } .tableTaskList td .button { display: flex; column-gap: 0.5rem; margin: 0; white-space: nowrap; } .tableTaskList .modified { white-space: nowrap; } #userTaskBrokenLinks .linkUrl { max-width: 24rem; } #userTaskBrokenLinks .postStatus { font-size: 0.875rem; font-style: italic; } #userTaskStatus { font-size: 0.875rem; font-style: italic; } .actionGroup { width: 100% !important; row-gap: 1rem; margin-bottom: 1.5rem; } .actionGroup .column { width: 100% !important; } .actionGroup summary { cursor: pointer; } .actionGroup summary::marker { content: ''; } .actionGroup .group-details { display: flex; flex-direction: column; border-width: 0 1px; border-style: solid; border-radius: var(--radius-5); box-shadow: 0 2px 0px light-dark(var(--neutral-3), var(--neutral-8)); } .actionGroup .group-details > summary { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: var(--radius-5); } .actionGroup .group-details > summary::after { content: '\FF0B'; font-weight: 700; margin-left: auto; } .actionGroup .group-details[open] > summary::after { content: '\FF0D'; } .actionGroup .group-header { align-items: center; justify-content: flex-start; column-gap: 0.5rem; margin: 0; } .actionGroup .group-header h2 { margin: 0; font-size: 1.125rem; } .actionGroup .groupContent { padding: 0.5rem 1rem 1rem 1rem; } .actionGroup .groupContent > p:first-child { margin-top: 0.5rem; } .actionGroup .header .itemList { margin-bottom: 0; border: 0; padding: 0; width: auto; flex: 1 1 auto; } .actionGroup .header .itemList > li { margin-left: 0; } .actionGroup .tableWrapper { margin-top: 1rem; } .actionGroup ul[data-list-style="cards"] { margin-top: 1rem; } /** * Prenumerationer ("Mina sidor" -> Prenumerationer). Shares the group shape of .actionGroup. * * Every choice on the page is drawn as a card, one row to a card, whether it is a radio in the flat * list of "Startsidans flöde" or a checkbox in one of the term trees. The trees are interactiveTrees * too, so the expanding is the shared one in main.js; what is said here is only how they are drawn. * Cards rather than the one gridded block the menus are, because a row here is a choice to tick * rather than a place to go, and because the cards keep the levels of a deep unit tree apart. * * The input closes its label instead of opening it, so the name is read first and the box sits in * the same place on every card. The label is bold by the reset, as every label on the site is, so * the state a card is in is said by its tint and its border rather than by its weight. */ ul[data-list-style="cards"] { display: flex; flex-direction: column; align-items: normal; row-gap: 0.5rem !important; margin: 0; padding: 0; border-bottom: 0; } ul[data-list-style="cards"] li { display: flex; flex-direction: column; margin: 0; padding: 0; list-style-type: none; } ul[data-list-style="cards"] .row { position: relative; } ul[data-list-style="cards"] label { display: flex; align-items: center; column-gap: 0.75rem; width: 100%; padding: 0.625rem 1rem; border: 1px solid; border-radius: var(--radius-5); box-sizing: border-box; text-align: left; cursor: pointer; } ul[data-list-style="cards"] label:has(input:disabled) { cursor: default; } ul[data-list-style="cards"] label .description { font-size: 0.875rem; font-style: italic; } ul[data-list-style="cards"] input[type="checkbox"], ul[data-list-style="cards"] input[type="radio"] { width: auto; margin: 0; padding: 0; } ul[data-list-style="cards"] button.button { width: 1.25rem; height: 1.25rem; min-width: 0; margin: 0; padding: 0 !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border: 1px solid; border-radius: var(--radius-3); font-size: 0.75rem !important; } /** * The trees only. The expand button is drawn outside its card, in the indent that lines the levels * up, and every row is padded to make room for one whether it has one or not, so that a leaf card * starts where its siblings do. A flat list has none of this and is not indented. */ ul[data-list-type="interactiveTree"][data-list-style="cards"] ul { row-gap: 0.5rem; padding: 0.5rem 0 0 2rem; } ul[data-list-type="interactiveTree"][data-list-style="cards"] .row { padding-left: 2rem; } /** * The save button is hidden by the script of the page, which saves on the tick instead. The reset * hides [hidden] already, but .row sets a display of its own further down the cascade and would * win, so the form says it again. */ #feedSubscriptions [hidden] { display: none; } #feedSubscriptions { row-gap: 0 !important; } #feedSubscriptionsStatus { font-size: 0.875rem; font-style: italic; } #siteEnvironementMessage { font-family: monospace; font-size: 0.75rem; padding: 0.5rem; } #siteEnvironementMessage a { font-weight: 700; } #gotoMain { position: absolute; top: 0; left: -100vw; z-index: 9999; padding: 1em; border: 1px solid; } #gotoMain:focus { left: 10%; top: 3em; } #backToTop { position: fixed; right: 1rem; bottom: 1rem; z-index: 5; border: 1px solid; } #backToTop.invisible { display: none; } #backToTop a { padding: 1rem; text-decoration: none; } /*** Table of contents ***/ #pageSidebarWrapper { position: absolute; top: 8rem; bottom: 2.5rem; right: 0; z-index: 10; } #pageSidebar { position: sticky; top: 6rem; } #pageSidebar[data-collapsed="false"] #pageSidebarContent { visibility: visible; opacity: 1; } #pageSidebar[data-collapsed="true"] #pageSidebarContent { visibility: hidden; width: 0; opacity: 0; } #pageSidebar > .button { position: absolute; right: 100%; border: 0; width: 3rem; height: 3rem; padding: 0.25rem; margin: 0; border-width: 1px 0 1px 1px; border-style: solid; border-radius: 5px 0 0 5px; font-size: 1rem; } #pageSidebar > .button::before { width: 100%; height: 100%; margin: 0; } #pageSidebarContent { display: flex; width: 18rem; padding: 2rem 0; overflow: hidden; border-width: 1px 0 1px 1px; border-style: solid; border-radius: 0 0 0 5px; } #pageSidebarContent div { } #pageSidebarContent > .column { width: 100%; max-height: 50vh; padding: 0 2rem; overflow-y: auto; mask: linear-gradient(180deg, #FFF calc(100% - 1.5rem), transparent); } #pageSidebar header { font-size: 1.125rem; font-weight: 700; } #pageSidebar header a { font-weight: inherit; } #pageSidebar a { text-decoration: none; } #pageSidebar a:hover { text-decoration: underline; } #pageSidebar nav { text-align: left; } #pageSidebar nav a { vertical-align: top; } #pageToc { padding-bottom: 1rem; margin: 0; } #pageToc ul { margin: auto; } #pageToc ul li { list-style-type: none; margin: 0.25rem auto; } #pageToc ul ul { padding-left: 0.875rem; } #pageToc li a { font-size: 0.875rem; } #mainFooter { margin-top: 4rem; row-gap: 0; } #mainFooter a { display: inline-block; } #mainFooter img { width: 8rem; } #mainFooter .row { justify-content: center; } #mainFooter > .row .content { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; text-align: left; } #mainFooter > .row:first-of-type .content { padding: 2rem; } #mainFooter > .row:last-of-type .content { padding: 1em; font-size: 0.875rem; } #mainFooter .row .content .textwidget { margin: 0; } #mainFooter .column.widget { flex: 1 1 20%; max-width: max-content; border-right-width: 1px; border-style: solid; } #mainFooter .column.widget:first-of-type { border-left-width: 1px; } #mainFooter nav ul.row { justify-content: flex-start; column-gap: 1rem; margin: 0; } #mainFooter nav ul.row li { margin: 0; list-style-type: none; } #mainFooter #copyright p { text-align: right; } #loadingIndicator { margin: auto; } .loadingSpinner { border: 10px solid; border-top: 10px solid; border-radius: 50%; width: 3.75rem; height: 3.75rem; animation: spin 1s linear infinite; } /*** Login page ***/ body.login #main { padding: 1rem; } body.login .loginWindow { max-width: 30rem; border-radius: var(--radius-5); box-shadow: 0 10px 10px rgba(0,0,0,0.3); margin-top: 5%; }