/* |-------------------------------------------------------------------------- | Messil’s mobile first CSS framework. |-------------------------------------------------------------------------- | Author: Frederic Barry | Since: 2016-12-02 | Version: 2021-02-26 |-------------------------------------------------------------------------- */ /* | @link https://css-tricks.com/reset-all-margins-padding/ */ * { margin: 0; padding: 0; } /* | @link http://stackoverflow.com/questions/26348047/responsive-design-images-not-fitting-viewport-size-height-wise */ *, *:before, *:after { box-sizing: border-box; } /* | 1. @link https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ | 2. Prevent adjustments of font size after orientation changes in iOS. */ body { color: #000000; font-family: /* 1 */ -apple-system, BlinkMacSystemFont, 'Roboto', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 100%; font-weight: 400; height: 100%; line-height: 1.3; min-height: 100%; -webkit-text-size-adjust: 100%; /* 2 */ margin: 0; padding: 0; } main, .pq-source-container { float: left; width: 100%; --pq-body-background: #fff; --pq-secondary-background: #f8f8f8; --pq-separator: #DFDFDF; --pq-body-color: #000; --pq-body-secondary-color: #707070; --pq-header-background: #efefef; --pq-header-border: #e0e0e0; --pq-table-border: #cccccc; --pq-table-th: #ececec; --pq-table-th-subheader: #f5f5f5; --pq-table-tr: #ffffff; --pq-table-tr-nth: #fcfcfc; --pq-callout-primary: #F3F9FF; --pq-callout-primary-border: #A9D5FF; --pq-callout-warning: #FFF7E3; --pq-callout-warning-border: #F8E47F; --pq-blockquote-primary: #a9d5ff; --pq-blockquote-secondary: #dedede; --pq-blockquote-warning: #f8e47f; --pq-notes-background: #ffffc1; --main-book-color: #4A41BB; --main-book-color-alpha: rgba(74, 65, 187, 0.1); --pq-color-black: #000000; --pq-color-gray-800: #3B3B3B; --pq-color-gray-700: #5B5B5B; --pq-color-gray-600: #8E8E8E; --pq-color-gray-500: #AEAEAE; --pq-color-gray-200: #D4D4D4; --pq-color-gray-50: #F1F1F1; --pq-color-white: #ffffff; --pq-color-red-500: #C50000; --pq-color-orange-500: #E28631; --pq-color-yellow-500: #EFBA2C; --pq-color-green-500: #5F9E46; --pq-color-indie-500: #3C7683; --pq-color-blue-500: #356DD3; --pq-color-violet-500: #5C459D; --pq-color-purple-500: #9C446E; --pq-color-red-100: #D87360; --pq-color-orange-100: #F8C491; --pq-color-yellow-100: #FFE18E; --pq-color-green-100: #ADD19E; --pq-color-indie-100: #6B9BA6; --pq-color-blue-100: #6294E8; --pq-color-violet-100: #AB9DD0; --pq-color-purple-100: #CF9CB5; --pq-color-red-50: #F2C5C5; --pq-color-orange-50: #FCE1C6; --pq-color-yellow-50: #FFF0C5; --pq-color-green-50: #D4E7CD; --pq-color-indie-50: #CADCDF; --pq-color-blue-50: #C2D5F7; --pq-color-violet-50: #D4CCE6; --pq-color-purple-50: #E7CBD7; color: var(--pq-body-color); --svg-icon-arrow-downward: url('data:image/svg+xml,\ '); --svg-icon-arrow-forward: url('data:image/svg+xml,\ '); --svg-icon-link: url('data:image/svg+xml,\ '); --svg-icon-calc: url('data:image/svg+xml,\ '); --svg-icon-broken: url('data:image/svg+xml,\ '); --svg-see-article: url('data:image/svg+xml,\ '); --svg-icon-format-quote: url('data:image/svg+xml,\ '); --svg-icon-checkbox: url('data:image/svg+xml,\ '); --svg-icon-carousel-chevron-left: url('data:image/svg+xml,\ '); --svg-icon-carousel-chevron-right: url('data:image/svg+xml,\ '); --svg-icon-carousel-full-screen: url('data:image/svg+xml,\ '); } .dark-theme { --pq-body-color: #fff; --pq-body-secondary-color: #a0a0a0; --pq-body-background: #121212; --pq-secondary-background: #222222; --pq-separator: #333333; --pq-header-background: #262626; --pq-header-border: #333333; --pq-table-border: #444444; --pq-table-th: #2a2a2a; --pq-table-th-subheader: #252525; --pq-table-tr: #1a1a1a; --pq-table-tr-nth: #212121; --pq-callout-primary: #162738; --pq-callout-primary-border: #274968; --pq-callout-warning: #33291a; --pq-callout-warning-border: #665624; --pq-blockquote-primary: #274968; --pq-blockquote-secondary: #3d3d3d; --pq-blockquote-warning: #665624; --pq-notes-background: #4C422B; /* Inverted grayscale for dark mode */ --pq-color-black: #ffffff; --pq-color-gray-800: #E0E0E0; --pq-color-gray-700: #C5C5C5; --pq-color-gray-600: #A0A0A0; --pq-color-gray-500: #767676; --pq-color-gray-200: #424242; --pq-color-gray-50: #2A2A2A; --pq-color-white: #121212; /* Vibrant colors - darker but still recognizable */ --pq-color-red-500: #FF3D3D; --pq-color-orange-500: #FF9D45; --pq-color-yellow-500: #FFCE38; --pq-color-green-500: #6FBC54; --pq-color-indie-500: #4A93A3; --pq-color-blue-500: #4080F0; --pq-color-violet-500: #7058BC; --pq-color-purple-500: #BC5286; /* Mid tone colors - slightly darkened */ --pq-color-red-100: #B85143; --pq-color-orange-100: #D19362; --pq-color-yellow-100: #D1B65F; --pq-color-green-100: #7F9E70; --pq-color-indie-100: #4D7A85; --pq-color-blue-100: #4876BC; --pq-color-violet-100: #7F71A3; --pq-color-purple-100: #A57089; /* Light tone colors - much darker for dark mode */ --pq-color-red-50: #8E3A3A; --pq-color-orange-50: #A66935; --pq-color-yellow-50: #A38943; --pq-color-green-50: #567650; --pq-color-indie-50: #395A60; --pq-color-blue-50: #345894; --pq-color-violet-50: #5A5280; --pq-color-purple-50: #794866; /*--pq-color-green-50: #4e594a; --pq-color-indie-50:#556466;*/ } header { text-align: left; padding-bottom: 9px; padding-top: 11px; background-color: var(--pq-header-background); } header, h1, h2, h3, h4 { padding: 0.125rem 0.313rem 0.063rem 0.313rem; } header h1 { padding-left: 0; } article { float: left; width: 100%; padding: 0 0.625rem calc(3em + 15px); } article > * { float: left; width: 100%; } article h2, article h3, article h4 { margin-left: -0.625rem; margin-top: 0.625rem; margin-bottom: 0.625rem; width: calc(100% + 1.25rem); } article h2:first-of-type, article h3:first-of-type { margin-top: 0; } p { margin: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } h1 { font-size: 1.602em; } h2 { font-size: 1.424em; } h3 { font-size: 1.266em; } h2, h3 { background-color: var(--pq-header-background); border-top: 0.063rem solid var(--pq-header-border); } h4, h5, h6 { font-size: 1.125em; margin: 0.5rem 0 0.25rem 0; } figure { margin: 0.625rem 0; } figcaption { color: #707070; } img { border: 0.125rem solid var(--primary-book-color, var(--main-book-color)); display: block; margin: 0.25rem 0; max-width: 100%; } img.borderless { border-width: 0; } img.drawio { border-width: 0; color-scheme: light only; } /* | Add the correct font size in all browsers. */ small { font-size: 80%; } /* | Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } footer { border-top: 0.063rem solid var(--pq-header-border); margin-top: 2rem; padding-top: 0.875rem; font-size: smaller; } /* |-------------------------------------------------------------------------- | Presentation |-------------------------------------------------------------------------- */ .text-center { text-align: center; } .text-right { text-align: right; } .footnote-paragraph { font-size: 80%; } /* |-------------------------------------------------------------------------- | Lists |-------------------------------------------------------------------------- */ ol { padding-left: calc(0.7rem + 7px); } ol li::marker { letter-spacing: -1.1px; } ul { padding-left: calc(0.7rem + 7px); } article ol ul ul ul ul, article ul ul ul ul, aside ol ul ul ul ul, aside ul ul ul ul, div.callout ol ul ul ul ul, div.callout ul ul ul ul, table ol ul ul ul ul, table ul ul ul ul{ list-style-type: '◊ '; } article ol ul ul ul, aside ol ul ul ul, aside ul ul ul, div.callout ol ul ul ul, div.callout ul ul ul, table ol ul ul ul, table ul ul ul { list-style-type: square; } article ol ul ul, aside ol ul ul, aside ul ul, div.callout ol ul ul, div.callout ul ul, table ol ul ul, table ul ul { list-style-type: circle; } article ol ul, aside ol ul, aside ul, div.callout ol ul, div.callout ul, table ol ul, table ul { list-style-type: disc; } li { margin-bottom: 0.063rem; margin-top: 0.063rem; } li.ltop { margin-top: 0.438rem; } li.lbottom { margin-bottom: 0.438rem; } ul[type='square'] { list-style-type: square; } ul[type='circle'] { list-style-type: circle; } ul[type='disc'] { list-style-type: disc; } ul[type='rhombus'] { list-style-type: '◊ '; } ul[type='triangle'] { list-style-type: '⏵ '; } ul[type='dash'] { list-style-type: '– '; } ul li:has(> p.footnote-paragraph:first-child)::marker, ol li:has(> p.footnote-paragraph:first-child)::marker { font-size: 80%; } /* |-------------------------------------------------------------------------- | Tables |-------------------------------------------------------------------------- */ caption { font-weight: 700; padding: 0.25rem; } table { border-collapse: collapse; display: block; margin: 0.25rem 0; overflow-x: auto; } td, th { border: 0.063rem solid var(--pq-table-border); padding: 0.25rem; text-align: left; } td.sub-item, th.sub-item { padding-left: 1.063rem; } th { background-color: var(--pq-table-th); } th.subheader { background-color: var(--pq-table-th-subheader); } tr { background-color: var(--pq-table-tr); } tr:nth-child(odd) { background-color: var(--pq-table-tr-nth); } /* Table with no borders */ table.no-border-table td, table.no-border-table th { border: 0.063rem solid transparent; } table.no-border-table tr:nth-child(odd) { background-color: transparent; } /* Table with compact cells */ table.compact-table td, table.compact-table th { height: 1rem; padding: 0.1rem 0.4rem 0.2rem 0; min-width: auto; } /* |-------------------------------------------------------------------------- | Icons |-------------------------------------------------------------------------- */ a.see-link, a.see-video, a.medcalc, a[href^='http'], a[href^='www'], a.see-below, a.see-above, a.see-page, a[href*="://a/"], a[href*="../../"] { display: inline; background-color: transparent; width: auto; text-indent: initial; border-radius: 0; white-space: normal; overflow: visible; align-items: center; justify-content: flex-start; position: relative; transform: rotate(0deg); -webkit-transform: rotate(0deg); text-transform: none; margin: initial; height: initial; } a.see-link::after, a.see-video::after, a.medcalc::after, a[href^='http']::after, a[href^='www']::after, a.see-below::after, a.see-above::after, a.see-page::before, a[href*="://a/"]:not(.see-below):not(.see-above)::before, a[href*="../../"]:not(.see-below):not(.see-above)::before { content: ''; display: inline; font-size: inherit; padding: 0 calc(1lh / 1.9); background-color: var(--primary-book-color, var(--main-book-color)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; } a.see-page::before, a[href*="://a/"]::before, a[href*="../../"]::before { -webkit-mask-image: var(--svg-see-article); mask-image: var(--svg-see-article); padding: 0 calc(1lh / 2); } a.see-below::after, a.see-above::after { -webkit-mask-image: var(--svg-icon-arrow-downward); mask-image: var(--svg-icon-arrow-downward); } a.see-video::after, a.see-link::after, a[href^='http']::after, a[href^='www']::after { -webkit-mask-image: var(--svg-icon-link); mask-image: var(--svg-icon-link); mask-position: 0; } a.medcalc::after { -webkit-mask-image: var(--svg-icon-calc); mask-image: var(--svg-icon-calc); } /* |-------------------------------------------------------------------------- | Links |-------------------------------------------------------------------------- */ /* | Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { -webkit-text-decoration-skip: objects; } /* | @link https://css-tricks.com/almanac/properties/h/hyphenate/ */ a, a:visited, a:hover, a:active { color: var(--primary-book-color, var(--main-book-color)); hyphens: auto; text-decoration: none; word-wrap: break-word; -webkit-hyphens: auto; } /* | Remove the outline on focused links when they are also active or hovered in all browsers. */ a:active, a:hover { outline-width: 0; } /* |-------------------------------------------------------------------------- | WYSIWYG |-------------------------------------------------------------------------- */ .tinted { color: var(--primary-book-color, var(--main-book-color)); } .ltop { margin-top: 0.5rem; } .lbottom { margin-bottom: 0.5rem; } .uppercase { text-transform: uppercase; } /* |-------------------------------------------------------------------------- | Callouts |-------------------------------------------------------------------------- */ aside { border-width: 1px; border-style: solid; margin: 0.75em 0; padding: 0.5rem 0.625rem; } aside h6 { margin: 0; } .callout { border-width: 1px; border-style: solid; margin: 0.75em 0; padding: 0.5rem 0.625rem; } aside[data-block="callout"] { border-width: 1px; border-style: solid; margin: 0.75em 0; padding: 0.5rem 0.625rem; } .callout h6 { margin: 0; } aside[data-block="callout"] h6 { margin: 0; } .callout + .callout { margin-top: 0; } aside[data-block="callout"] + aside[data-block="callout"] { margin-top: 0; } .callout.primary { background-color: var(--pq-callout-primary); border-color: var(--pq-callout-primary-border); } .callout.secondary { background-color: var(--pq-secondary-background); border-color: var(--pq-separator); } .callout.warning { background-color: var(--pq-callout-warning); border-color: var(--pq-callout-warning-border); } aside[data-block="callout"] { background-color: var(--pq-secondary-background); border-color: var(--pq-separator); } aside[data-block="callout"][data-type="primary"] { background-color: var(--pq-callout-primary); border-color: var(--pq-callout-primary-border); } aside[data-block="callout"][data-type="secondary"] { background-color: var(--pq-secondary-background); border-color: var(--pq-separator); } aside[data-block="callout"][data-type="warning"] { background-color: var(--pq-callout-warning); border-color: var(--pq-callout-warning-border); } /* |-------------------------------------------------------------------------- | Blockquotes |-------------------------------------------------------------------------- */ blockquote { position: relative; padding: 0.5rem 0.875rem; margin: 0.75rem 0; } blockquote:before { content: ''; display: block; width: 6px; height: 100%; border-radius: 3px; position: absolute; top: 0; left: 0; } blockquote + blockquote { margin-top: 0; } blockquote h6 { margin: 0; } blockquote:before { background:var(--pq-blockquote-secondary); } blockquote[data-type='primary']:before { background: var(--pq-blockquote-primary); } blockquote[data-type='secondary']:before { background: var(--pq-blockquote-secondary); } blockquote[data-type='warning']:before { background: var(--pq-blockquote-warning); } blockquote[data-type='custom']:before { background: var(--blockquote-border-color); } /* |-------------------------------------------------------------------------- | Description lists |-------------------------------------------------------------------------- */ dl { margin: 0.375rem 0; } dt { font-weight: 700; } dl.abbreviations { } dl.authors dd, dl.faq dd { margin-bottom: 0.375rem; } dl.footnotes > dt { float: left; width: 1.5em; } dl.footnotes > dd { margin-left: 1.5em; } /* |-------------------------------------------------------------------------- | Note taking |-------------------------------------------------------------------------- */ .note { display: none; background-color: var(--pq-notes-background); /* #f6c342 @ 50% opacity */ margin: 0.313rem -0.313rem; padding: 0.25rem 0.313rem; white-space: pre-wrap; } .notedate { color: var(--pq-body-secondary-color); font-size: 0.75em; margin-top: 0.25rem; } header .note { margin: 0rem -0.313rem; } /* |-------------------------------------------------------------------------- | Global |-------------------------------------------------------------------------- */ #copyright { font-size: 80%; color: #8c8c8c; text-align: center; } /* |-------------------------------------------------------------------------- | Inline references |-------------------------------------------------------------------------- */ cite { display: inline-block; border-radius: 4px; border: 1px solid var(--primary-book-color, var(--main-book-color)); background: var(--primary-book-color-alpha, var(--main-book-color-alpha)); height: 19px; width: 26px; align-items: center; justify-content: center; position: relative; cursor: pointer; transform: translateY(3px); } cite::before { content: ""; position: absolute; top: 0; left: 4px; display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 18px; height: 18px; transform: translateX(-2px); background-color: var(--primary-book-color, var(--main-book-color)); -webkit-mask-image: var(--svg-icon-format-quote); mask-image: var(--svg-icon-format-quote); } /* |-------------------------------------------------------------------------- | Source container |-------------------------------------------------------------------------- */ .pq-source-container { display: flex; padding: 15px; flex-direction: column; gap: 21px; width: calc(100% - 1.25rem); border-radius: 8px; background: var(--pq-secondary-background); margin-bottom: 10px; margin: 0 0.625rem 1rem; overflow: hidden; } .pq-source-container--title { display: flex; flex: 1; padding-bottom: 6px; align-items: center; border-bottom: 1px solid var(--pq-separator); } .pq-source-container--title h2 { all:unset; color: var(--pq-body-color); font-size: 20px; font-style: normal; font-weight: 700; line-height: 20px; margin: 0; } .pq-source-container .list { width: 100%; display: flex; flex-direction: column; gap: 15px; } .pq-source-container .list .item { width: 100%; display: flex; flex-direction: row; align-items: flex-start; gap: 8px; } .pq-source-container .list .item .item--icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 18px; background: var(--pq-body-color); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 18px; mask-size: 18px; -webkit-mask-image: var(--svg-icon-format-quote); mask-image: var(--svg-icon-format-quote); } .pq-source-container .list .item .item--text { display: flex; flex-direction: column; gap: 6px; flex: 1; } .pq-source-container .list .item .item--text span { color: var(--pq-body-color); font-size: 15px; font-weight: 400; line-height: 20px; width: 100%; display: inline-block; } .pq-source-container .list .item .item--text a, .pq-source-container .list .item .item--text a:visited { color: var(--pq-body-color); text-decoration: underline; } .pq-source-container .list .item .item--text p { margin: 0; } .pq-source-container .list .item .item--text--links { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px; } .pq-source-container .list .item .item--text--links a { color: var(--primary-book-color, var(--main-book-color)); font-size: 15px; font-weight: 400; line-height: 20px; text-decoration: none; } .pq-source-container .list .item .item--text--links a:after { display:none; } .pq-source-container .list .item .item--text--links a:visited { color: var(--primary-book-color, var(--main-book-color)); } .pq-source-container .list .item .item--link a, .pq-source-container .list .item .item--link a:visited { color: var(--pq-body-color); } /* |-------------------------------------------------------------------------- | Publicatique Interactive Elements |-------------------------------------------------------------------------- */ .pqie-container { display: inline-flex; align-items: center; flex-direction: row; gap: 5px; padding: 2px 5px; } .pqie-container label { font-size: inherit; line-height: inherit; font-weight: inherit; font: inherit; color: inherit; text-transform: inherit; display: inline-block; } .pqie-container.pqie-sum { margin: 2px 0; padding: 0px 6px; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid #d5dbe1; background: var(--primary-book-color-alpha, var(--main-book-color-alpha)); flex-wrap: wrap; justify-content: flex-start; } .pqie-container input[type='checkbox'] { all: unset; display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; border-radius: 4px; background: var(--pq-body-background); box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(60, 66, 87, 0.16), 0px 2px 5px 0px rgba(60, 66, 87, 0.08); margin: 0; min-width: 14px; max-width: 14px; width: 14px; min-height: 14px; max-height: 14px; height: 14px; transition: background 0.2s ease-in-out; cursor: pointer; } .pqie-container input[type='checkbox']:focus { outline: 4px solid var(--primary-book-color-alpha, var(--main-book-color-alpha)); } .pqie-container input[type='checkbox']:checked { background: var(--primary-book-color, var(--main-book-color)); position: relative; } .pqie-container input[type='checkbox']:checked::before { content: ''; display: block; width: 9px; height: 9px; background: transparent var(--svg-icon-checkbox); background-position: center; background-repeat: no-repeat; position: absolute; } .pqie-container input[type='radio'] { -webkit-appearance: none; appearance: none; background-color: var(--pq-body-background); margin: 0; font: inherit; color: var(--pq-separator); min-width: 18px; width: 18px; height: 18px; border: 2px solid var(--pq-separator); border-radius: 50%; display: grid; place-content: center; } .pqie-container input[type='radio']:checked { border: 2px solid var(--primary-book-color, var(--main-book-color)); } .pqie-container input[type='radio']::before { content: ''; width: 10px; height: 10px; border-radius: 100%; transform: scale(0); transition: 120ms transform ease-in-out; background-color: var(--primary-book-color, var(--main-book-color)); } .pqie-container input[type='radio']:checked::before { transform: scale(1); } .pqie-container input[type='number'] { all: unset; -webkit-font-smoothing: antialiased; box-sizing: border-box; border: 1px solid var(--pq-separator); background: var(--pq-body-background); border-radius: 4px; padding: 0 8px; font-size: 15px; font-style: normal; font-weight: 400; line-height: 20px; color: var(--pq-body-color); box-sizing: border-box; max-width: 120px; } .pqie-container input[type='number']:focus, .pqie-container input[type='number'].active { border: 1px solid var(--primary-book-color-alpha, var(--main-book-color-alpha)); outline: 2px solid var(--primary-book-color-alpha, var(--main-book-color-alpha)); } .pqie-container input[type='number']:disabled { border: 1px solid var(--pq-separator); background: #f8f8f8; color: #3a3a3a; } .pqie-radio { display: inline-flex; flex-direction: column; gap: 7px; } .pqie-radio-option { display: inline-flex; flex-direction: row; gap: 6px; } /* |-------------------------------------------------------------------------- | Carousel |-------------------------------------------------------------------------- */ .carousel { width: 100%; display: flex; position: relative; overflow: hidden; margin: 0.25rem 0; } .carousel--readonly { min-height: 564px; max-height: 564px; } .carousel__sliders-container { display: flex; flex: 1; transition: transform 0.3s ease-in-out; } .carousel__nav-arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--pq-table-border); border-radius: 50%; background: var(--pq-color-white); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; z-index: 2; box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2); position: absolute; top: 50%; } .carousel__nav-arrow--next::before, .carousel__nav-arrow--prev::before { content: ""; display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 8px; height: 14px; background-color: var(--pq-body-color); } .carousel__nav-arrow--prev { left: 16px; transform: translateY(-50%); } .carousel__nav-arrow--prev::before { -webkit-mask-image: var(--svg-icon-carousel-chevron-left); mask-image: var(--svg-icon-carousel-chevron-left); } .carousel__nav-arrow--next { right: 16px; transform: translateY(-50%); } .carousel__nav-arrow--next::before { -webkit-mask-image: var(--svg-icon-carousel-chevron-right); mask-image: var(--svg-icon-carousel-chevron-right); } /* .carousel__nav-arrow:hover { background-color: rgba(0, 0, 0, 0.05); }*/ .carousel-slide { display: flex; flex-direction: column; width: 100%; min-width: 100%; height: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--pq-separator); position: relative; background: var(--pq-secondary-background); margin: 0; } .carousel-slide.hidden { display: none; } .carousel-slide img { display: block; height: calc(100% - 100px); max-height: calc(100% - 100px); width: auto; max-width: 100%; object-fit: scale-down; border: none; margin: 0; } .carousel-slide--readonly img { height: unset; max-height: unset; min-height: 0; flex-grow: 1; } .carousel-slide__controls { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: row; justify-content: space-between; width: calc(100% - 24px); } .carousel-slide__controls__counter { display: flex; flex-direction: row; align-items: center; height: 22px; padding: 0 8px; background: rgba(4, 0, 64, 1); border: 1px solid rgba(137, 135, 166, 1); backdrop-filter: blur(7px); font-weight: 600; font-size: 14px; line-height: 100%; letter-spacing: 0px; text-align: center; color: var(--constants-white, rgba(255, 255, 255, 1)); border-radius: 999px; } .carousel-slide__controls__buttons { display: flex; flex-direction: row; gap: 10px; } .carousel-slide__controls__buttons button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; gap: 4px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 13px; font-style: normal; font-weight: 600; line-height: 22px; letter-spacing: -0.28px; background: var(--pq-color-white); border: 1px solid var(--pq-table-border); box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2); color: var(--pq-body-color); } .carousel-slide__controls__buttons button .icon { display: inline-flex; align-items: center; justify-content: center; } .carousel-slide__controls__buttons button .icon::before { content: ""; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; text-align: center; background-color: var(--pq-body-color); -webkit-mask-image: var(--svg-icon-carousel-full-screen); mask-image: var(--svg-icon-carousel-full-screen); } .carousel-slide__controls__buttons button .button__text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; text-transform: none; } .carousel-slide__caption-area { width: 100%; height: 100px; min-height: 100px; display: flex; flex-direction: row; padding: 12px; align-items: flex-start; gap: 4px; border-top: 1px solid var(--pq-separator); background: var(--pq-body-background); color: var(--pq-body-color); } .carousel-slide__caption-area--readonly { font-weight: 400; font-size: 15px; line-height: 130%; letter-spacing: 0px; color: var(--pq-body-color); min-height: auto; height: auto; } /* |-------------------------------------------------------------------------- | Media queries |-------------------------------------------------------------------------- */ @media only screen and (min-width: 640px) { header, h1, h2, h3, h4 { padding: 0.25rem 0.625rem 0.125rem 0.625rem; } article h2, article h3, article h4 { margin-left: -0.625rem; margin-top: 0.625rem; width: calc(100% + 1.25rem); } .note { margin-left: -0.625rem; margin-right: -0.625rem; padding-left: 0.625rem; padding-right: 0.625rem; } }

Release Notes

Access trusted expertise in one place