div { max-width: 500px; max-height: 95vh; max-height: 95dvh; background: var(--i-background_1); box-shadow: 0px 5px 55px rgba(0,0,0,0.4); border-radius: 6px; overflow: auto; } #elTwoFactorAuthentication .c2FA_info { max-width: 80%; margin-left: auto; margin-right: auto; } #elTwoFactorAuthentication button[name="_mfaCancel"] { border: none; padding-bottom: 7px; } #elTwoFactorAuthentication button[name="_mfaCancel"] i[class*=" fa-"] { cursor: pointer; } #elGoogleAuthenticator input[type="text"] { font-size: 30px; text-align: center; } #elAuthy select { width: 100%; } #elAuthy input[type="text"] { font-size: 30px; text-align: center; } .cAuthy_container { position: relative; } .cAuthy_icon { width: 36px; height: 36px; position: absolute; top: 8px; inset-inline-start: 8px; }]]> div { min-height: 60px; } .ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem { right: 100%; top: 15px; } .ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem:before { right: 1px; border-right-color: inherit; } .ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem:after{ border-right-color: currentColor; } .ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem { left: 100%; top: 15px; } .ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem:before { left: 1px; border-left-color: inherit; } .ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem:after{ border-left-color: currentColor; } .ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem{ left: 50%; margin-left: -1em; top: 100%; } .ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem:before { border-top-color: inherit; top: 1px; } .ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem:after{ border-top-color: currentColor; } /* Share Links */ .ipsShareLinks{ display: flex; flex-wrap: wrap; gap: .4em; } .ipsShareLink { width: 2.4em; height: 2.4em; border-radius: min(var(--i-design-radius), 6px); display: inline-grid; place-content: center; color: #fff !important; font-size: max(15px, 1em); } .ipsShareLink--internal { background: #008b00; } .ipsShareLink--deviantart { background: #00e59b; } .ipsShareLink--email { background: #444; } .ipsShareLink--facebook { background: #1778F2; } .ipsShareLink--linkedin { background: #0a66c2; } .ipsShareLink--reddit { background: #FF4500; } .ipsShareLink--vk { background: #507299; } .ipsShareLink--weibo { background: #D32F2F; } .ipsShareLink--youtube { background: #ff0000; } .ipsShareLink--foursquare { background: #2D5BE3; } .ipsShareLink--etsy { background: #F56400; } .ipsShareLink--flickr { background: #ff0084; } .ipsShareLink--github { background: #24292f; } .ipsShareLink--instagram { background: #E13D62; } .ipsShareLink--pinterest { background: #BD081C; } .ipsShareLink--slack { background: #42C299; } .ipsShareLink--xing { background: #B0D400; } .ipsShareLink--tumblr { background: #36465D; } .ipsShareLink--twitch { background: #772ce8; } .ipsShareLink--discord { background: #5865f2; } .ipsShareLink--x { background: #000000; } /* Status update widget */ .ipsWidget .cStatusUpdateWidget .ipsComposeArea_dummy { padding: 7px 10px; font-size: var(--i-font-size_-1); } .ipsWidget .cStatusUpdateWidget .ipsComposeArea_dummy i[class*=" fa-"] { margin-inline-end: 5px; } .ipsWidget .cStatusUpdateWidget [data-role="attachmentArea"] { display: none !important; } .cTagPopup .ipsTags { margin-top: 10px; } #elGuestTerms { background: var(--i-background_1); border-top: 1px solid color-mix(in srgb, var(--i-color_root) 10%, transparent); background-clip: var(--if-light,padding-box) var(--if-dark,border-box); position: sticky; bottom: 0; padding: 1.3em 0; z-index: 4000; } :where([data-ips-scheme="dark"]) #elGuestTerms { background: var(--i-background_3); } @media (max-width: 979px){ #elGuestTerms{ bottom: var(--i-mobileFooter--he); } } /* Guest Sign In */ .cGuestTeaser .ipsButton.ipsButton--primary { width: 100%; max-width: 350px; } .cGuestTeaser_social { width: 250px; margin-bottom: 5px; } /* Ensure Google captcha logo appears on top of other elements */ .grecaptcha-badge{ z-index: 10; } @media (max-width: 979px){ /* Move recaptcha badge above mobile footer */ body:not(:has(.ipsEditor:focus-within)) .grecaptcha-badge{ bottom: calc(var(--i-mobileFooter--he) + 10px) !important; } } @media (min-width: 980px){ body:has(#elGuestTerms[style*="block"]) .grecaptcha-badge{ bottom: 120px !important; /* Magic number */ } } /* Color chooser for Content Item Messages */ .cColorChoices li { position: relative; } .cColorChoice_chooser { background-color: var(--_ba-co); width: 42px; height: 36px; display: block; position: relative; border-radius: 4px; } .cColorChoices [type="radio"] { position: absolute; width: 100%; height: 100%; z-index: 1; appearance: none; cursor: pointer; } .cColorChoices [type="radio"]:checked + .cColorChoice_chooser { outline: 2px solid currentColor; outline-offset: 1px; } /* Club embeds */ .cClubEmbedHeader { position: relative; height: 180px; } .cClubEmbedHeader.cClubEmbedHeaderNoPhoto, .cClubEmbedHeader.cClubEmbedHeaderNoPhoto span { height: 120px; } .cClubEmbedHeader .ipsUserPhoto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px solid #fff; } /* Notifications Menu Browser Prompt */ .cNotifcationPrompt { position: relative; background: var(--i-background_dark); color: #fff; } .cNotifcationPrompt_title { color: inherit; } .cNotifcationPrompt_text { opacity: 0.7; } .cNotifcationPrompt_icon { display: block; background-image: url('{resource="notification.svg" inCss="true" location="front" app="core"}'); background-repeat: no-repeat; background-size: cover; aspect-ratio: 1; } .cNotifcationPrompt_dismiss { background: hsl(0 0% 0% / .6); width: 16px; height: 16px; border-radius: 16px; line-height: 16px; text-align: center; color: #fff; font-size: 12px; position: absolute; top: 9px; inset-inline-end: 9px; } .cContentMessageEditor.cContentMessageEditor--private .ipsEditor{ border-color: var(--i-color_negative); --bo-sh: color-mix(in srgb, var(--i-color_negative) 15%, transparent); box-shadow: var(--bo-sh) 0px 0px 0px 6px; } .cContentMessageEditor.cContentMessageEditor--public .ipsEditor{ border-color: var(--i-color_positive); --bo-sh: color-mix(in srgb, var(--i-color_positive) 15%, transparent); box-shadow: var(--bo-sh) 0px 0px 0px 6px; } .cLogin_single{ max-width: 500px; margin: 0 auto; } /* Guest terms */ .cGuestTerms{ display: flex; align-items: center; flex-wrap: wrap; gap: 2em; } .cGuestTerms > :first-child{ flex: 999 1 50%; } /* PHONES */ @media screen and (max-width: 767px) { .cUserHovercard { min-width: 0; } /* Google MFA */ #elGoogleAuthenticator .ipsSpanGrid__8 { margin-top: 0; margin-bottom: 10px; } /* Guest Sign In */ .cGuestTeaser_social { width: 100%; } .cGuestTeaser_social a { margin: 0 auto; } html[dir] .cGuestTeaser_left { border-left: 0; border-right: 0; border-bottom: 2px solid var(--i-background_2); margin-bottom: 15px; padding-bottom: 15px; } /* Reset guest teaser on mobile back to normal layout from tablet flex layout */ .cGuestTeaser .ipsGrid { display: block !important; } .cGuestTeaser .ipsSpanGrid__6 { display: block !important; } } /* BOTH */ @media screen and (max-width: 979px) { /* Use flex to ensure positioning in guest teaser for tablet */ .cGuestTeaser .ipsGrid { display: flex; } .cGuestTeaser .ipsSpanGrid__6 { display: flex; flex: 1; flex-direction: column; } .cGuestTeaser .ipsSpanGrid__6 a { margin-top: auto; } } /* v5 code */ /* Achievements Widget */ .cAchievementsWidget__badge img{ max-width: 60px; max-height: 35px; } /* ---------------- - Page builder ---------------- */ /* Hide empty widget containers if they aren't being managed This can happen when widgets have just been saved, since ipsHide isn't applied If these are visible, they create extra space due to margins from .ipsLayout__primary-column > * */ .cWidgetContainer:not(.cWidgetContainer_managing):empty{ display: none; } /* Main wrapper */ .cWidgetContainer--main{ --i-block--padding-block: 0; --i-block--padding-inline: 0; --i-block--margin-top: 0; --i-block--gap: 0; --i-block--size: 300px; --i-block--transform-offset: 20; /* Grid allows the widgets/containers to be spaced apart using gap */ display: grid; gap: var(--i-sp_block); } /* Sidebar Manager */ .ipsApp.cWidgetsManaging { --i-manage-widgets-sidebar: clamp(300px, 18vw, 375px); /*margin-inline-start: var(--i-manage-widgets-sidebar);*/ position: absolute; left: var(--i-manage-widgets-sidebar); width: calc(100% - var(--i-manage-widgets-sidebar)); } @media(min-width: 2400px) { #elSidebarManager { font-size: 1.05em; } } .cWidgetContainer_managing:not(.cWidgetContainer .cWidgetContainer_managing) { min-height: 100px; } .cWidgetContainer{ position: relative; } /* ---------------- - Widget groups/alignment ---------------- */ /* General groups */ .cWidgetContainer--isGroup{ display: flex; flex-wrap: wrap; gap: var(--i-block--gap); padding-block: calc(1px * var(--i-block--padding-block)); padding-inline: calc(1px * var(--i-block--padding-inline)); } .cWidgetContainer--isWidget{ flex: 1 1 var(--i-block--size); } /* Carousel */ .cWidgetContainer--carousel{ display: grid; grid-auto-columns: min(var(--i-block--size), 100%); overflow: auto; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 0 1px; /* Add widget box styles to carousel container */ background: var(--i-widget--ba-co); border-radius: var(--i-widget--bo-ra); box-shadow: var(--i-widget--bo-sh); border-width: var(--i-widget--bo-wi); border-style: var(--i-widget--bo-st); border-color: var(--i-widget--bo-co); background-clip: padding-box; container-type: inline-size; } /* Remove all styles from widgets inside carousel groups. The :not(#x) selector aims to future-proof any other complex selectors */ .cWidgetContainer--carousel .ipsWidget:not(#x){ border-width: 0; box-shadow: none; background: none; border-radius: 0; outline: max(var(--i-widget--bo-wi), 1px) solid var(--i-widget--bo-co); } .cWidgetContainer--carousel::-webkit-scrollbar { display: none; } .cWidgetContainer--carousel > .cWidgetContainer { scroll-snap-stop: always; scroll-snap-align: start; grid-row: 1; } .cWidgetContainer--carousel > .cWidgetContainer:last-of-type { scroll-snap-align: end; } .cWidgetContainer__carousel-buttons { order: 1; width: 100cqw; position: sticky; inset-inline-start: 0; display: flex; align-items: center; justify-content: space-between; padding: 5px; font-size: .9em; font-weight: 500; border-top: 1px solid var(--i-background_4); background: var(--i-background_2); } .cWidgetContainer__carousel-buttons button { width: 3em; height: 3em; text-align: center; border-radius: min(var(--i-design-radius), 6px); touch-action: manipulation; } .cWidgetContainer__carousel-buttons button[disabled] { opacity: 0.3; pointer-events: none; } @media (any-hover:hover){ .cWidgetContainer__carousel-buttons button:hover{ background-color: color-mix(in srgb, currentColor 5%, transparent); } } .cWidgetContainer__carousel-buttons [data-carousel-arrow="prev"] { order: -1; } .cWidgetContainer--carousel > .cWidgetContainer > .ipsWidget__content--wrap > .cSidebarBlock_managing { border-radius: 0; outline-width: 2px; } /* Grid */ .cWidgetContainer--grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--i-block--size), 100%), 1fr)); } /* Center */ .cWidgetContainer--center{ justify-content: center; } .cWidgetContainer--center .cWidgetContainer--isWidget{ flex-grow: 0; } /* Columns */ .cWidgetContainer--columnLeft > .cWidgetContainer--isWidget:nth-of-type(even), .cWidgetContainer--columnRight > .cWidgetContainer--isWidget:nth-of-type(odd){ flex: 999 1 max(calc(100% - var(--i-block--size) - var(--i-block--gap)), 50%); } /* Stack */ .cWidgetContainer--stack{ display: grid; } /* ---------------- - Managing widgets ---------------- */ /* Add a faint, dashed outline around main widget areas (header, main, footer, sidebar) */ .cWidgetContainer_managing.cWidgetContainer--main, .cWidgetContainer_managing.cWidgetContainer--isGroup{ outline: 1px dashed var(--i-color_soft); outline-offset: 4px; border-radius: var(--i-box--bo-ra); } .cWidgetContainer_managing.cWidgetContainer--dragInside{ outline: 2px dashed var(--i-color_hard); outline-offset: 5px; } /* Widgets */ .cSidebarBlock_managing{ outline: 3px solid var(--i-color_soft); outline-color: color-mix(in srgb, var(--i-color_soft) 30%, transparent); border-radius: var(--i-box--bo-ra); position: absolute; inset: 2px; display: flex; gap: .4em; align-items: baseline; padding: 1em; opacity: 0; } .cSidebarBlock_managing__heading { opacity: 1; transition: opacity 0.1s ease-out; } /* Hide the title on hover so the contents are visible */ .cSidebarBlock_managing__heading:hover { opacity: 0; transition-delay: 0.5s; } /* Only show manage panel when hovering or active */ .cWidgetContainer--menu_open .cSidebarBlock_managing, .cSidebarBlock_managing:hover{ opacity: 1; } /* Hover */ .cSidebarBlock_managing:where(:hover){ outline-color: var(--i-color_soft); } /* Active */ .cWidgetContainer--menu_open.cWidgetContainer--isWidget .cSidebarBlock_managing{ outline: 4px solid var(--i-primary); } /* ipsWidget__content--wrap--editing Is set while the widget is being edited, whether via the dialog or **inline**; in this case we don't want to show the dragging cursor */ .cSidebarBlock_managing:not(.ipsWidget__content--wrap--editing > .cSidebarBlock_managing) { cursor: move; } .ipsWidget__content--wrap--editing > .cSidebarBlock_managing { background: none; flex-direction: column; gap: calc(4px + .4em); left: calc(10px + 100%) !important; inset: revert; top: 0; outline: none; } .ipsWidget__content--wrap--editing > .cSidebarBlock_managing > * { aspect-ratio: 1; outline: 3px solid var(--i-secondary); box-shadow: var(--i-dropdown--bo-sh); } .ipsWidgetBlank:not([hidden]) ~ .cSidebarBlock_managing { background: none; } .cSidebarBlock_managing .ipsButton--inherit { color: var(--i-color_hard); background-color: var(--i-background_4); } .cSidebarBlock_managing h4 { background: #000; color: #fff; font-weight: 600; padding: 0.6em 1em; border-radius: 6px; margin-inline-end: auto; } .ipsWidget__content--wrap--editing .tiptap.ProseMirror { min-height: revert; padding: calc(var(--Widget__padding--pa, 1.5em) - 2px) !important; /* We take off 2px to account for the editor outline */ } /* Menu open on a group */ .cWidgetContainer--isGroup.cWidgetContainer--menu_open{ outline: 3px solid var(--i-primary); outline-offset: 2px; border-radius: var(--i-box--bo-ra); } /* Apply an outline to groups when a widget is dragged over them */ .cWidgetContainer--dragInside { outline: 3px solid var(--i-primary); outline-offset: 4px; border-radius: var(--i-box--bo-ra); transition: scroll-padding-left 0.2s ease-out; } :is(.cWidgetContainer--dragLeft, .cWidgetContainer--dragRight, .cWidgetContainer--dragBelow, .cWidgetContainer--dragAbove):not(.ipsScrolling,.ipsScrolling > *) { z-index: var(--ips-js-zindex-top); transition: transform 0.2s ease-out; } .cWidgetContainer--dragLeft:not(.ipsScrolling,.ipsScrolling > *) { transform-origin: left; transform: translateX(calc(var(--i-block--transform-offset) * -1px)); } .cWidgetContainer--dragRight:not(.ipsScrolling,.ipsScrolling > *) { transform-origin: right; transform: translateX(calc(var(--i-block--transform-offset) * 1px)); } /* For carousel widget groups, because of the scroll, transforming the first scrolling child just moves the scrollable area so it doesn't look "transformed". nth-child(2) because the widget area menu is the first child */ .cWidgetContainer--carousel.cWidgetContainer--dragBeforeFirst { scroll-padding-left: calc(var(--i-block--transform-offset) * 1px); } .cWidgetContainer--carousel.cWidgetContainer--dragAfterLast > .cWidgetContainer { transform-origin: left; transform: translateX(calc(var(--i-block--transform-offset) * -1px)); } .cWidgetContainer--dragAbove:not(.ipsScrolling,.ipsScrolling > *) { transform-origin: top; transform: translateY(calc(var(--i-block--transform-offset) * 1px)); } .cWidgetContainer--dragBelow:not(.ipsScrolling,.ipsScrolling > *) { transform-origin: bottom; transform: translateY(calc(var(--i-block--transform-offset) * -1px)); } /* Remove .ipsWidget__content--wrap when widgets aren't being edited */ .cWidgetContainer--main:not(.cWidgetContainer_managing) .ipsWidget__content--wrap{ display: contents; } .cWidgetContainer_managing .ipsWidget__content--wrap{ height: 100%; } /* Ensure widgets occupy the full height of other widgets in the widget group. Useful in situations when some widgets have more content than others */ .cWidgetContainer--isWidget .ipsWidget{ min-height: 100%; } /* Ensure empty widgets occupy some height so they don't collapse to 0px */ .cWidgetContainer_managing{ min-height: 100px !important; } .cWidgetContainer > .cWidgetContainer__menu_region { position: absolute; /* This must be fixed so that menus for areas inside a scrollable container will show outside the scrollable container */ z-index: 1; background-color: #0000; margin: calc(1em + 5px) 5px; } .cWidgetContainer.cWidgetContainer--menu_open > .cWidgetContainer__menu_region { z-index: 2; position: fixed; background-color: var(--i-background_1); } .cWidgetContainer__menu { z-index: 999; position: fixed; display: flex; padding: 5px; left: 50%; bottom: 26px; gap: 5px; transform: translateX(-50%); color: hsl(0 0% 100%); /* This breaks the backdrop filter on the dropout children */ border-width: 0; border-radius: 10px; box-shadow: hsl(0 0% 0% / .2) 0px 6px 20px; background: hsl(0 0% 0% / .8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation-name: cWidgetContainer__menu; animation-duration: 0.4s; } .cWidgetContainer__menu.ipsMenu { top: revert; } .cWidgetContainer__menu--empty { display: none !important; } .cWidgetContainer__menu:not(#x)::before { content: none; } .cWidgetContainer__menu [disabled] { opacity: 0.5; filter: grayscale(1); } @keyframes cWidgetContainer__menu{ 0%, 100%{ transform: translateX(-50%) scale(1); } 50%{ transform: translateX(-50%) scale(1.08); } } .cWidgetContainer__menu_dropout, .cWidgetContainer__menu_item { flex: 0 0 auto; width: 60px; position: relative; /* Ensure dropdowns are positioned correctly */ display: grid; place-content: center; aspect-ratio: 1; border-radius: 6px; } /* This is necessary because the dropout panel is inside the toggle button. If the cursor:pointer applied directly to the toggler then the panel will also have it */ .cWidgetContainer__menu_dropout::after { content: ""; width: 100%; opacity: 0; height: 100%; position: absolute; cursor: pointer; border-radius: inherit; } :is(.cWidgetContainer__menu_dropout, .cWidgetContainer__menu_item):hover, .cWidgetContainer__menu_dropout--open { background-color: hsl(0 0% 100% / .15); } .cWidgetContainer__menu_item[disabled] { pointer-events: none; } /* Some icons are wrapped in a button which affects their alignment */ :where(.cWidgetContainer__menu_dropout button){ display: block; } .cBuilderSvg { --i-svg--st-wi: 4; --i-svg--co: hsl(0 0% 90% / .34); --i-svg--st: hsl(0 0% 90%); width: auto; height: 38px; display: block; color: var(--i-svg--co); } .cBuilderMenuText { height: 60px; padding: 1em; font-weight: bold; align-content: center; } .cWidgetContainer__menu [type="range"] { --i-co: currentColor; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; width: 220px; border: 0; height: 1.4em; box-shadow: none; padding: 0; color: var(--i-co); } @media (any-hover:hover){ .cWidgetContainer__menu :hover > [type="range"]{ --_thumb--sc: 1; } } .cWidgetContainer__menu [type="range"]::-webkit-slider-runnable-track { background: currentColor; height: 1px; transition: .2s; } .cWidgetContainer__menu [type="range"]::-moz-range-track { background: currentColor; height: 1px; transition: .2s; } .cWidgetContainer__menu [type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; background-color: var(--i-co); border: none; height: 12px; width: 12px; border-radius: 50%; transform: scale(var(--_thumb--sc, .7)); transition: .2s; outline: 2px solid var(--panel--ba-co); } .cWidgetContainer__menu [type="range"]::-moz-range-thumb { background-color: var(--i-co); border: none; height: 12px; width: 12px; border-radius: 50%; transform: scale(var(--_thumb--sc, .7)); transition: .2s; outline: 2px solid var(--panel--ba-co); } @media(hover:none){ .cWidgetContainer__menu [type="range"]::-webkit-slider-thumb { width: 40px; height: 20px; margin-top: -10px; border-radius: 6px; transform: none; } } .cWidgetContainer__menu_dropout i.fas.fa-info-circle.ipsTitle--h4{ display: none; } .cWidgetContainer__menu [data-role="otherChildren"] { background: hsl(0 0% 0% / .8); color: hsl(0 0% 100%); transition: opacity 0.2s, bottom 0.2s; position: absolute; bottom: calc(100% - 10px); left: 0; display: flex; flex-direction: column; width: max-content; opacity: 0; pointer-events: none; border-radius: 10px; overflow: hidden; /* Crop the highlight color on hovered buttons */ } /* Hover */ .cWidgetContainer__menu_dropout--open [data-role="otherChildren"] { bottom: calc(100% + 8px); opacity: 1; pointer-events: auto; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .cWidgetContainer__menu-icon--carousel-toggle{ } .cWidgetContainer__menu .rangecontainer { flex-direction: column; } /* Pop-up menu options */ .cWidgetContainer__menu-icon, :where(.cWidgetContainer__menu_dropout [data-role="otherChildren"] > *) { align-self: stretch; display: flex; align-items: center; gap: .8em; padding: .7em 1em; white-space: nowrap; color: #fff; /* font-weight: 600; */ } .cWidgetContainer__menu-icon:hover{ background-color: hsl(0 0% 100% / .1); } .cWidgetContainer__menu-icon[data-active]{ background-color: hsl(0 0% 100% / .25); } /* Pseudo checkbox for Carousel option */ .cWidgetContainer__menu-checkbox{ width: 1.2em; height: 1.2em; border-radius: 4px; background: hsl(0 0% 100% / .3); border: 1px solid hsl(0 0% 100% / .2); display: grid; place-content: center; line-height: 1; margin-inline-start: auto; font-family: sans-serif; /* Needed to prevent emoji from showing */ } .cWidgetContainer__menu-checkbox[data-checked]::before{ content: '\2714'; font-size: .7em; } /* Mini icons in pop-up menus */ .cWidgetContainer__menu-icon .cBuilderSvg { height: auto; width: 22px; flex: 0 0 auto; } .cWidgetContainer__menu-icon--carousel-toggle > input[type="checkbox"] { cursor: pointer; } .cWidgetContainer .cWidgetContainer__menu_dropout:not(.cWidgetContainer__menu_dropout--down,.cWidgetContainer__menu_dropout--up) [data-role="otherChildren"], .cWidgetContainer .cWidgetContainer__menu_dropout:not(.cWidgetContainer__menu_dropout--down,.cWidgetContainer__menu_dropout--up) { height: 60px; } .cWidgetContainer .cWidgetContainer__menu_dropout:is(.cWidgetContainer__menu_dropout--down,.cWidgetContainer__menu_dropout--up) [data-role="otherChildren"], .cWidgetContainer .cWidgetContainer__menu_dropout:is(.cWidgetContainer__menu_dropout--down,.cWidgetContainer__menu_dropout--up) { width: 60px; } .cWidgetContainer__menu--label { cursor: revert; } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--down { flex-direction: column; } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--left { flex-direction: row-reverse; } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--up { flex-direction: column-reverse; } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--down [data-role="otherChildren"] { flex-direction: column; transform-origin: top; height: revert; width: inherit; } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--down:not(:hover) [data-role="otherChildren"] { transform: scaleX(1) scaleY(0); } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--up [data-role="otherChildren"] { flex-direction: column-reverse; transform-origin: bottom; height: revert; width: inherit; } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--up:not(:hover) [data-role="otherChildren"] { transform: scaleX(1) scaleY(0); } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--left [data-role="otherChildren"] { flex-direction: row-reverse; transform-origin: right; } .cWidgetContainer__menu_dropout.cWidgetContainer__menu_dropout--left:not(:hover) [data-role="otherChildren"] { transform: scaleX(0) scaleY(1); } .ipsWidget__content--wrap--editing { z-index: 3; } .ipsWidget__content--wrap--editing > .ipsWidget { display: grid; } .ipsWidget__content--wrap--editing :is(.ipsComposeArea_editor:not(.ipsComposeArea_minimized) [data-role="mainEditorArea"], .ipsEditor__tiptap-wrap) { padding: 0 !important; position: relative; min-height: fit-content !important; grid-template-rows: auto; /* By default, this is auto 1fr so that there is room for the toolbar, but for the inline editor the toolbar is displayed above the content so we just want auto */ } .ipsWidget__content--wrap--editing .ipsEditor__toolbar--main { position: absolute; bottom: calc(20px + 100%); top: revert; min-height: fit-content; width: 100%; margin: 0; box-shadow: var(--i-dropdown--bo-sh); border-radius: var(--i-box--bo-ra); outline: 2px solid var(--i-primary); } .ipsWidget__content--wrap--editing > .ipsWidget :not(.ipsComposeArea_editor *), .ipsWidget__content--wrap--editing :is([data-role="editorComposer"], [data-role="mainEditorArea"], .ipsEditor), .ipsWidget__content--wrap--editing [data-role="mainEditorArea"] :not(.ipsEditor__toolbar, .ipsEditor__toolbar *, .tiptap *) { padding: 0; margin: 0; width: 100%; height: 100%; } .ipsWidget__content--wrap--editing .ipsEditor { border-radius: var(--i-box--bo-ra); } .ipsWidget__content--wrap--editing .ipsEditor__tiptap-wrap { box-shadow: var(--i-dropdown--bo-sh); } .ipsWidget__content--wrap--editing > .ipsWidget .ipsComposeArea_editor { width: 100%; height: 100%; } .ipsWidget__content--wrap--editing :is( .cSidebarBlock_managing, .ipsEditor__toolbar--main, [data-ipseditor-toollist] ){ z-index: calc(var(--ips-js-zindex-top) - 10); } .ipsWidget__content--wrap--editing .ipsComposeArea_editor [data-ipseditor-toollist] { bottom: revert; margin: 0; outline: 2px solid var(--i-primary); width: 100%; top: calc(20px + 100%); box-shadow: var(--i-dropdown--bo-sh); position: absolute; border-radius: var(--i-box--bo-ra); background-color: var(--i-background_1); } .ipsWidget__content--wrap--editing .ipsComposeArea_dropZone { margin: 0; } .cSidebarBlock_loading { min-height: 120px; } .ipsWidgetBlank { padding: 4.5em 2em 2em; } select [value="Arial"] { font-family: Arial; } select [value="Helvetica"] { font-family: Helvetica; } select [value="Times new roman"] { font-family: "Times new roman"; } select [value="Courier"] { font-family: Courier; } select [value="Lato"] { font-family: Lato; } select [value="Merriweather"] { font-family: Merriweather; } select [value="Open sans"] { font-family: "Open sans"; } select [value="Raleway"] { font-family: Raleway; } select [value="Raleway black"] { font-family: "Raleway black"; } select [value="Roboto"] { font-family: Roboto; } select [value="Roboto black"] { font-family: "Roboto black"; } /* Fade non-editable widgets */ .cWidgetsManaging__faded-root { user-select: none; filter: grayscale(0.5); opacity: 0.35; pointer-events: none; } .cWidgetsManaging__faded-root--animating { transition: opacity 0.25s; } /* Ensure all children inside these faded elements can't be clicked (such as .ipsLinkPanel) */ .cWidgetsManaging__faded-root * { pointer-events: none; } /* "Drag and drop widgets here" message */ [data-pageeditor-empty-message]:empty::after { content: attr(data-pageeditor-empty-message); white-space: pre-wrap; align-content: center; text-align: center; position: absolute; inset :0; font-weight: bold; font-size: 1.25em; font-family: var(--i-font-family), var(--i-font-awesome); }]]> .ipsFlag { --y: 0; width: 16px; height: 16px; background-image: url('{resource="flags.png" app="core" location="global" inCss="true"}'); background-size: 16px auto; background-position: 0 calc(var(--y) * -1px); display: inline-block; vertical-align:text-top; line-height:16px; } .ipsFlag-ad{--y:352;} .ipsFlag-ae{--y:368;} .ipsFlag-af{--y:384;} .ipsFlag-ag{--y:400;} .ipsFlag-ai{--y:416;} .ipsFlag-al{--y:432;} .ipsFlag-am{--y:448;} .ipsFlag-ao{--y:464;} .ipsFlag-aq{--y:480;} .ipsFlag-ar{--y:496;} .ipsFlag-as{--y:512;} .ipsFlag-at{--y:528;} .ipsFlag-au{--y:544;} .ipsFlag-aw{--y:560;} .ipsFlag-ax{--y:576;} .ipsFlag-az{--y:592;} .ipsFlag-ba{--y:608;} .ipsFlag-bb{--y:624;} .ipsFlag-bd{--y:640;} .ipsFlag-be{--y:656;} .ipsFlag-bf{--y:672;} .ipsFlag-bg{--y:688;} .ipsFlag-bh{--y:704;} .ipsFlag-bi{--y:720;} .ipsFlag-bj{--y:736;} .ipsFlag-bm{--y:752;} .ipsFlag-bn{--y:768;} .ipsFlag-bo{--y:784;} .ipsFlag-br{--y:800;} .ipsFlag-bs{--y:816;} .ipsFlag-bt{--y:832;} .ipsFlag-bw{--y:848;} .ipsFlag-by{--y:864;} .ipsFlag-bz{--y:880;} .ipsFlag-ca{--y:896;} .ipsFlag-cg{--y:912;} .ipsFlag-cf{--y:928;} .ipsFlag-cd{--y:944;} .ipsFlag-ch{--y:960;} .ipsFlag-ci{--y:976;} .ipsFlag-ck{--y:992;} .ipsFlag-cl{--y:1008;} .ipsFlag-cm{--y:1024;} .ipsFlag-cn{--y:1040;} .ipsFlag-co{--y:1056;} .ipsFlag-cr{--y:1072;} .ipsFlag-cu{--y:1088;} .ipsFlag-cv{--y:1104;} .ipsFlag-cy{--y:1120;} .ipsFlag-cz{--y:1136;} .ipsFlag-de{--y:1152;} .ipsFlag-dj{--y:1168;} .ipsFlag-dk{--y:1184;} .ipsFlag-dm{--y:1200;} .ipsFlag-do{--y:1216;} .ipsFlag-dz{--y:1232;} .ipsFlag-ec{--y:1248;} .ipsFlag-ee{--y:1264;} .ipsFlag-eg{--y:1280;} .ipsFlag-eh{--y:1296;} .ipsFlag-er{--y:1312;} .ipsFlag-es{--y:1328;} .ipsFlag-et{--y:1344;} .ipsFlag-fi{--y:1360;} .ipsFlag-fj{--y:1376;} .ipsFlag-fm{--y:1392;} .ipsFlag-fo{--y:1408;} .ipsFlag-fr{--y:1424;} .ipsFlag-bl{--y:1424;} .ipsFlag-cp{--y:1424;} .ipsFlag-mf{--y:1424;} .ipsFlag-yt{--y:1424;} .ipsFlag-ga{--y:1440;} .ipsFlag-gb{--y:1456;} .ipsFlag-sh{--y:1456;} .ipsFlag-gd{--y:1472;} .ipsFlag-ge{--y:1488;} .ipsFlag-gg{--y:1504;} .ipsFlag-gh{--y:1520;} .ipsFlag-gi{--y:1536;} .ipsFlag-gl{--y:1552;} .ipsFlag-gm{--y:1568;} .ipsFlag-gn{--y:1584;} .ipsFlag-gp{--y:1600;} .ipsFlag-gq{--y:1616;} .ipsFlag-gr{--y:1632;} .ipsFlag-gt{--y:1648;} .ipsFlag-gu{--y:1664;} .ipsFlag-gw{--y:1680;} .ipsFlag-gy{--y:1696;} .ipsFlag-hk{--y:1712;} .ipsFlag-hn{--y:1728;} .ipsFlag-hr{--y:1744;} .ipsFlag-ht{--y:1760;} .ipsFlag-hu{--y:1776;} .ipsFlag-id{--y:1792;} .ipsFlag-mc{--y:1792;} .ipsFlag-ie{--y:1808;} .ipsFlag-il{--y:1824;} .ipsFlag-im{--y:1840;} .ipsFlag-in{--y:1856;} .ipsFlag-iq{--y:1872;} .ipsFlag-ir{--y:1888;} .ipsFlag-is{--y:1904;} .ipsFlag-it{--y:1920;} .ipsFlag-je{--y:1936;} .ipsFlag-jm{--y:1952;} .ipsFlag-jo{--y:1968;} .ipsFlag-jp{--y:1984;} .ipsFlag-ke{--y:2000;} .ipsFlag-kg{--y:2016;} .ipsFlag-kh{--y:2032;} .ipsFlag-ki{--y:2048;} .ipsFlag-km{--y:2064;} .ipsFlag-kn{--y:2080;} .ipsFlag-kp{--y:2096;} .ipsFlag-kr{--y:2112;} .ipsFlag-kw{--y:2128;} .ipsFlag-ky{--y:2144;} .ipsFlag-kz{--y:2160;} .ipsFlag-la{--y:2176;} .ipsFlag-lb{--y:2192;} .ipsFlag-lc{--y:2208;} .ipsFlag-li{--y:2224;} .ipsFlag-lk{--y:2240;} .ipsFlag-lr{--y:2256;} .ipsFlag-ls{--y:2272;} .ipsFlag-lt{--y:2288;} .ipsFlag-lu{--y:2304;} .ipsFlag-lv{--y:2320;} .ipsFlag-ly{--y:2336;} .ipsFlag-ma{--y:2352;} .ipsFlag-md{--y:2368;} .ipsFlag-me{--y:2384;} .ipsFlag-mg{--y:2400;} .ipsFlag-mh{--y:2416;} .ipsFlag-mk{--y:2432;} .ipsFlag-ml{--y:2448;} .ipsFlag-mm{--y:2464;} .ipsFlag-mn{--y:2480;} .ipsFlag-mo{--y:2496;} .ipsFlag-mq{--y:2512;} .ipsFlag-mr{--y:2528;} .ipsFlag-ms{--y:2544;} .ipsFlag-mt{--y:2560;} .ipsFlag-mu{--y:2576;} .ipsFlag-mv{--y:2592;} .ipsFlag-mw{--y:2608;} .ipsFlag-mx{--y:2624;} .ipsFlag-my{--y:2640;} .ipsFlag-mz{--y:2656;} .ipsFlag-na{--y:2672;} .ipsFlag-nc{--y:2688;} .ipsFlag-ne{--y:2704;} .ipsFlag-ng{--y:2720;} .ipsFlag-ni{--y:2736;} .ipsFlag-nl{--y:2752;} .ipsFlag-bq{--y:2752;} .ipsFlag-no{--y:2768;} .ipsFlag-bv{--y:2768;} .ipsFlag-nq{--y:2768;} .ipsFlag-sj{--y:2768;} .ipsFlag-np{--y:2784;} .ipsFlag-nr{--y:2800;} .ipsFlag-nz{--y:2816;} .ipsFlag-om{--y:2832;} .ipsFlag-pa{--y:2848;} .ipsFlag-pe{--y:2864;} .ipsFlag-pf{--y:2880;} .ipsFlag-pg{--y:2896;} .ipsFlag-ph{--y:2912;} .ipsFlag-pk{--y:2928;} .ipsFlag-pl{--y:2944;} .ipsFlag-pr{--y:2960;} .ipsFlag-ps{--y:2976;} .ipsFlag-pt{--y:2992;} .ipsFlag-pw{--y:3008;} .ipsFlag-py{--y:3024;} .ipsFlag-qa{--y:3040;} .ipsFlag-re{--y:3056;} .ipsFlag-ro{--y:3072;} .ipsFlag-rs{--y:3088;} .ipsFlag-ru{--y:3104;} .ipsFlag-rw{--y:3120;} .ipsFlag-sa{--y:3136;} .ipsFlag-sb{--y:3152;} .ipsFlag-sc{--y:3168;} .ipsFlag-sd{--y:3184;} .ipsFlag-se{--y:3200;} .ipsFlag-sg{--y:3216;} .ipsFlag-si{--y:3232;} .ipsFlag-sk{--y:3248;} .ipsFlag-sl{--y:3264;} .ipsFlag-sm{--y:3280;} .ipsFlag-sn{--y:3296;} .ipsFlag-so{--y:3312;} .ipsFlag-sr{--y:3328;} .ipsFlag-st{--y:3344;} .ipsFlag-sv{--y:3360;} .ipsFlag-sy{--y:3376;} .ipsFlag-sz{--y:3392;} .ipsFlag-tc{--y:3408;} .ipsFlag-td{--y:3424;} .ipsFlag-tg{--y:3440;} .ipsFlag-th{--y:3456;} .ipsFlag-tj{--y:3472;} .ipsFlag-tl{--y:3488;} .ipsFlag-tm{--y:3504;} .ipsFlag-tn{--y:3520;} .ipsFlag-to{--y:3536;} .ipsFlag-tr{--y:3552;} .ipsFlag-tt{--y:3568;} .ipsFlag-tv{--y:3584;} .ipsFlag-tw{--y:3600;} .ipsFlag-tz{--y:3616;} .ipsFlag-ua{--y:3632;} .ipsFlag-ug{--y:3648;} .ipsFlag-us{--y:3664;} .ipsFlag-uy{--y:3680;} .ipsFlag-uz{--y:3696;} .ipsFlag-va{--y:3712;} .ipsFlag-vc{--y:3728;} .ipsFlag-ve{--y:3744;} .ipsFlag-vg{--y:3760;} .ipsFlag-vi{--y:3776;} .ipsFlag-vn{--y:3792;} .ipsFlag-vu{--y:3808;} .ipsFlag-ws{--y:3824;} .ipsFlag-ye{--y:3840;} .ipsFlag-za{--y:3856;} .ipsFlag-zm{--y:3872;} .ipsFlag-zw{--y:3888;} .ipsFlag-sx{--y:3904;} .ipsFlag-cw{--y:3920;} .ipsFlag-ss{--y:3936;} .ipsFlag-nu{--y:3952;} :root { --condition-title-width: 90px; --condition-line-width: 3px; } .cRulesForm { max-width: 100ch; } .cRulesForm__condition{ display: flex; flex-wrap: wrap; gap: 1em; align-items: baseline; } .cRulesForm__condition select { width: auto; } .cRulesForm__condition [type="number"]{ width: 12ch; } .cRulesForm__condition__title { background: var(--i-primary); color: var(--i-primary-contrast); border-radius: 5px; width: 90px; padding-top: .3em; padding-bottom: .3em; } .cRulesForm__conditionButtons { color: var(--i-color_primary); } .cRulesForm_conditionWrap:not( .ipsHide ) + .cRulesForm__conditionButtons { padding-top: 1em; } .cRulesForm__conditionButton { color: inherit; padding: .4em 1em; border-radius: 5px; font-weight: 500; display: inline-flex; align-items: center; gap: .5em; } .cRulesForm__conditionButton:hover { background: var(--i-background_3); } .cRulesForm__conditionButton__icon { font-size: 10px; } .cRulesForm__condition__close { position: absolute; inset-inline-end: -6px; top: -6px; width: 1.8em; height: 1.8em; font-size: 12px; display: grid; place-content: center; border-radius: 50%; background: var(--i-base-contrast_2); color: var(--i-base_1); } .cRulesForm__condition__toDesc { margin-bottom: .4em; } .cRulesForm__condition__toDesc:empty { display: none; } .cRulesForm__assign-rewards :is(select, [type="number"]){ margin: 0 .4em; } @media (min-width: 768px){ .cRulesForm__container::before { content: ''; width: 3px; background: var(--i-background_4); position: absolute; top: 40px; bottom: 40px; inset-inline-start: 6em; } .cRulesForm__conditionButtons { padding-inline-start: 6em; } .cRulesForm__condition--subCondition { margin-inline-start: 2em; } } /* Badges */ .ipsAchievementsBadge{ display: inline-block; border-radius: 4px; border: 1px solid currentColor; color: var(--achievementsBadge--color, var(--i-color_hard)); background: var(--achievementsBadge--background-color, var(--i-background_3)); padding: .1em .6em; margin: 0 .1em; font-size: 95%; } [data-ips-scheme="dark"] .ipsAchievementsBadge{ border-color: transparent; } .ipsAchievementsBadge--milestone{ --achievementsBadge--color: #10967E; --achievementsBadge--background-color: #E5FDF9; } .ipsAchievementsBadge--location{ --achievementsBadge--color: #8168BD; --achievementsBadge--background-color: #F4F0FF; } [data-ips-scheme="dark"] .ipsAchievementsBadge--milestone{ --achievementsBadge--background-color: #10967E; --achievementsBadge--color: #E5FDF9; } [data-ips-scheme="dark"] .ipsAchievementsBadge--location{ --achievementsBadge--background-color: #8168BD; --achievementsBadge--color: #F4F0FF; } *{ flex: 1 1 auto; } .ipsControlStrip a { display: flex; align-items: center; justify-content: center; color: inherit; font-size: 14px; min-width: 2.4em; min-height: 2.4em; border-radius: 5px; } .ipsControlStrip_disabled { background: transparent; pointer-events: none; } .ipsControlStrip_disabled .ipsControlStrip_icon { opacity: .5; } :where(.ipsTree_row:hover .ipsControlStrip a) { background: var(--i-background_3); } @media (hover:none){ .ipsControlStrip a:not(:hover){ background: var(--i-background_3); } } .ipsControlStrip a:hover { color: var(--i-primary-contrast); background: var(--i-primary); } /* Hide text but keep for screen readers */ :where(.ipsControlStrip:not(.ipsControlStrip_showText) .ipsControlStrip_item) { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } /* Show text option */ .ipsControlStrip_showText a { width: auto; padding: 0 .7em; } .ipsControlStrip_item:where(:not(.ipsMenu *)) { font-size: .9em; margin-inline-start: .6em; font-weight: 600; }]]> li){ grid-column: 1/-1; } .ipsFieldRow--badge-creator-preview .ipsFieldRow__content{ position: sticky; top: 90px; } .ipsFieldRow--badge-creator{ grid-column: auto; align-content: start !important; } .ipsFieldRow--badge-creator:not(.ipsHide, [hidden]){ display: grid !important; grid-template-columns: 1fr !important; } .ipsFieldRow--badge-creator .ipsFieldRow__label{ text-align: start !important; display: flex !important; } .ipsFieldRow--badge-creator .ipsFieldRow__required{ flex: 0 0 auto !important; } .ipsFieldRow--badge-creator .sp-colorize{ max-width: none; } .ipsFieldRow--badge-creator-preview:not([hidden], .ipsHide, #x) { grid-column: 1/2; grid-row-end: span 5; display: block !important; } .ipsFieldRow--badge-creator-icon { grid-column: 3/5; } [data-controller="ips.core.badgepreview"] svg, .ipsFieldRow--badge-creator .sp-colorize-container{ width: 100%; } .ipsFieldRow--badge-creator [data-controller="core.admin.core.nodeCopySetting"] { display: none; } } /* Remove redundant borders and improve spacing for tabbed content, ie. ACP > Settings */ .acpFormTabContent .ipsBox{ border-width: 0; border-radius: 0; }]]> li.acpAppList_active .acpAppList__sub, body:not( .cAdminHideMenu ) #elHideMenu [data-action="toggleOpen"] { display: none; } .cAdminHideMenu #acpAppList, .cAdminHideMenu #acpAppMenu { width: 60px !important; } .cAdminHideMenu #acpAppList > li.acpAppList_active:hover .acpAppList__sub { display: block; } .cAdminHideMenu #acpAppList > li:hover > .acpAppList__sub { box-shadow: 0px -2px 36px rgba(0,0,0,0.2); } .cAdminHideMenu #elHideMenu [data-action="toggleClose"] { display: none; } */ /* ACP search bar */ .acpSearch{ background: var(--i-background_3); color: var(--i-color_root); border-radius: 6px; flex: 1 1 100%; display: flex; align-items: center; height: 41px; margin-inline-end: 10px; } .acpSearch:focus-within { background: var(--i-background_1); outline: 2px solid var(--i-primary); outline-offset: -1px; } .acpSearch .fa-magnifying-glass{ margin: 0 1em; opacity: .6; } #acpSearchKeyword { border: 0; background: transparent; max-width: 100%; padding: .75em 0; color: inherit; box-shadow: none; flex: 1 1 100%; outline: none; } #acpSearchKeyword::-webkit-input-placeholder { color: var(--i-color_soft); opacity: 1; } #acpSearchKeyword::placeholder { color: var(--i-color_soft); opacity: 1; } /* Admin controls */ #elAdminControls { display: flex; align-items: center; flex: 0 0 auto; font-size: 13px; font-weight: 600; margin-inline-start: auto; } #elAdminControls a { color: inherit; display: flex; align-items: center; gap: .5em; padding: 0 15px; border-radius: 4px; min-height: 40px; } #elAdminControls a:hover { background: var(--i-background_3); } #elAdminControls .acpHighlightLink_wrap { --i-co: 129, 46%; color: hsl(var(--i-co), 51%); display: block; position: relative; } #elAdminControls .acpHighlightLink_wrap:hover .acpHighlightLink{ background: hsl(var(--i-co), 95%); } #elAdminControls .acpHighlightLink_close { position: absolute; top: -6px; inset-inline-end: -6px; font-size: 11px; width: 1.9em; height: 1.9em; justify-content: center; padding: 0; border-radius: 20px; color: #fff; opacity: 0; min-height: 0; background: var(--i-color_soft) !important; } #elAdminControls .acpHighlightLink_wrap:hover > .acpHighlightLink_close { opacity: 100%; } /* Notifications icon */ #elAdminControls .ipsNotification{ top: 0; inset-inline-end: 0; } #elAdminControls i { opacity: .65; } #elAdminControls .fa-angle-down{ opacity: .5; font-size: .8em; } #elAdminUser{ padding: 0 15px; cursor: pointer; } #elAdminUser .ipsUserPhoto{ width: 36px; display: inline-block; vertical-align: middle; } #elAdminControls .ipsUserPhoto{ margin: 0; margin-inline-end: 5px; } /* Mobile navigation panel */ #elMobileDrawer .ipsDrawer_title{ display: flex; align-items: center; } #elMobileDrawer .acpAppList_icon{ width: 2em; opacity: .4; } #elMobileDrawer .ipsDrawer_itemParent > h4::after, #elMobileDrawer .ipsDrawer_list [data-action="back"] a::before{ opacity: .4; } /* Page titles */ #acpPageHeader { padding: 25px 15px 10px 15px; position: relative; } #acpPageHeader .ipsType_pageTitle { color: inherit; font-weight: 500; font-size: 26px; min-width: 0; } #acpPageHeader .ipsSubNavigation { margin-bottom: 5px; } .acpPageHeader_flex { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 1em; } /* Main content area */ #acpContent { padding: 15px var(--i-layout-gutter); /* Bad idea? */ display: flex; flex-direction: column; gap: 1em; } .acpNoPadding #acpContent { padding: 0; } /* Non-responsive pages don't display properly */ #acpContent > .ipsResponsive_hidePhone { display: flex; flex-direction: column; gap: 1em; } /* BREADCRUMB */ .ipsBreadcrumb > ul > li { font-size: 12px; color: inherit; } /* Password hovercard */ .ipsHovercard{ background: var(--i-background_3); } .ipsHovercard[data-role="advicePopup"] { width: 300px; } .ipsHovercard[data-role="advicePopup"] > div { min-height: 60px; } .ipsHovercard[data-role="advicePopup"] > div .ipsTitle { font-size: 16px; } .ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem { right: 100%; top: 25px; } .ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem:before { border-right-color: inherit; left: -1px; } .ipsHovercard[data-role="advicePopup"].cStem_ltr .ipsHovercard_stem:after { border-right-color: var(--i-background_3); } .ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem { left: 100%; top: 25px; border-left-color: inherit; } .ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem:before { border-left-color: inherit; right: -1px; } .ipsHovercard[data-role="advicePopup"].cStem_rtl .ipsHovercard_stem:after { border-left-color: var(--i-background_3); } .ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem { left: 50%; margin-inline-start: -15px; top: 100%; } .ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem:before { border-top-color: inherit; bottom: -1px; } .ipsHovercard[data-role="advicePopup"].cStem_above .ipsHovercard_stem:after { border-top-color: var(--i-background_3); } /* Hover fallbacks for non-js */ .ipsJS_none #acpAppList:hover > li:not( #elReorderAppMenu ) > a { background: transparent; } .ipsJS_none #acpAppList > li:not( #elReorderAppMenu ):hover > a { color: #fff; background: #394248; } .ipsJS_none #acpAppList:hover > li > .acpAppList__sub { display: none; } .ipsJS_none #acpAppList > li:hover > a + .acpAppList__sub { display: block; opacity: 1; } /* MISC */ .cACPkeywords{ --_co: currentColor; color: inherit; background: var(--i-background_3); background: color-mix(in srgb, var(--_co) 10%, transparent); font-weight: 700; cursor: pointer; } #acpPageHeader .cACPkeywords{ font-size: 12px; vertical-align: middle; margin-inline-start: 1em; } .ipsTabs .cACPkeywords{ margin-inline-start: 1em; } .ipsFieldRow__label .cACPkeywords:not(.ipsFieldRow__required ~ *){ margin-inline-start: auto; } /* Mobile menu */ #elUserNav_mobile{ display: flex; font-weight: 500; font-size: 12px; background: var(--i-background_2); text-align: center; } #elUserNav_mobile li{ display: contents; } #elUserNav_mobile a { flex: 1 1 auto; padding: 1em 0; color: var(--i-color_hard); } #elUserNav_mobile .fa { font-size: 34px; display: block; margin-bottom: 5px; } .cMobileNav_utilities { background: #000; position: absolute; bottom: 0; left: 0; right: 0; } .cMobileNav_utilities a { color: #fff; } /* NOTIFICATIONS */ .cAcpNotifications { font-size: 20px; } .cAcpNotifications a { position: relative; } .cAcpNotifications_active a { color: inherit !important; } #elFullAcpNotifications_menu li a { display: block; } @keyframes notificationAnimate { 0% {transform: rotateZ(8deg) scale(1);} 20% {transform: rotateZ(-8deg) scale(1.2);} 40% {transform: rotateZ(8deg) scale(1.4);} 60% {transform: rotateZ(-8deg) scale(1.4);} 80% {transform: rotateZ(8deg) scale(1.2);} 100% {transform: rotateZ(0deg) scale(1);} } .cAcpNotifications_animate { animation: notificationAnimate 0.8s ease; } .cNotification_error { border-inline-start: 7px solid var(--i-color_negative); } .cNotification_warning { border-inline-start: 7px solid var(--i-color_warning); } .cNotification_information { border-inline-start: 7px solid var(--i-secondary); } .cNotification_expire { border-inline-start: 7px solid var(--i-background_5); } /* NEW FEATURES TOUR */ .acpNewFeature { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .acpNewFeature_wrap { width: 340px; height: 475px; background: var(--i-background_2); border-radius: 3px; box-shadow: 0px 5px 35px rgba(0,0,0,0.1); position: relative; pointer-events: auto; } .acpNewFeature_inner { position: absolute; padding: 20px; inset: 0; overflow: hidden; } .acpNewFeature_mainTitle { font-size: 17px; color: var(--i-color_root); font-weight: 400; text-align: center; margin: 0; } .acpNewFeature_cardWrap { margin: 20px 0; position: relative; } .acpNewFeature_card { position:absolute; inset: 0; } .acpNewFeature_dots { text-align: center; position: absolute; bottom: 10px; left: 20px; right: 20px; } .acpNewFeature_dot { display: inline-block; } .acpNewFeature_dot > a { display: block; border: 1px solid #3D6594; border-color: var(--i-primary); border-radius: 11px; width: 11px; height: 11px; margin-inline-end: 2px; } .acpNewFeature_dot.acpNewFeature_active > a { background: #3D6594; background: var(--i-primary); } .acpNewFeature_dot:last-child > a { margin-inline-end: 0; } .acpNewFeature_info { text-align: center; } .acpNewFeature_title { text-align: center; font-size: 17px; margin-bottom: 0; margin-top: 20px; } .acpNewFeature_desc { text-align: center; font-size: 14px; margin-top: 10px; opacity: 0.8; max-height: 150px; overflow-y: auto; } .acpNewFeature_image { width: 340px; height: 150px; margin-inline-start: -20px; background: var(--i-background_4); border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); } .acpNewFeature_close { background: #111; color: #fff; font-family: 'arial', sans-serif; font-size: 19px; font-weight: 300; width: 30px; height: 30px; border-radius: 30px; line-height: 30px; display: block; position: absolute; top: -10px; inset-inline-end: -10px; text-align: center; z-index: 100; } .acpNewFeature_close:hover { color: #fff; } .acpNewFeature_arrow { font-size: 50px; color: #fff; position: absolute; top: 50%; margin-top: -30px; transition: 0.2s all ease-in-out; width: 60px; height: 60px; text-align: center; } .acpNewFeature_arrow:hover { color: #fff; } .acpNewFeature_prev { inset-inline-start: -60px; } .acpNewFeature_next { inset-inline-end: -60px; } /* PHONES */ @media screen and (max-width: 767px) { .acpNewFeature_arrow { top: auto; bottom: -70px; } .acpNewFeature_prev { inset-inline-start: 20%; } .acpNewFeature_next { inset-inline-end: 20%; } } /* Date picker */ /* .ipsApp .ui-datepicker-title select{ color: #222; } */ /* Data rows */ .ipsDataItem{ border-bottom-color: var(--i-background_3); } /* Hover cards */ /* USER HOVERCARDS */ .cUserHovercard { min-height: 200px; } .cUserHovercard .ipsPageHead_special { background-repeat: no-repeat; background-size: cover; background-position: bottom; height: 85px; width: 100%; background-color: var(--i-background_dark); } .cUserHovercard .ipsPageHead_special .ipsUserPhoto { position: absolute; top: 35px; inset-inline-start: 15px; } .cUserHovercard .ipsPageHead_special .ipsType_sectionHead, .cUserHovercard .ipsPageHead_special p { position: absolute; color: #fff; inset-inline-start: 110px; } .cUserHovercard .ipsPageHead_special p { top: 60px; } .cUserHovercard .ipsPageHead_special .ipsTitle { top: 28px; font-size: 24px; max-width: 325px; line-height: 36px; } .cUserHovercard .cUserHovercard_data { max-width: 330px; margin-inline-start: 105px; } .cUserHovercard .ipsRepBadge { width: 80px; position: absolute; top: 120px; text-align: center; inset-inline-start: 20px; } /* Overflow stuff */ .acpOverflow_hidden { overflow: hidden; } .acpOverflow_scroll { overflow: scroll; } .acpOverflow_hidden_x { overflow-x: hidden; } .acpOverflow_hidden_y { overflow-y: hidden; } .acpOverflow_scroll_x { overflow-x: scroll; } .acpOverflow_scroll_y { overflow-y: scroll; } /* Fix white corners on color pickers in the theme settings */ .sp-colorize-container{ border-radius: 4px; } /* Mobile ACP navigation menu */ /* DRAWERS */ .ipsModal.ipsDrawer_modal { background: color-mix(in srgb, var(--i-color_root) 30%, transparent); overflow: hidden !important; } .ipsDrawer { position: fixed; inset: 0; } .ipsDrawer_menu { position: absolute; top: 0; bottom: 0; width: 340px; max-width: calc(100% - 50px); background: var(--i-background_1); color: var(--i-color_root); box-shadow: 0px 0px 25px rgba(0,0,0,0.2); inset-inline-end: 0; } .ipsDrawer_content { position: absolute; inset: 0; overflow: auto; } .ipsDrawer_close { background: var(--i-background_1); width: 40px; height: 40px; border-radius: 40px; color: var(--i-color_hard) !important; text-align: center; font-size: 24px; display: block; position: absolute; top: 5px; z-index: 2000; inset-inline-end: 315px; } .ipsDrawer_menu .ipsDrawer_close { inset-inline-end: calc(100% + 5px); } .ipsDrawer_close > span { font-family: arial, sans-serif; line-height: 40px; } .ipsDrawer_list { width: 100%; position: relative; padding-bottom: 102px; /* Add extra padding at bottom to account for iOS issue and rank progress */ } .ipsDrawer_list > li > a:not( .ipsButton ), .ipsDrawer_list > li:not( .ipsDrawer_itemParent ) > a:not( .ipsButton ) { color: inherit; display: block; padding: .85em 1.5em; } .ipsDrawer_list > li > a:active { background: var(--i-background_3); } .ipsDrawer_itemParent > .ipsDrawer_list > li > a:not( .ipsButton ) { padding: .85em 1.5em; } .ipsDrawer_section { color: var(--i-color_root); font-size: var(--i-font-size_-2); font-weight: bold; padding: 1em 1.3em .3em; text-transform: uppercase; } .ipsDrawer_itemParent > h4 { font-weight: normal; color: var(--i-color_hard); padding: .85em 1.5em; position: relative; cursor: pointer; margin: 0; } .ipsDrawer_itemParent > .ipsDrawer_list > .ipsDrawer_itemParent > h4 { padding: .85em 1.5em; } .ipsDrawer_itemParent > h4::after { content: "\f105"; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; position: absolute; top: 50%; inset-inline-end: 1em; transform: translateY(-50%); } [dir="rtl"] .ipsDrawer_itemParent > h4::after { content: "\f104"; } .ipsDrawer_itemParent > h4 > a { color: inherit; display: block; } .ipsDrawer_list .ipsDrawer_list { position: absolute; top: 0; inset-inline-start: 100%; } .ipsDrawer_list [data-action="back"] a { position: relative; background: var(--i-background_2); color: var(--i-color_soft) !important; padding-inline-start: 1.5em; } [dir="ltr"] .ipsDrawer_list [data-action="back"] a::before { content: "\f104"; left: 1.5em; } [dir="rtl"] .ipsDrawer_list [data-action="back"] a::before { content: "\f105"; right: 1.5em; } .ipsDrawer_list [data-action="back"] a::before { font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; margin-inline-end: .5em; } .ipsDrawer_listTitle { background: var(--i-background_3); padding: 10px; color: var(--i-color_hard); margin-top: 10px; font-weight: bold; border-radius: 4px; } /* Remove borders from buttons for cleaner appearance */ .ipsDrawer_menu .ipsButton{ border-color: transparent; } .ipsDrawer_menu{ background: var(--i-background_1); color: var(--i-color_root); } .ipsDrawer_itemParent > h4{ color: var(--i-color_hard); } .ipsDrawer_list [data-action="back"] a{ background: var(--i-background_4); color: var(--i-color_hard) !important; } .ipsDrawer_list > li > a:active{ background: var(--i-background_5); } .ipsDrawer_listTitle{ background: var(--i-background_2); color: var(--i-color_hard); border-radius: 0; } /* Menus */ .ipsSideMenu_title{ color: var(--i-color_hard); } /* V5 ACP Layout */ .cAdminDevModeWarning { display: grid; place-content: center; position: fixed; bottom: 8px; inset-inline-start: 8px; width: 2.3em; height: 2.3em; background: #f4b738; font-size: 18px; color: #fff; z-index: 5010; transition: 0.2s background ease-in-out; border-radius: 5px; } .cAdminDevModeWarning:hover { color: #fff; background: #ce9929; cursor: help; } /* Columns */ #acpMainLayout{ display: flex; } :root{ --acp-nav--ba-co: #0e1d30; --acp-sub--ba-co: var(--i-background_1); } [data-ips-scheme="dark"]{ --acp-nav--ba-co: var(--i-background_1); --acp-sub--ba-co: var(--i-background_2); } #acpAppMenu{ --menu-width: 220px; --icon-width: 60px; background: var(--acp-nav--ba-co); position: sticky; top: 0; align-self: start; height: 100vh; flex: 0 0 calc(var(--menu-width) + var(--icon-width)); } #acpAppList{ overflow: auto; height: 100vh; overscroll-behavior: contain; } #acpAppList .ipsScrollbar::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.05); } #acpAppList:hover .ipsScrollbar::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); } #acpAppList .ipsScrollbar::-webkit-scrollbar-track-piece { background-color: transparent; } .acpAppList_icon { font-size: 20px; } .acpAppList__label{ display: none; } #acpAppList > li { width: var(--icon-width); } #acpAppList > li:not(#elReorderAppMenu, #elLogo) > a { display: flex; justify-content: center; align-items: center; height: var(--icon-width); color: rgba(255,255,255,0.7); position: relative; font-weight: 550; } #acpAppList > li.acpAppList_dragging .acpAppList__sub { display: none !important; } #acpAppList > li:not( #elReorderAppMenu ).acpAppList_active > a { color: #fff; background: rgba(255,255,255,0.05); } #acpAppList > li.acpAppList_active .acpAppList__sub { display: block; } .acpAppList__sub { color: var(--i-color_soft); background: var(--acp-sub--ba-co); border-inline-end: 1px solid var(--i-background_4); width: var(--menu-width); position: absolute; top: 0; bottom: 0; inset-inline-start: var(--icon-width); display: none; z-index: 3500; line-height: 1.8; } .acpAppList__sub > ul{ position: sticky; top: 0; max-height: 100vh; overflow: auto; overscroll-behavior: contain; } :where(.acpAppList__sub > ul) > li{ margin-bottom: 1em; padding: 0 1em; } .acpAppList_header { color: var(--i-color_hard); font-size: 17px; font-weight: 600; display: block; line-height: 61px; padding-inline-start: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .acpAppList__sub a { color: var(--i-color_soft); display: block; padding: .25em 1em; border-radius: 5px; } .acpAppList__sub a:hover{ color: var(--i-color_hard); background: var(--i-background_2); } :where([data-ips-scheme="dark"]) .acpAppList__sub a:hover{ background: var(--i-background_3); } .acpAppList__sub .acpAppListItem_active a{ color: var(--i-color_hard); background: var(--i-background_3); font-weight: 600; } :where([data-ips-scheme="dark"]) .acpAppList__sub .acpAppListItem_active a{ background: var(--i-background_4); } .acpAppList__sub h3 { color: var(--i-color_hard); padding: 1em; padding-bottom: 0; text-transform: uppercase; font-weight: bold; background: var(--acp-sub--ba-co); position: -webkit-sticky; position: sticky; top: 0; z-index: 1; } .acpAppList__sub > li { margin-bottom: 20px; } .acpAppList__sub .acpModuleMenu_active { font-weight: bold; } /* Wider menu on larger screens */ @media (min-width: 1900px){ #acpAppMenu{ --icon-width: 250px; --menu-width: 280px; } #elLogo{ justify-content: start; padding-inline-start: 2em; } .acpAppList_icon{ font-size: 1.2em; flex: 0 0 1.4em; text-align: center; margin-inline-end: .6em; } #acpAppList > li:not(#elReorderAppMenu, #elLogo) > a{ height: auto; padding: 1em; justify-content: start; margin: 0 1em; border-radius: 5px; } .acpAppList__label{ display: block; } .acpAppList_header{ display: none; } #acpAppList .ipsNotification { position: static; margin-inline-start: auto; } } /* Reorder navigation */ #elReorderAppMenu { position: fixed; bottom: 0; z-index: 5000; text-align: center; display: grid; max-width: 60px; } .cAdminDevModeOn #elReorderAppMenu { bottom: 60px; } :where(#elReorderAppMenu) a { color: #fff; opacity: 0.75; padding: 1em; display: block; } #acpAppList #elReorderAppMenu a[data-action="reorder"]:hover, #acpAppList #elReorderAppMenu a[data-action="saveOrder"] { opacity: 1; color: #fff; } #acpAppList #elReorderAppMenu a[data-action="saveOrder"] { margin: 1em; } #acpAppList > li > a > span[data-role="reorder"] { position: absolute; top: calc(50% - 9px); inset-inline-end: 5px; z-index: 3; } .acpAppList__sub > li span[data-role="reorder"] { display: inline-block; width: 18px; height: 18px; line-height: 18px; font-size: 10px; margin-inline-end: 5px; } [data-role="reorder"] { background: #f5f5f5; color: #000; font-size: 11px; width: 22px; height: 22px; line-height: 22px; border-radius: 22px; text-align: center; display: block; cursor: move; } /* Hide the reorder icon for the logo since it can't be repositioned !important is needed to overwrite inline style tag */ #acpAppList #elLogo [data-role="reorder"]{ display: none !important; } #acpMainArea{ flex: 1 1 100%; } /* Header */ #ipsLayout_header { background: var(--i-background_1); color: var(--i-color_hard); display: flex; align-items: center; position: sticky; top: 0; z-index: 3000; height: 61px; padding: 0 10px; box-shadow: hsl(0 0% 0% / .1) 0px 1px 0px 0px; } /* Mobile */ @media (max-width: 979px){ #acpAppMenu{ display: none; } }]]> *{ overflow: auto; } .cAcpSearch_areas { padding: 6px; } .cAcpSearch_areas a{ border-radius: 4px; } .cAcpSearch_results [data-role="result"]:not([class]) a, .cAcpSearch_results [data-role="result"][class=""] a{ display: block; padding: .7em 1em; border-radius: 5px; color: var(--i-color_hard); } .cAcpSearch_results [data-role="result"]:not([class]) a:hover, .cAcpSearch_results [data-role="result"][class=""] a:hover{ background: var(--i-background_2); } #acpLiveSearchResults [data-role="searchMenu"] { background: var(--i-background_2); border-inline-end: 1px solid var(--i-background_4); border-start-start-radius: 5px; border-end-start-radius: 5px; } #acpLiveSearchResults::before { content: ''; display: block; border-width: 7px; border-style: solid; border-color: transparent; border-bottom-color: var(--i-background_2); position: absolute; top: -14px; inset-inline-start: 23px; width: 0; height: 0; pointer-events: none; } #acpLiveSearchResults [data-resultsSection], #acpLiveSearchResults [data-role="searchResults"] { overflow: auto; height: 100%; } #acpLiveSearchResults .ipsPadding_top { padding-top: 2px; } .cAcpSearch_areas .ipsSideMenu_item:not(.ipsSideMenu_itemActive) .ipsSideMenu_itemCount{ background: var(--i-background_4); color: inherit; }]]> .ipsPieBar__legendItem { display: inline-flex; align-items: center; } .ipsPieBar__barSegment:nth-child(10n-9), .ipsPieBar__legendItem:nth-child(10n-9) > .ipsPieBar__legendItemKey { background: #10967e; } .ipsPieBar__barSegment:nth-child(10n-8), .ipsPieBar__legendItem:nth-child(10n-8) > .ipsPieBar__legendItemKey { background: #ea7963; } .ipsPieBar__barSegment:nth-child(10n-7), .ipsPieBar__legendItem:nth-child(10n-7) > .ipsPieBar__legendItemKey { background: #de6470; } .ipsPieBar__barSegment:nth-child(10n-6), .ipsPieBar__legendItem:nth-child(10n-6) > .ipsPieBar__legendItemKey { background: #6b9dde; } .ipsPieBar__barSegment:nth-child(10n-5), .ipsPieBar__legendItem:nth-child(10n-5) > .ipsPieBar__legendItemKey { background: #b09be4; } .ipsPieBar__barSegment:nth-child(10n-4), .ipsPieBar__legendItem:nth-child(10n-4) > .ipsPieBar__legendItemKey { background: #eec766; } .ipsPieBar__barSegment:nth-child(10n-3), .ipsPieBar__legendItem:nth-child(10n-3) > .ipsPieBar__legendItemKey { background: #9fc973; } .ipsPieBar__barSegment:nth-child(10n-2), .ipsPieBar__legendItem:nth-child(10n-2) > .ipsPieBar__legendItemKey { background: #e291bf; } .ipsPieBar__barSegment:nth-child(10n-1), .ipsPieBar__legendItem:nth-child(10n-1) > .ipsPieBar__legendItemKey { background: #55c1a6; } .ipsPieBar__barSegment:nth-child(10n), .ipsPieBar__legendItem:nth-child(10n) > .ipsPieBar__legendItemKey { background: #5fb9da; } .ipsPieBar__legend { text-align: start; margin-top: 10px; } .ipsPieBar__legendItemKey { display: inline-block; width: 14px; height: 14px; margin-inline-end: 4px; border-radius: 5px; } /* Loading */ .icon-spinner2:before, .ipsLoading:before{ border-color: var(--i-background_3); border-top-color: var(--i-color_root); } /* Stats bar */ .acpStatsBar { height: 38px; background: #ddd; overflow: hidden; white-space: nowrap; display: flex; border-radius: 5px; position: relative; } .acpStatsBar::after{ content: ''; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--i-color_hard) 15%, transparent); border-radius: inherit; pointer-events: none; } .acpStatsBar_segment, .acpStatsBar_subsegment { height: 38px; } .acpStatsBar_subsegment { background: rgba(0,0,0,0.2); } .ipsList--inline > .acpStatsBar_legend{ display: inline-flex; align-items: center; } .acpStatsBar_segment:nth-child(10n-9), .acpStatsBar_legend:nth-child(10n-9) > .acpStatsBar_preview { background: #10967e; } .acpStatsBar_segment:nth-child(10n-8), .acpStatsBar_legend:nth-child(10n-8) > .acpStatsBar_preview { background: #ea7963; } .acpStatsBar_segment:nth-child(10n-7), .acpStatsBar_legend:nth-child(10n-7) > .acpStatsBar_preview { background: #de6470; } .acpStatsBar_segment:nth-child(10n-6), .acpStatsBar_legend:nth-child(10n-6) > .acpStatsBar_preview { background: #6b9dde; } .acpStatsBar_segment:nth-child(10n-5), .acpStatsBar_legend:nth-child(10n-5) > .acpStatsBar_preview { background: #b09be4; } .acpStatsBar_segment:nth-child(10n-4), .acpStatsBar_legend:nth-child(10n-4) > .acpStatsBar_preview { background: #eec766; } .acpStatsBar_segment:nth-child(10n-3), .acpStatsBar_legend:nth-child(10n-3) > .acpStatsBar_preview { background: #9fc973; } .acpStatsBar_segment:nth-child(10n-2), .acpStatsBar_legend:nth-child(10n-2) > .acpStatsBar_preview { background: #e291bf; } .acpStatsBar_segment:nth-child(10n-1), .acpStatsBar_legend:nth-child(10n-1) > .acpStatsBar_preview { background: #55c1a6; } .acpStatsBar_segment:nth-child(10n), .acpStatsBar_legend:nth-child(10n) > .acpStatsBar_preview { background: #5fb9da; } .acpStatsBar_preview { display: inline-block; width: 14px; height: 14px; margin-inline-end: 4px; border-radius: 5px; } /* Widget layout options in the Developer Center */ #form_dev_widget_layouts .ipsFieldList { display: flex; flex-direction: row; gap: 20px; flex-wrap: wrap; justify-content: stretch; } #form_dev_widget_layouts .cBuilderSvg { --i-svg--st-wi: 4; --i-svg--co: var(--i-background_6); --i-svg--st: color-mix(in srgb, var(--i-color_root) 90%, var(--i-background_6)); color: var(--i-svg--co); } #form_dev_widget_layouts .cBuilderSvg [data-role="outerborder"] { stroke: var(--i-svg--st); } #form_dev_widget_layouts .cBuilderSvg [data-role="background"] { fill: var(--i-background_2); }]]> span:first-child{cursor:pointer}.sp-initial-disabled .sp-input-container{width:100%}.sp-input{padding:0 5px!important;margin:0;width:100%;box-shadow:none!important;height:100%!important;background:0 0;color:#3a3a3a;border-radius:2px!important;border:1px solid #e0e0e0!important;text-align:center;font-family:monospace;font-size:inherit!important}.sp-input:focus{border:1px solid orange}.sp-input.sp-validation-error{border:1px solid red;background:#fdd}.sp-palette-container,.sp-picker-container{position:relative;padding:10px}.sp-picker-container{width:200px;padding-bottom:0}.sp-palette-container{border-right:solid 1px #ccc}.sp-palette-only .sp-palette-container{border:0}.sp-palette .sp-thumb-el{display:block;position:relative;float:left;width:24px;height:15px;margin:3px;cursor:pointer;border:solid 2px transparent}.sp-palette .sp-thumb-el.sp-thumb-active,.sp-palette .sp-thumb-el:hover{border-color:orange}.sp-thumb-el{position:relative}.sp-initial{float:left}.sp-initial span{width:30px;height:25px;border:none;display:block;float:left;margin:0}.sp-initial .spe-thumb-el.sp-thumb-active{border-radius:0 5px 5px 0}.sp-initial .spe-thumb-el{border-radius:5px 0 0 5px}.sp-initial .sp-clear-display{background-position:center}.sp-button-container{float:right}.sp-palette-button-container{margin-top:10px}.sp-replacer{position:relative;overflow:hidden;cursor:pointer;display:inline-block;border-radius:3px;border:1px solid #aaa;color:#666;transition:border-color .3s;vertical-align:middle;width:3rem;height:1.5rem}.sp-replacer.sp-active,.sp-replacer:hover{border:1px solid #666;color:#000}.sp-replacer.sp-disabled{cursor:default;border-color:silver;color:silver}.sp-dd{position:absolute;font-size:10px;right:0;top:0;bottom:0;padding:0 2px;line-height:1.6rem;background-color:#fff}.sp-preview{position:relative;width:100%;height:100%;float:left;z-index:0}.sp-preview-inner{transition:background-color .2s}.sp-preview-inner.sp-clear-display{display:none}.sp-palette .sp-thumb-el{width:16px;height:16px;margin:3px;border:none;border-radius:3px}.sp-container button{border-radius:3px;border:none;background:0 0;line-height:1;padding:0 8px;height:25px;text-transform:capitalize;text-align:center;vertical-align:middle;cursor:pointer;color:#606c72;font-weight:700}.sp-container button.sp-choose{background-color:#3cab3b;color:#fff;margin-left:5px}.sp-container button:hover{opacity:.8}.sp-container button.sp-palette-toggle{width:100%;background-color:#f3f3f3;margin:0}.sp-palette span.sp-thumb-active,.sp-palette span:hover{border-color:#000}.sp-alpha,.sp-preview,.sp-thumb-el{position:relative;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='%23ccc' fill-opacity='1'%3E%3Crect x='0' y='0' width='6' height='6' /%3E%3Crect x='6' y='6' width='6' height='6' /%3E%3C/svg%3E")}.sp-alpha-inner,.sp-preview-inner,.sp-thumb-inner{display:block;position:absolute;top:0;left:0;bottom:0;right:0}.sp-palette .sp-thumb-inner{border-radius:3px;background-position:50% 50%;background-repeat:no-repeat}.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath d='M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z' fill='%23000'%3E%3C/path%3E%3C/svg%3E")}.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath d='M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E")}.sp-clear-display{background-repeat:no-repeat;background-position:center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABe0lEQVQokYXSsUtcQRTF4d8Jj+VhHSxkEQuLsEUKK0nhTBFTmLSSUhBCMCAWsmgIwWrBLk0akfwLCaSQKBJmtrIIISwpRFKIhViETScphGMzysMtvOVwvpm5d0bGNCuGWAOPgYdl6S8wSDn9b+bUhDHEKWAdeAFMANg+l/TV9ofcz6cjMIbYBvaBMds7QCqZ58CmpBNgPuV0DvAAIMyFGugWtJr7eTv38xEwkPRPErY7QDeG2LqFkjrAgu0dSd/KDVqSNmxvAZ8lfbS9AHRuYemnLWkv5XRVBrQMbAI/gTXgEzAJtJuwBVS2L2OIle03QA/4Lmkl5XQBXEqqbFcAVYFDYChpFngiqWf7l6TXKaezMt2Zkhk24THwG+jZriX9AFZvUAyxLbRke2D75O5zPAO+ADXwEtizjaRHwDvbTyUtppwOmicCHAJvbXcl9YA1SQDjtseA97YPRz7ATcUQp2y/kjRdevsjaTfldNrMjcDGBjXA3T96L7yvrgFzP69+0Ao/HAAAAABJRU5ErkJggg==);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath d='M12 20.016q3.281 0 5.648-2.367t2.367-5.648q0-2.672-1.734-4.922l-11.203 11.203q2.25 1.734 4.922 1.734zM3.984 12q0 2.672 1.734 4.922l11.203-11.203q-2.25-1.734-4.922-1.734-3.281 0-5.648 2.367t-2.367 5.648zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z' fill='%23000'%3E%3C/path%3E%3C/svg%3E")}]]> .cSupportQuery { border: 0 !important; white-space: pre-wrap; } Media */ .ipsTreeList a { color: inherit; padding: .5em 0; display: block; position: relative; } .ipsTreeList li a { padding-inline-start: 1em; } .ipsTreeList li li a { padding-inline-start: 2em; } .ipsTreeList li li li a { padding-inline-start: 3em; } .ipsTreeList li li li li a { padding-inline-start: 4em; } .ipsTreeList_inactiveBranch > ul { display: none; } .ipsTreeList_inactiveBranch > a::before, .ipsTreeList_activeBranch > a::before { content: '\f0da'; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; margin-inline-end: .5em; } .ipsTreeList_activeBranch > a::before { content: '\f0d7'; } .ipsTreeList_activeNode > a { background: var(--i-primary); color: var(--i-primary-contrast); }]]> .ipsTree_rows { padding-inline-start: 1em; } .ipsTree_loadingRow { padding: 10px; padding-inline-start: 40px; } .ipsTree_loadingRow::before { inset-inline-start: 20px; } /* Drag */ .ipsTree_drag{ flex: 0 0 auto; } .ipsTree_dragHandle { cursor: move; display: block; text-align: center; min-width: 30px; } .ipsTree_dragHandle:not(:hover){ opacity: .2; } /* Align data */ .ipsTree_align{ flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: inherit; } .ipsTree_rowData { flex: 999 1 50%; position: relative; font-weight: 500; color: var(--i-color_hard); } .ipsTree__icon{ color: var(--i-color_soft); text-align: center; width: 1.25em; } .ipsTree__icon:where(:not(:has(.ipsFlag, .ipsIcon--emoji))){ opacity: .5; } .ipsTree__thumb { width: 24px; vertical-align: middle; margin-inline-end: .6em; } /* Larger icons if it's the first child, eg. Ranks */ .ipsTree_row > .ipsTree__thumb:first-child{ width: 64px; } /* Titles */ .ipsTree_title{ font-weight: 500; color: var(--i-color_hard); font-size: 1.08em; } .ipsTree_title a { color: inherit; } .ipsTree_title strong{ font-weight: inherit; } /* Fix alignment of "Enabled"/"Disabled" badge */ .ipsTree_toggleEnable, .ipsTree_toggleDisable{ display: flex; } /* Stack styles */ .ipsTree_parent:not(.ipsTree_noToggle) { cursor: pointer; } /* Expand arrow */ .ipsTree_align::before { font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; font-size: 11px; opacity: .5; transition: .2s all linear; align-self: center; width: 1em; } :where([dir="rtl"]) .ipsTree_parent .ipsTree_align::before { transform: rotate(180deg); } .ipsTree_open .ipsTree_align::before { transform: rotate(90deg); opacity: 1; } /* Show arrow */ .ipsTree_parent:not(.ipsTree_noToggle) .ipsTree_align::before { content: '\f054' !important; } /* Indent all sibling trees of .ipsTree_parent */ .ipsTree:has(> li > .ipsTree_parent:not(.ipsTree_noToggle)) > li > .ipsTree_row > .ipsTree_align::before{ content: ''; } /* Remove pointer-events from expandable tree categories. This prevents new pages from opening when trees should instead expand */ .ipsTree_parent > .ipsTree_align > .ipsTree_rowData > .ipsTree_title a{ pointer-events: none; } /* Nested sortable classes */ .mjs-nestedSortable-error { border: 1px solid #e85959 !important; background: #f3d9d9 !important; min-height: 48px !important; position: relative; } .mjs-nestedSortable-error:before, .mjs-nestedSortable-error:after { display: block; position: absolute; line-height: 48px; font-size: 11px; color: #e85959; } .mjs-nestedSortable-error:before { content: attr(data-error); inset-inline-start: 30px; } .mjs-nestedSortable-error:after { content: '\f071'; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; inset-inline-start: 10px; } .sortable-placeholder { border: 1px solid var(--i-primary); background: var(--i-background_selected); min-height: 68px; } .ipsTree_row .ipsTree_row_cells { font-weight: 500; display: flex; flex-wrap: wrap; gap: .5em 2em; color: var(--i-color_soft); } :where(.ipsTree_row .ipsTree_row_cells) a{ color: inherit; } .ipsTree_controls{ align-self: center; } @media (max-width: 500px){ .ipsTree .ipsTree_controls{ flex: 1 1 100%; } }]]> span::selection, [data-ips-scheme="dark"] .ipsApp .CodeMirror-line > span > span::selection { background: rgba(255,255,255,0.25); } [data-ips-scheme="dark"] .ipsApp .CodeMirror-line::-moz-selection, [data-ips-scheme="dark"] .ipsApp .CodeMirror-line > span::-moz-selection, [data-ips-scheme="dark"] .ipsApp .CodeMirror-line > span > span::-moz-selection { background: rgba(255,255,255,0.25); } [data-ips-scheme="dark"] .pln{ color: #fff } @media screen{ [data-ips-scheme="dark"] .str{ color:#f9e1a8 } [data-ips-scheme="dark"] .kwd{ color:#ffa1a1 } [data-ips-scheme="dark"] .com{ color:#fdc389 } [data-ips-scheme="dark"] .typ{ color:#aeecd5 } [data-ips-scheme="dark"] .lit{ color:#a9a9ff } [data-ips-scheme="dark"] .pun, [data-ips-scheme="dark"] .opn, [data-ips-scheme="dark"] .clo{ color:#f9d88a } [data-ips-scheme="dark"] .tag{ color:#a0dd96 } [data-ips-scheme="dark"] .atn{ color:#d56262 } [data-ips-scheme="dark"] .atv{ color:#a0dd96 } [data-ips-scheme="dark"] .dec, [data-ips-scheme="dark"] .var{ color:#d56262 } [data-ips-scheme="dark"] .fun{ color: #ffa1a1 } } [data-ips-scheme="dark"] li.L1, [data-ips-scheme="dark"] li.L3, [data-ips-scheme="dark"] li.L5, [data-ips-scheme="dark"] li.L7, [data-ips-scheme="dark"] li.L9{ background: var(--i-background_2); } [data-ips-scheme="dark"] code [style*="color: #000000"]{ color: #fff !important; } [data-ips-scheme="dark"] code [style*="color: #0000BB"]{ color: #a9a9ff !important; } [data-ips-scheme="dark"] code [style*="color: #007700"]{ color: #a0dd96 !important; } [data-ips-scheme="dark"] code [style*="color: #DD0000"]{ color: #d67979 !important; } [data-ips-scheme="dark"] .CodeMirror-cursor{ border-color: #fff; } /* Export diff template names */ .acpBlock_title{ font-size: 18px; font-weight: bold; color: var(--i-color_hard); padding: 1em; }]]> *{ grid-column: 1/-1; } @media (min-width: 890px){ .ipsForm--admin-template:where(:not(.ipsForm--horizontal, .ipsForm--vertical)) > .ipsFieldRow{ grid-template-columns: max(14em, 22%) 1fr; } .ipsForm--admin-template:not(.ipsForm--horizontal, .ipsForm--vertical) .ipsFieldRow__required{ flex: 1 1 100%; } .ipsForm--admin-template:where(:not(.ipsForm--horizontal, .ipsForm--vertical)) > .ipsFieldRow > .ipsFieldRow__label{ text-align: end; align-self: baseline; } .ipsForm--admin-template:not(.ipsForm--horizontal, .ipsForm--vertical) .ipsFieldRow__label{ display: grid; place-items: end; } } /* Increase gaps in forms */ .ipsFieldRow{ column-gap: 1.5em; padding: 1.5em; } /* Matrix rows: These should occpuy the full form width, since they don't have a label */ .ipsFieldRow--matrix{ display: block; padding: 0; } /* Reduce size of labels in ACP */ .ipsFieldRow__label{ font-size: inherit; } /* Make some labels bolder */ .ipsFieldList label{ font-weight: 500; color: var(--i-color_hard); } /* Descriptions under radio labels, Eg: ACP > Editor > Settings */ .ipsFieldList__content .ipsFieldRow__desc{ margin-top: 0; } /* Add a max-width to inputs */ .ipsFieldRow__content :where(input, select){ max-width: min(35em, 100%); } .ipsFieldRow__content :where(select, [type="date"]){ width: auto; } .ipsFieldRow__content :where([type="number"]){ max-width: 8em; } /* Space out filters (Eg. Statistics > Member Visits) */ .ipsForm__filtering{ padding: 1em; } .ipsForm__filtering :is(input, button){ margin: 0 .4em; } /* Remove border from "spectrum" color picker to prevent the checkered background issue */ .sp-original-input-container input{ border-width: 0; } /* Social icons */ #form_site_social_profiles .ipsField_stack{ max-width: 550px; } #form_site_social_profiles .ipsFieldRow__content :where(input, select){ max-width: none; } #form_site_social_profiles [data-ipsstack-keyvalue-name="key"]{ flex: 1 1 auto; } /* Remove radius of update notifications */ html .cAcpNotificationBanner{ border-radius: 0;; } /* Add padding to buttons when they're inside tabbed content */ .ipsTabs__panel .ipsButtons--admin{ padding: 1em; } .ipsButtons--admin:has( + .ipsBox){ margin-bottom: 1.5em; } /* Always enable .ipsLinkPanel in ACP */ .ipsLinkPanel ~ *:not(:is(a, button, input, textarea, [data-ipsTooltip])){ pointer-events: none; } .ipsLinkPanel ~ * :is(a, button, input, textarea, [data-ipsTooltip]){ pointer-events: auto; } .ipsLinkPanel ~ * a:hover{ text-decoration: underline; } /* Better alignment of user photos in admin panel tables (ie. Clubs) */ .ipsTable .ipsUserPhoto{ vertical-align: middle; } .ipsTable .ipsUserPhoto:has( ~ a){ margin-inline-end: .5em; } /* Larger button on ACP login page */ .ipsForm--admin-login-form .ipsButton{ padding: 1.1em; }]]> /** * This file is for your custom CSS. * This file is not modified or overwritten during upgrades */ #emoticonsManagement li [data-role="dragHandle"] { cursor: move; } .cEmoticons_box { height: 100%; background: var(--i-background_1); border-radius: 6px; box-shadow: color-mix(in srgb, var(--i-color_root) 10%, transparent) 0px 0px 0px 1px; } .cEmoticons_box [data-delete] { background: #222; width: 18px; height: 18px; line-height: 18px; color: #fff; position: absolute; top: 5px; inset-inline-end: 5px; border-radius: 30px; } #emoticonsManagement img { max-height: 100px; } .cEmoticons_input{ display: flex; align-items: center; padding: .5em .7em; font-size: .9em; } .cEmoticons_hd{ flex: 0 0 auto; } .cTranslateTable .ipsTable_wrap { max-width: 220px; } .cTranslateTable_field { position: relative; } .cTranslateTable_field a[data-action] { display: none; position: absolute; bottom: 10px; z-index: 4000; line-height: 20px; } .cTranslateTable_field_focus textarea ~ a[data-action] { display: block; } .cTranslateTable_field a[data-action="saveWords"] { inset-inline-end: 10px; } .cTranslateTable_field a[data-action="revertWords"] { inset-inline-end: 65px; } .cTranslateTable textarea { height: 100%; min-height: 50px; min-width: 150px; field-sizing: content; } *){ flex: 0 0 auto; } #acpContent{ flex: 1 1 100%; } [data-controller="core.admin.customization.media"]{ container-type: inline-size; flex: 1 0 auto; min-height: 60vh; min-height: 60svh; } .cMedia_manager{ display: grid; min-height: 100%; } .cMedia_manager__side{ background-color: var(--i-background_1); border: 0px solid var(--i-background_4); border-inline-end-width: 1px; border-start-start-radius: inherit; border-end-start-radius: inherit; } #elMedia_sidebar{ position: -webkit-sticky; position: sticky; top: var(--i-sticky-offset); padding: 1.8em; } .ipsTitle[data-role="itemFilename"]{ margin-bottom: 1.5em; } .cMedia_manager__fileInfo{ display: grid; gap: 2em; margin: 2em 0; } .cMedia_manager__main{ background-color: var(--i-background_2); container-type: inline-size; border-start-end-radius: inherit; border-end-end-radius: inherit; } .cMedia__managerToolbar { background: var(--i-background_1); border-bottom: 1px solid var(--i-background_4); position: sticky; top: var(--i-sticky-offset); z-index: 1; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; border-start-end-radius: inherit; } #elMedia_searchField { flex: 999 1 300px; } .cMedia_manager__items{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); padding: 1em; gap: 1em; } .cMedia_item { background: var(--i-background_1); border: 1px solid var(--i-background_4); border-radius: 8px; padding: .5em; cursor: pointer; text-align: center; } .cMedia_item:where(:hover){ border-color: var(--i-background_5); } .cMedia_itemSelected { border-color: var(--i-primary); background: var(--i-primary); color: var(--i-primary-contrast); } .cMedia_itemDisabled, .cMedia_treeDisabled { opacity: .3; pointer-events: none; } .cMedia_item .ipsThumb img{ object-fit: contain; } /* Icons for different file types (text, font, other) */ .cMedia_manager [data-filetype="text"] .ipsThumb i::before{ content: "\f1c9"; } .cMedia_manager [data-filetype="font"] .ipsThumb i::before{ content: "\f031"; } .cMedia_manager [data-filetype="other"] .ipsThumb i::before{ content: "\f49e"; } .cMedia_content{ padding-top: 1em; padding-bottom: .5em; } .cMedia_filename { font-weight: 500; } .cMedia_item:not(.cMedia_itemSelected) .cMedia_filename { color: var(--i-color_hard); } /* ---------------- - Large devices ---------------- */ /* Side column */ @container (min-width: 650px){ .cMedia_manager{ grid-template-columns: clamp(300px, 20%, 380px) 1fr; } } /* ---------------- - Small devices ---------------- */ /* Side column */ @container (max-width: 649px){ .cMedia_manager{ grid-template-rows: 1fr auto; } .cMedia_manager__side{ order: 1; position: sticky; z-index: 1; bottom: 0; border-width: 1px 0 0 0; transition: .5s; background: color-mix(in srgb, var(--i-background_1) 50%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* Hide file info bar if no resource is selected */ .cMedia_manager:not(:has(.cMedia_itemSelected)) .cMedia_manager__side{ display: none; } #elMedia_sidebar{ padding: 1em; } .ipsTitle[data-role="itemFilename"]{ margin-bottom: .5em; } .cMedia_manager__fileInfo{ display: none; } .cMedia__managerToolbar{ position: static; } } /* File grid */ @container (max-width: 570px){ .cMedia_manager__items{ grid-template-columns: 1fr; } .cMedia_item { display: grid; grid-template-columns: 50px 1fr; gap: 15px; text-align: start; } }]]> .ipsColumns > .ipsColumn_wide { border-inline-end: 4px solid var(--i-background_2); } .cTemplateControls { height: 66px; padding-top: 15px; } .cTemplateControls .ipsButton.ipsButton--disabled { opacity: 0.2; } #elTemplateEditor_fileListControls { padding-left: 15px; padding-right: 15px; } #elTemplateEditor_fileListControls > div:first-child { display: flex; } #elTemplateEditor_fileListControls > div:first-child input[type="text"] { flex-grow: 1; padding: 0 7px; /* border: 0; */ border-right-width: 0px; line-height: 34px; border-start-start-radius: 3px; border-end-start-radius: 3px; box-shadow: none; } #elTemplateEditor_panelToolbar { padding-inline-end: 15px; } #elTemplateEditor > .ipsColumns > .ipsColumn { padding: 0; } #elTemplateEditor_info { position: fixed; bottom: 0; inset-inline-start: 270px; inset-inline-end: 0; background: var(--i-background_1); text-align: center; padding: 7px; border-top: 1px solid rgba(0,0,0,0.2); border-color: var(--i-background_3); } #elTemplateEditor .ipsTabs { padding: 0; } #elTemplateEditor .ipsTabs__tab { text-overflow: clip !important; margin-inline-end: 0; color: inherit; border-radius: 0; } #elTemplateEditor .ipsTabs__tab.ipsTabs__tab--active { background: var(--i-background_1); font-weight: bold; } #elTemplateEditor [data-role="editor"], #elTemplateEditor .CodeMirror { border-width: 0px !important; border-radius: 0px !important; padding-bottom: 10px; } #elTemplateEditor [data-role="editor"] { font-family: monospace; font-size: 13px; } #elTemplateEditor [data-role="templateToolbar"] { margin-bottom: 15px; } #elTemplateEditor_panelWrap { position: absolute; inset: 0; } #elTemplateEditor_outerPanelWrap { position: relative; } #elTemplateEditor [data-role="templatePanelWrap"] { width: 100%; background-color: var(--i-background_1); position: absolute; top: 49px; left: 0; right: 0; bottom: 0; } #elTemplateEditor [data-role="templatePanelWrap"] textarea { height: 550px; } #elTemplateEditor [data-action="closeTab"] { font-size: 12px; color: var(--i-color_soft); margin-inline-start: 3px; } #elTemplateEditor [data-action="closeTab"]:hover, #elTemplateEditor [data-state="unsaved"] [data-action="closeTab"] { color: var(--i-color_hard); } #elTemplateEditor input[data-role="templateSearch"] { background-clip: padding-box; width: 75%; max-width: 350px; padding: 7px; } #elTemplateFilterMenu { line-height: 34px; border-start-end-radius: 3px; border-end-end-radius: 3px; } /* FILE LISTING STYLES */ #elTemplateEditor_fileList { height: 550px; overflow: auto; } .cTemplateList a { padding: 5px 0; display: block; position: relative; color: var(--i-color_root); } .cTemplateList li.cTemplateList_inactiveBranch > a::before, .cTemplateList li.cTemplateList_activeBranch > a::before { font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; display: inline-block; line-height: 6px; font-size: 14px; } .cTemplateList li.cTemplateList_inactiveBranch > a::before, .cTemplateList li.cTemplateList_activeBranch > a::before { content: '\f0da'; margin-inline-end: 7px; } [dir="rtl"] .cTemplateList li.cTemplateList_inactiveBranch > a::before, [dir="rtl"] .cTemplateList li.cTemplateList_activeBranch > a::before { content: '\f0d9'; } [dir="ltr"] .cTemplateList li.cTemplateList_activeBranch > a::before, [dir="rtl"] .cTemplateList li.cTemplateList_activeBranch > a::before { content: '\f0d7'; } .cTemplateList li.cTemplateList_inactiveBranch > ul { display: none; } .cTemplateList_highlight { background: var(--i-background_2); } .cTemplateList li a { padding-inline-start: 15px; } .cTemplateList li li a { padding-inline-start: 30px; } .cTemplateList li li li a { padding-inline-start: 45px; } .cTemplateList li li li li a { padding-inline-start: 70px; } .cTemplateList li.cTemplateList_activeNode > a { background: var(--i-primary); color: #fff; } .cTemplateList li:not( .cTemplateList_activeNode ) > a:hover { background: var(--i-background_3); } /* INHERITED VALUES */ a[data-inherited-value]:after { position: absolute; margin-top: 2px; inset-inline-end: 5px; } li[class^="cTemplateState_"]:before { display: inline-block; color: #fff !important; } a[data-inherited-value]:after, li[class^="cTemplateState_"]:before { font-size: 9px; font-weight: bold; text-transform: uppercase; font-family: monospace; padding: 0 5px; color: #b3b3b3; line-height: 14px; border-radius: 10px; opacity: 0.1; transition: 0.4s all linear; } a[data-inherited-value="original"]:after { display: none; } .cTemplateList:hover a[data-inherited-value]:after, li[class^="cTemplateState_"]:before { opacity: 1; } .cTemplateList a[data-inherited-value="custom"]:after, .cTemplateState_custom:before { content: 'C'; background: #c9c030; color: #fff; } .cTemplateList a[data-inherited-value="inherit"]:after, .cTemplateState_inherit:before { content: 'I'; background: #83b256; color: #fff; } .cTemplateList a[data-inherited-value="changed"]:after, .cTemplateState_changed:before { content: 'M'; background: #eb841d; color: #fff; } .cTemplateList a[data-inherited-value="outofdate"]:after, .cTemplateState_outofdate:before { content: 'M'; background: #c93054; color: #fff; } .cTemplateMergeHeaders { border: 1px solid var(--i-background_4); border-bottom: 0; } .cTemplateMergeHeader { width: 47%; display: inline-block; } .cTemplateMergeHeader_spacer { width: 6%; display: inline-block; }]]> .ipsCms_theme_image_preview { max-height: 100px; max-width: 100px; } .ipsThemeKey { border-bottom: 1px dotted black; } :is( #ipsTabs_tabs_form_form_tab_theme_designer_form_css_panel, #ipsTabs_tabs_form_form_tab_theme_designer_form_js_panel ) .ipsFieldRow__label { display: none; } [data-vle]:hover { background: #eeebd6; cursor: pointer; } .cOnboardBox { padding: clamp(1em, 5vw, 3em); max-width: 900px; margin: 70px auto 0; border-top: 10px solid var(--i-primary); } .cOnboardBox .ipsHr { margin: 35px 0; } .cOnboardBox__text { font-size: 16px; line-height: 1.4; } .cOnboardBox__text strong{ color: var(--i-color_hard); } .cOnboardBox__stepTitle { line-height: 1.2; } .cOnboardBox__stepIcon { font-size: 30px; opacity: 0.5; width: 40px; } .cOnboard__sectionTitle { font-weight: 600; cursor: pointer; font-size: 18px; color: var(--i-color_hard); border-bottom: 1px solid var(--i-background_4); } .cOnboard__sectionTitle i { font-size: 20px; transition: 0.2s all ease-in-out; } .cOnboard__infoTitle { color: var(--i-color_hard); font-size: 1.3em; font-weight: 600; margin-bottom: .4em; } .cOnboard__section--closed.cOnboard__section--done i { transform: rotate(0); opacity: 0.6; } .cOnboard__section--closed.cOnboard__section--done i::before { content: '\f05d'; } .cOnboard__section--closed :is(.cOnboard__sectionContents, .cOnboard__sectionButtons){ display: none; } .cOnboard__section--closed .cOnboard__sectionIcon { transform: rotate(-90deg); } /* ---------------- - Reset styles ---------------- */ /* Remove margin and padding from all elements */ *{ margin: 0; padding: 0; } *, ::before, ::after { box-sizing: border-box; min-width: 0; min-height: 0; } html{ -webkit-text-size-adjust: 100%; accent-color: var(--i-primary); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } hr{ color: inherit; } hr, iframe, fieldset{ border-width: 0; } iframe:where([src*="youtube."], [src*="youtube-nocookie."], [src*="vimeo."]){ width: 100%; height: auto; aspect-ratio: 16/9; } img, svg{ border: 0; display: inline-block; max-width: 100%; height: auto; vertical-align: top; } /* Prevent alt text from overflowing image if URL fails to load */ :where(img::before){ display: block; overflow: hidden; height: 100%; } h1, h2, h3, h4, h5, h6{ font-size: inherit; font-weight: inherit; } b, strong { font-weight: bolder; } menu, ol, ul, summary{ list-style-type: none; } blockquote, q { quotes: none; } table { border-collapse: collapse; border-spacing: 0; } input, textarea, select, button{ background: none; border: 0; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; text-align: inherit; text-transform: inherit; } textarea, select{ -webkit-appearance: none; appearance: none; box-shadow: none; } textarea{ display: block; width: 100%; } select{ cursor: pointer; } [type="search"]{ -webkit-appearance: none; appearance: none; } [type="date"], [type="time"]{ accent-color: currentColor; } ::placeholder{ color: inherit; opacity: .5; } button, [type="submit"], summary{ -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; } button{ text-align: inherit; } details summary::-webkit-details-marker { display:none; } :focus{ outline-color: transparent; } :focus-visible{ outline: var(--i-outline-width) var(--i-outline-style) var(--i-outline-color); outline-offset: var(--i-outline-offset); } address{ font-style: inherit; } dialog{ border-width: 0; margin: auto; } /* Ensure closed dialogs are always hidden */ dialog:not([open]){ display: none !important; } .sr-only, .ipsInvisible { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } [hidden]{ display: none !important; } :root{ /* ---------------- - Color palette ---------------- */ --light__i-primary: hsl(220 85% 50%); --light__i-primary-relative-l: 33; --light__i-secondary: hsl(220 49% 13%); --light__i-secondary-relative-l: 10; --light__i-base: oklch(calc(var(--light__i-base-l) * 1%) calc(var(--light__i-base-c) * 1%) var(--light__i-base-h)); --light__i-base-l: 100; --light__i-base-c: 30; --light__i-base-h: 260; --dark__i-primary: hsl(215 85% 50%); --dark__i-primary-relative-l: 37; --dark__i-secondary: hsl(215 18% 26%); --dark__i-secondary-relative-l: 24; --dark__i-base: oklch(calc(var(--dark__i-base-l) * 1%) calc(var(--dark__i-base-c) * 1%) var(--dark__i-base-h)); --dark__i-base-l: 30; --dark__i-base-c: 20; --dark__i-base-h: 260; /* ---------------- - Theme settings ---------------- */ /* Light/dark mode */ --set__i-default-scheme: system; --set__i-change-scheme: 1; /* Text Logo */ --set__i-logo--fo-fa: var(--i-font-family); --set__i-logo--fo-we: 500; --set__i-desktop-logo--fo-si: 18; --set__i-sidebar-ui-logo--fo-si: 20; --set__i-mobile-logo--fo-si: 18; /* Image logo (desktop) */ --set__logo-light: ; --set__logo-dark: ; --set__i-logo--he: 70; --set__i-sidebar-ui-logo--he: 70; /* Image logo (mobile) */ --set__mobile-logo-light: ; --set__mobile-logo-dark: ; --set__i-mobile-logo--he: 70; /* Typography */ --set__i-font-family: var(--i-font-family_system-ui); --set__i-font-size: 14; --set__i-user-content-font-size: 110; /* Desktop header */ --set__i-position-logo: 4; --set__i-position-navigation: 5; --set__i-position-user: 6; --set__i-position-breadcrumb: 7; --set__i-position-search: 9; --set__i-header-top--he: 50; --set__i-header-primary--he: 100; --set__i-header-secondary--he: 50; --set__i-nav-bar-icons: 0; /* Mobile header */ --set__i-mobile-header--he: 60; /* Navigation panel */ --set__i-sidebar-ui-header--he: 65; /* Sidebar */ --set__i-sidebar-width: 350; --set__i-flip-sidebar: 0; --set__i-sticky-sidebar: 1; /* Body */ --set__i-layout-width: 1500; --set__i-avatar-radius: 1; /* Content boxes */ --set__i-design-border: 1; --set__i-design-radius: 8; --set__i-design-shadow: 2; --set__i-link-panels: 1; /* Mobile navigation */ --set__i-mobile-icons-location: footer; --set__i-mobile-footer-labels: 1; /* ---------------- - Colors ---------------- */ /* Typography */ --light__i-color_root: var(--i-base-contrast_3); --dark__i-color_root: var(--i-base-contrast_4); --light__i-color_soft: var(--i-base-contrast_1); --dark__i-color_soft: var(--i-base-contrast_2); --light__i-color_hard: var(--i-base-contrast_6); --dark__i-color_hard: var(--i-base-contrast_6); --light__i-link--co: var(--i-base-contrast_5); --dark__i-link--co: var(--i-base-contrast_5); --light__i-link-hover--co: var(--i-color_primary); --dark__i-link-hover--co: var(--i-color_primary); /* Desktop header */ --light__i-headerTop--ba-co: var(--i-base-contrast_5); --dark__i-headerTop--ba-co: var(--i-base_3); --light__i-headerTop--co: var(--i-base_1); --dark__i-headerTop--co: var(--i-base-contrast_6); --light__i-headerPrimary--ba-co: var(--i-base-contrast_4); --dark__i-headerPrimary--ba-co: var(--i-base_3); --light__i-headerPrimary--co: var(--i-base_1); --dark__i-headerPrimary--co: var(--i-base-contrast_6); --light__i-headerSecondary--ba-co: var(--i-base-contrast_5); --dark__i-headerSecondary--ba-co: var(--i-base_4); --light__i-headerSecondary--co: var(--i-base_1); --dark__i-headerSecondary--co: var(--i-base-contrast_5); /* Mobile header */ --light__i-headerMobile--ba-co: var(--i-base_1); --dark__i-headerMobile--ba-co: var(--i-base_2); --light__i-headerMobile--co: var(--i-base-contrast_5); --dark__i-headerMobile--co: var(--i-base-contrast_5); /* Side panel */ --light__i-navPanel--ba-co: var(--i-base-contrast_5); --dark__i-navPanel--ba-co: var(--i-base_2); --light__i-navPanel--co: var(--i-base_2); --dark__i-navPanel--co: var(--i-base-contrast_3); --light__i-navPanelLinkHover--co: var(--i-base_1); --dark__i-navPanelLinkHover--co: var(--i-color_primary); --light__i-navPanelLinkActive--ba-co: var(--i-primary); --dark__i-navPanelLinkActive--ba-co: var(--i-primary); --light__i-navPanelLinkActive--co: var(--i-primary-contrast); --dark__i-navPanelLinkActive--co: var(--i-primary-contrast); /* Body */ --light__i-body--ba-co: var(--i-base_3); --dark__i-body--ba-co: var(--i-base_1); /* Content boxes */ --light__i-box--ba-co: var(--i-base_1); --dark__i-box--ba-co: var(--i-base_2); --light__i-box--bo-co: var(--i-base_4); --dark__i-box--bo-co: var(--i-base_3); --light__i-boxHeader--ba-co: var(--i-base_1); --dark__i-boxHeader--ba-co: var(--i-base_2); --light__i-boxHeader--co: var(--i-base-contrast_6); --dark__i-boxHeader--co: var(--i-base-contrast_6); --light__i-widget-header--ba-co: var(--i-base_1); --dark__i-widget-header--ba-co: var(--i-base_2); --light__i-widget-header--co: var(--i-base-contrast_6); --dark__i-widget-header--co: var(--i-base-contrast_6); /* Footer */ --light__i-footer--co: var(--i-base_4); --dark__i-footer--co: var(--i-base-contrast_4); --light__i-footer--ba-co: var(--i-base-contrast_4); --dark__i-footer--ba-co: var(--i-base_2); /* Mobile navigation */ --light__i-mobileFooter--ba-co: var(--i-base_1); --dark__i-mobileFooter--ba-co: var(--i-base_3); --light__i-mobileFooter--co: var(--i-base-contrast_4); --dark__i-mobileFooter--co: var(--i-base-contrast_4); --light__i-mobileFooter-active--co: var(--i-primary-contrast); --dark__i-mobileFooter-active--co: var(--i-primary-contrast); --light__i-mobileFooter-active--ba-co: var(--i-primary); --dark__i-mobileFooter-active--ba-co: var(--i-primary); /* Buttons */ --i-button--bo-ra: 8; --i-button--te-tr: normal; --light__i-primary-button--ba-co: var(--i-primary); --dark__i-primary-button--ba-co: var(--i-primary); --light__i-primary-button--co: var(--i-primary-contrast); --dark__i-primary-button--co: var(--i-primary-contrast); --light__i-secondary-button--ba-co: var(--i-secondary); --dark__i-secondary-button--ba-co: var(--i-secondary); --light__i-secondary-button--co: var(--i-secondary-contrast); --dark__i-secondary-button--co: var(--i-secondary-contrast); } [data-ips-scheme="light"]{ --i-color_root: var(--light__i-color_root); --i-color_soft: var(--light__i-color_soft); --i-color_hard: var(--light__i-color_hard); --i-link--co: var(--light__i-link--co); --i-link-hover--co: var(--light__i-link-hover--co); --i-headerTop--ba-co: var(--light__i-headerTop--ba-co); --i-headerTop--co: var(--light__i-headerTop--co); --i-headerPrimary--ba-co: var(--light__i-headerPrimary--ba-co); --i-headerPrimary--co: var(--light__i-headerPrimary--co); --i-headerSecondary--ba-co: var(--light__i-headerSecondary--ba-co); --i-headerSecondary--co: var(--light__i-headerSecondary--co); --i-headerMobile--ba-co: var(--light__i-headerMobile--ba-co); --i-headerMobile--co: var(--light__i-headerMobile--co); --i-navPanel--ba-co: var(--light__i-navPanel--ba-co); --i-navPanel--co: var(--light__i-navPanel--co); --i-navPanelLinkHover--co: var(--light__i-navPanelLinkHover--co); --i-navPanelLinkActive--ba-co: var(--light__i-navPanelLinkActive--ba-co); --i-navPanelLinkActive--co: var(--light__i-navPanelLinkActive--co); --i-body--ba-co: var(--light__i-body--ba-co); --i-box--ba-co: var(--light__i-box--ba-co); --i-box--bo-co: var(--light__i-box--bo-co); --i-boxHeader--ba-co: var(--light__i-boxHeader--ba-co); --i-boxHeader--co: var(--light__i-boxHeader--co); --i-widget-header--ba-co: var(--light__i-widget-header--ba-co); --i-widget-header--co: var(--light__i-widget-header--co); --i-footer--co: var(--light__i-footer--co); --i-footer--ba-co: var(--light__i-footer--ba-co); --i-mobileFooter--ba-co: var(--light__i-mobileFooter--ba-co); --i-mobileFooter--co: var(--light__i-mobileFooter--co); --i-mobileFooter-active--co: var(--light__i-mobileFooter-active--co); --i-mobileFooter-active--ba-co: var(--light__i-mobileFooter-active--ba-co); --i-primary-button--ba-co: var(--light__i-primary-button--ba-co); --i-primary-button--co: var(--light__i-primary-button--co); --i-secondary-button--ba-co: var(--light__i-secondary-button--ba-co); --i-secondary-button--co: var(--light__i-secondary-button--co); } [data-ips-scheme="dark"]{ --i-color_root: var(--dark__i-color_root); --i-color_soft: var(--dark__i-color_soft); --i-color_hard: var(--dark__i-color_hard); --i-link--co: var(--dark__i-link--co); --i-link-hover--co: var(--dark__i-link-hover--co); --i-headerTop--ba-co: var(--dark__i-headerTop--ba-co); --i-headerTop--co: var(--dark__i-headerTop--co); --i-headerPrimary--ba-co: var(--dark__i-headerPrimary--ba-co); --i-headerPrimary--co: var(--dark__i-headerPrimary--co); --i-headerSecondary--ba-co: var(--dark__i-headerSecondary--ba-co); --i-headerSecondary--co: var(--dark__i-headerSecondary--co); --i-headerMobile--ba-co: var(--dark__i-headerMobile--ba-co); --i-headerMobile--co: var(--dark__i-headerMobile--co); --i-navPanel--ba-co: var(--dark__i-navPanel--ba-co); --i-navPanel--co: var(--dark__i-navPanel--co); --i-navPanelLinkHover--co: var(--dark__i-navPanelLinkHover--co); --i-navPanelLinkActive--ba-co: var(--dark__i-navPanelLinkActive--ba-co); --i-navPanelLinkActive--co: var(--dark__i-navPanelLinkActive--co); --i-body--ba-co: var(--dark__i-body--ba-co); --i-box--ba-co: var(--dark__i-box--ba-co); --i-box--bo-co: var(--dark__i-box--bo-co); --i-boxHeader--ba-co: var(--dark__i-boxHeader--ba-co); --i-boxHeader--co: var(--dark__i-boxHeader--co); --i-widget-header--ba-co: var(--dark__i-widget-header--ba-co); --i-widget-header--co: var(--dark__i-widget-header--co); --i-footer--co: var(--dark__i-footer--co); --i-footer--ba-co: var(--dark__i-footer--ba-co); --i-mobileFooter--ba-co: var(--dark__i-mobileFooter--ba-co); --i-mobileFooter--co: var(--dark__i-mobileFooter--co); --i-mobileFooter-active--co: var(--dark__i-mobileFooter-active--co); --i-mobileFooter-active--ba-co: var(--dark__i-mobileFooter-active--ba-co); --i-primary-button--ba-co: var(--dark__i-primary-button--ba-co); --i-primary-button--co: var(--dark__i-primary-button--co); --i-secondary-button--ba-co: var(--dark__i-secondary-button--ba-co); --i-secondary-button--co: var(--dark__i-secondary-button--co); } max_internalembed_width"}px{{else}}revert{{endif}}; --i-embed-default-width: {{if settings.max_internalembed_width}}{expression="\IPS\Settings::i()->max_internalembed_width"}px{{else}}500px{{endif}}; --i-popup--bo-ra: min(var(--i-design-radius, 4px)); --i-popup--bo-sh: 0 8px 50px rgba(0,0,0,0.1), 0px 4px 15px rgba(0,0,0,0.05); --i-dialog--bo-sh: 0px 5px 55px color-mix(in srgb, var(--i-background_dark) 40%, transparent), 0px 7px 24px -12px color-mix(in srgb, var(--i-background_dark) 70%, transparent); --i-dropdown--bo-ra: var(--i-box--bo-ra); --i-select--dark-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 274.7 54.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z' fill='hsl(0,0%25,0%25,.5)'/%3E%3C/svg%3E"); --i-select--light-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 274.7 54.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z' fill='hsl(0,0%25,100%25,.5)'/%3E%3C/svg%3E"); } [data-ips-scheme="dark"]{ --i-placeholder--op: .7; } [data-ips-theme-setting-mobile-icons-location="header"]{ --i-mobileFooter--he: 0px; } @media (max-width: 767px){ :root{ --i-box--pa-bl: var(--i-sp_2); --i-box--pa-in: var(--i-sp_2); --i-sticky-offset: calc(var(--i-sticky-offset--small) + var(--i-sticky-offset--extra, 0px)); } } [dir="ltr"]{ --i-lang-dir: 1; } [dir="rtl"]{ --i-lang-dir: -1; }]]> "; inherits: true; initial-value: black; } @property --i-background_3 { syntax: ""; inherits: true; initial-value: black; } @property --i-background_4 { syntax: ""; inherits: true; initial-value: black; } @property --i-background_5 { syntax: ""; inherits: true; initial-value: black; } @property --i-primary-dark { syntax: ""; inherits: true; initial-value: black; } @property --i-primary-light { syntax: ""; inherits: true; initial-value: black; } @property --i-secondary-dark { syntax: ""; inherits: true; initial-value: black; } @property --i-secondary-light { syntax: ""; inherits: true; initial-value: black; } @property --i-color_primary { syntax: ""; inherits: true; initial-value: black; } @property --i-color_secondary { syntax: ""; inherits: true; initial-value: black; } @property --i-body--ba-co { syntax: ""; inherits: true; initial-value: black; } } /* Ensure that all color variables are actually colors. Not essential, but might future-proof */ @property --i-co { syntax: ""; inherits: true; initial-value: black; } :root{ color-scheme: light dark; /* Backgrounds */ --i-background_start: var(--i-box--ba-co); --i-background_end: var(--i-base_6); --i-background_1: var(--i-background_start); --i-background_2: color-mix(in oklch, var(--i-background_start), var(--i-background_end) 10%); --i-background_3: color-mix(in oklch, var(--i-background_start), var(--i-background_end) 32%); --i-background_4: color-mix(in oklch, var(--i-background_start), var(--i-background_end) 50%); --i-background_5: color-mix(in oklch, var(--i-background_start), var(--i-background_end) 80%); --i-background_6: var(--i-background_end); --i-primary-dark: color-mix(in srgb, var(--i-primary), black 20%); --i-primary-light: color-mix(in srgb, var(--i-primary), white 20%); --i-secondary-dark: color-mix(in srgb, var(--i-secondary), black 20%); --i-secondary-light: color-mix(in srgb, var(--i-secondary), white 20%); --i-primary-contrast: oklch(from var(--i-primary) clamp(0, (.80 - l) * 1000, 1) 0 0); --i-secondary-contrast: oklch(from var(--i-secondary) clamp(0, (.80 - l) * 1000, 1) 0 0); --i-color_primary: oklch(from var(--i-primary) var(--if-light, min(l, .5)) var(--if-dark, max(l, .7)) c h); --i-color_secondary: oklch(from var(--i-secondary) var(--if-light, min(l, .5)) var(--if-dark, max(l, .7)) c h); --i-color_contrast: oklch(from var(--i-body--ba-co) clamp(.3, (.60 - l) * 1000, .8) c h); --i-color_background-dark-contrast: hsl(0 0% 100%); /* Trophy colors */ --i-trophy-first--background: #fac746; --i-trophy-first--color: #704926; --i-trophy-second--background: #c0c0c0; --i-trophy-third--background: #cd7f32; } [data-ips-scheme="light"]{ color-scheme: light; --if-dark:; --if-light: initial; /* Base colors */ --i-primary: var(--light__i-primary); --i-primary-relative-l: var(--light__i-primary-relative-l, 0); --i-secondary: var(--light__i-secondary); --i-secondary-relative-l: var(--light__i-secondary-relative-l, 0); --i-base-l: calc(var(--light__i-base-l) / 100); --i-base-c: calc(var(--light__i-base-c) / 100); --i-base-c-dark: var(--i-base-c) * 100 / 30; /* Set an ideal chroma for the default setting of 30 */ --i-base-c-light: var(--i-base-c-dark) * var(--i-base-l); /* As lightness increases, chroma decreases */ --i-base-h: var(--light__i-base-h); --i-base_1: oklch(calc(80% + 20% * var(--i-base-l)) calc(5% * var(--i-base-c-dark) - 5% * var(--i-base-c-light)) var(--i-base-h)); --i-base_2: oklch(calc(77% + 22% * var(--i-base-l)) calc(6% * var(--i-base-c-dark) - 5% * var(--i-base-c-light)) var(--i-base-h)); --i-base_3: oklch(calc(73% + 23% * var(--i-base-l)) calc(7% * var(--i-base-c-dark) - 5% * var(--i-base-c-light)) var(--i-base-h)); --i-base_4: oklch(calc(68% + 21% * var(--i-base-l)) calc(9% * var(--i-base-c-dark) - 5% * var(--i-base-c-light)) var(--i-base-h)); --i-base_5: oklch(calc(65% + 22% * var(--i-base-l)) calc(12% * var(--i-base-c-dark) - 5% * var(--i-base-c-light)) var(--i-base-h)); --i-base_6: oklch(calc(60% + 20% * var(--i-base-l)) calc(14% * var(--i-base-c-dark) - 5% * var(--i-base-c-light)) var(--i-base-h)); --i-base-contrast_1: oklch(calc(40% + 10% * var(--i-base-l)) calc(var(--i-base-c) * 46%) var(--i-base-h)); --i-base-contrast_2: oklch(calc(37% + 9% * var(--i-base-l)) calc(var(--i-base-c) * 46%) var(--i-base-h)); --i-base-contrast_3: oklch(calc(34% + 9% * var(--i-base-l)) calc(var(--i-base-c) * 41%) var(--i-base-h)); --i-base-contrast_4: oklch(calc(28% + 5% * var(--i-base-l)) calc(var(--i-base-c) * 36%) var(--i-base-h)); --i-base-contrast_5: oklch(calc(21% + 5% * var(--i-base-l)) calc(var(--i-base-c) * 27%) var(--i-base-h)); --i-base-contrast_6: oklch(15% calc(var(--i-base-c) * 17%) var(--i-base-h)); /* Typography */ --i-color_positive: hsl(120 82% 36%); --i-color_positive-soft: hsl(150 60% 90%); --i-color_negative: hsl(0 65% 50%); --i-color_negative-soft: hsl(0 65% 90%); --i-color_warning: hsl(24 90% 40%); --i-color_moderated: hsl(0 50% 30%); --i-color_assigned: hsl(23 40% 20%); /* Background colors */ --i-background_dark: var(--i-base-contrast_3); --i-background_positive: hsl(150 82% 36%); --i-background_positive-soft: hsl(120 64% 96%); --i-background_negative: hsl(0 72% 30%); --i-background_negative-soft: hsl(0 72% 90%); --i-background_moderated: hsl(0 50% 95%); --i-background_selected: var(--i-background_3); --i-background_hover: color-mix(in srgb, var(--i-background_6) 8%, transparent); --i-background_assigned: hsl(17.1 63.6% 97.8%); /* ---------------- - Assign colors to elements ---------------- */ /* Header */ --i-nav-dropdown--ba-co: var(--i-background_1); --i-nav-dropdown--bo-sh: color-mix(in srgb, var(--i-color_hard) 10%, transparent) 0px 0px 0px 1px, hsl(0 0% 0% / .2) 0px 20px 40px, hsl(0 0% 0% / 0.1) 0px 1px 2px; --i-nav-dropdown-arrow--bo-co: color-mix(in srgb, var(--i-color_hard) 10%, transparent); /* Boxes */ --i-box--bo-sh: oklch(10% calc(var(--i-base-c) * 20%) var(--i-base-h) / min(.15, calc(var(--set__i-design-shadow) * .025))) 0px calc(5px + var(--set__i-design-shadow) * .6px) calc(3px + var(--set__i-design-shadow) * 2px) -3px; /* Dropdowns */ --i-dropdown--ba-co: var(--i-background_1); --i-dropdown--co: var(--i-color_root); --i-dropdown--bo-sh: color-mix(in srgb, var(--i-color_hard) 10%, transparent) 0px 0px 0px 1px, hsl(0 0% 0% / .2) 0px 20px 40px, hsl(0 0% 0% / .1) 0px 1px 2px; --i-dropdown-arrow--bo-co: color-mix(in srgb, var(--i-color_hard) 10%, transparent); /* Inputs */ --i-input--ba-co: var(--i-background_1); /* Other */ --i-tooltip--ba-co: oklch(25% calc(var(--i-base-c) * 20%) var(--i-base-h)); } [data-ips-scheme="dark"]{ color-scheme: dark; --if-light:; --if-dark: initial; /* Base colors */ --i-primary: var(--dark__i-primary); --i-primary-relative-l: var(--dark__i-primary-relative-l, 0); --i-secondary: var(--dark__i-secondary); --i-secondary-relative-l: var(--dark__i-secondary-relative-l, 0); --i-base-l: calc(var(--dark__i-base-l) / 100); --i-base-c: calc(var(--dark__i-base-c) / 100); --i-base-h: var(--dark__i-base-h); --i-base_1: oklch(calc(15% + 15% * var(--i-base-l)) calc(var(--i-base-c) * 1.75% * 4 + 10% * var(--i-base-c) * var(--i-base-l)) var(--i-base-h)); --i-base_2: oklch(calc(19% + 19% * var(--i-base-l)) calc(var(--i-base-c) * 3% * 4 + 10% * var(--i-base-c) * var(--i-base-l)) var(--i-base-h)); --i-base_3: oklch(calc(23% + 23% * var(--i-base-l)) calc(var(--i-base-c) * 4% * 4 + 10% * var(--i-base-c) * var(--i-base-l)) var(--i-base-h)); --i-base_4: oklch(calc(27% + 27% * var(--i-base-l)) calc(var(--i-base-c) * 4.75% * 4 + 10% * var(--i-base-c) * var(--i-base-l)) var(--i-base-h)); --i-base_5: oklch(calc(31% + 31% * var(--i-base-l)) calc(var(--i-base-c) * 6% * 4 + 10% * var(--i-base-c) * var(--i-base-l)) var(--i-base-h)); --i-base_6: oklch(calc(34% + 34% * var(--i-base-l)) calc(var(--i-base-c) * 6.75% * 4 + 10% * var(--i-base-c) * var(--i-base-l)) var(--i-base-h)); --i-base-contrast_1: oklch(calc(50% + 20% * var(--i-base-l)) calc(var(--i-base-c) * 9% * 4) var(--i-base-h)); --i-base-contrast_2: oklch(calc(60% + 15% * var(--i-base-l)) calc(var(--i-base-c) * 6.75% * 4) var(--i-base-h)); --i-base-contrast_3: oklch(calc(70% + 10% * var(--i-base-l)) calc(var(--i-base-c) * 5% * 4) var(--i-base-h)); --i-base-contrast_4: oklch(calc(80% + 5% * var(--i-base-l)) calc(var(--i-base-c) * 3.5% * 4) var(--i-base-h)); --i-base-contrast_5: oklch(calc(90% + 3% * var(--i-base-l)) calc(var(--i-base-c) * 1.75% * 4) var(--i-base-h)); --i-base-contrast_6: oklch(100% 0% var(--i-base-h)); /* Text color */ --i-color_positive: hsl(150 60% 45%); --i-color_positive-soft: hsl(150 60% 90%); --i-color_negative: hsl(0 65% 63%); --i-color_negative-soft: hsl(0 65% 90%); --i-color_warning: hsl(27 76% 52%); --i-color_moderated: hsl(350 30% 85%); --i-color_assigned: hsl(23 40% 85%); /* Background color */ --i-background_dark: var(--i-base_6); --i-background_positive: hsl(150 72% 30%); --i-background_positive-soft: hsl(150 72% 15%); --i-background_negative: hsl(0 72% 30%); --i-background_negative-soft: hsl(0 72% 15%); --i-background_moderated: hsl(350 23% 20%); --i-background_selected: var(--i-background_3); --i-background_hover: color-mix(in srgb, var(--i-co) 5%, transparent); --i-background_assigned: hsl(340 3.6% 16.3%); /* ---------------- - Assign colors to elements ---------------- */ /* Header */ --i-nav-dropdown--ba-co: var(--i-background_2); --i-nav-dropdown--bo-sh: color-mix(in srgb, var(--i-color_hard) 10%, transparent) 0px 0px 0px 1px, hsl(0 0% 0% / .2) 0px 20px 40px, hsl(0 0% 0% / .1) 0px 1px 2px; --i-nav-dropdown-arrow--bo-co: color-mix(in srgb, var(--i-color_hard) 10%, transparent); /* Boxes */ --i-box--bo-sh: oklch(10% calc(var(--i-base-c) * 20%) var(--i-base-h) / min(.15, calc(var(--set__i-design-shadow) * .025))) 0px calc(5px + var(--set__i-design-shadow) * .6px) calc(3px + var(--set__i-design-shadow) * 2px) -3px; /* Dropdowns */ --i-dropdown--ba-co: var(--i-background_3); --i-dropdown--co: var(--i-color_root); --i-dropdown--bo-sh: hsl(0 0% 0% / 30%) 0px 0px 0px 1px, hsl(0 0% 0% / 40%) 0px 30px 30px; --i-dropdown-arrow--bo-co: hsl(0 0% 0% / 30%); /* Other */ --i-tooltip--ba-co: oklch(50% calc(var(--i-base-c) * 1.5%) var(--i-base-h)); /* Inputs */ --i-input--ba-co: var(--i-background_4); --i-input-success--ba-co: hsl(145 33% 22%); --i-input-success--bo-co: hsl(145 33% 35%); --i-input-success--co: hsl(145 33% 90%); --i-input-error--ba-co: hsl(351 36% 22%); --i-input-error--bo-co: hsl(351 36% 35%); --i-input-error--co: hsl(351 36% 90%); } /* Relative colors fallback. The first selector (from red) is needed for Tor Browser, which thinks it understands relative colors but doesn't. The second selector ensures the browser understands the updated syntax */ @supports (not (color: oklch(from red l c h))) or (not (color: oklch(from var(--i-primary) clamp(0, (.80 - l) * 1000, 1) c h))) { :root{ --i-color_contrast: initial; --i-primary-contrast: hsl(0 0% min(100%, ((70 - var(--i-primary-relative-l)) * 100%))); --i-secondary-contrast: hsl(0 0% min(100%, ((70 - var(--i-secondary-relative-l)) * 100%))); } [data-ips-scheme="light"]{ --i-color_primary: color-mix(in hsl, var(--i-primary) 0%, hsl(none none min(60%, var(--i-primary-relative-l) * 1%))); --i-color_secondary: color-mix(in hsl, var(--i-secondary) 0%, hsl(none none min(60%, var(--i-secondary-relative-l) * 1%))); } [data-ips-scheme="dark"]{ --i-color_primary: color-mix(in hsl, var(--i-primary) 0%, hsl(none none max(70%, var(--i-primary-relative-l) * 1%))); --i-color_secondary: color-mix(in hsl, var(--i-secondary) 0%, hsl(none none max(70%, var(--i-secondary-relative-l) * 1%))); } } /* color-mix fallback */ @supports not (color: color-mix(in srgb, red, red)){ :root{ --i-primary-light: var(--i-primary); --i-primary-dark: var(--i-primary); --i-secondary-light: var(--i-secondary); --i-secondary-dark: var(--i-secondary); --i-background_1: var(--i-base_1); --i-background_2: var(--i-base_2); --i-background_3: var(--i-base_3); --i-background_4: var(--i-base_4); --i-background_5: var(--i-base_5); --i-background_6: var(--i-base_6); --i-color_primary: var(--i-primary); --i-color_secondary: var(--i-secondary); } } /* oklch fallback */ @supports not (color: oklch(50% 50% 50)){ :root{ --i-tooltip--ba-co: hsl(0, 0%, 20%); } [data-ips-scheme="light"]{ --i-base_1: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(80% + 20% * var(--i-base-l))); --i-base_2: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(77% + 21% * var(--i-base-l))); --i-base_3: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(77% + 21% * var(--i-base-l))); --i-base_4: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(68% + 21% * var(--i-base-l))); --i-base_5: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(65% + 22% * var(--i-base-l))); --i-base_6: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(60% + 23% * var(--i-base-l))); --i-base-contrast_1: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(37% + 10% * var(--i-base-l))); --i-base-contrast_2: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(30% + 9% * var(--i-base-l))); --i-base-contrast_3: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(24% + 9% * var(--i-base-l))); --i-base-contrast_4: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(18% + 5% * var(--i-base-l))); --i-base-contrast_5: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(11% + 4% * var(--i-base-l))); --i-base-contrast_6: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), 5%); } [data-ips-scheme="dark"]{ --i-base_1: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(5% + 15% * var(--i-base-l))); --i-base_2: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(9% + 18% * var(--i-base-l))); --i-base_3: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(12% + 21% * var(--i-base-l))); --i-base_4: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(16% + 24% * var(--i-base-l))); --i-base_5: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(20% + 27% * var(--i-base-l))); --i-base_6: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(25% + 30% * var(--i-base-l))); --i-base-contrast_1: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(50% + 20% * var(--i-base-l))); --i-base-contrast_2: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(60% + 15% * var(--i-base-l))); --i-base-contrast_3: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(70% + 10% * var(--i-base-l))); --i-base-contrast_4: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(80% + 5% * var(--i-base-l))); --i-base-contrast_5: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), calc(90% + 3% * var(--i-base-l))); --i-base-contrast_6: hsl(0 0% 100%); } } /* iOS 12: Space-separated primary/secondary fallback. We set a generic brand color here for ancient browsers since we can't render the space-separated primary/secondary values */ @supports not (color: hsl(0 0% 0%)){ :root{ --i-primary-contrast: #fff; --i-secondary-contrast: #fff; } [data-ips-scheme="light"]{ --i-primary: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), 10%); --i-secondary: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), 20%); } [data-ips-scheme="dark"]{ --i-primary: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), 40%); --i-secondary: hsl(calc(var(--i-base-h) - 40), calc(var(--i-base-c) * 100%), 30%); } } /* Improve performance by removing box-shadows instead of making them transparent? */ @container style(--set__i-design-shadow: 0){ body{ --i-box--bo-sh: none; } }]]> /* Variable fonts: - Downloaded from: https://fonts.google.com/ - Converted from TTF to WOFF2 at: https://cloudconvert.com/ - All font licenses allow distribution with commerical software - Fonts should only be added if they're variable or support at least every 100 value of font-weight - Font files are only downloaded if the font is actually used */ @font-face{ font-family: "Bitter"; src: url('{resource="fonts/Bitter.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Instrument Sans"; src: url('{resource="fonts/InstrumentSans.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Inter"; src: url('{resource="fonts/Inter.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Manrope"; src: url('{resource="fonts/Manrope.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Merriweather Sans"; src: url('{resource="fonts/MerriweatherSans.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Open Sans"; src: url('{resource="fonts/OpenSans.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Pathway Extreme"; src: url('{resource="fonts/PathwayExtreme.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Roboto Flex"; src: url('{resource="fonts/RobotoFlex.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Roboto Serif"; src: url('{resource="fonts/RobotoSerif.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Roboto Slab"; src: url('{resource="fonts/RobotoSlab.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } @font-face{ font-family: "Source Sans 3"; src: url('{resource="fonts/SourceSans3.woff2" inCss="true" app="core" location="front"}') format('woff2'); font-display: swap; font-weight: 100 900; } /* ---------------- - Global ---------------- */ :root{ --i-co: var(--i-color_root); } /* Ensure anchored content appears below sticky header. By default, it'll match the height of the offset, but extra space can be added by defining --i-scroll-padding */ html{ scroll-padding-top: calc(var(--i-sticky-offset) + var(--i-scroll-padding, 0px)); } body{ background-color: var(--i-body--ba-co); color: var(--i-co); font-family: var(--i-font-family); font-size: var(--i-font-size); line-height: 1.52; min-height: 100vh; } a{ color: var(--i-link--co, var(--i-co)); text-decoration: var(--i-link--te-de, none); } @media (any-hover:hover){ a:where(:hover){ color: var(--i-link-hover--co, var(--i-link--co, var(--i-co))); text-decoration: var(--i-link-hover--te-de, var(--i-link--te-de, none)); } } /* ---------------- - Accessibility links ---------------- */ /* Skip to content */ .ipsSkipToContent:focus{ --i-outline-offset: 0px; position: absolute; top: 10px; inset-inline-start: 10px; z-index: 9999; background: hsl(0 0% 0% / 70%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: hsl(0 0% 100%); border-radius: 6px; padding: .8em 1.2em; } .ipsSkipToContent:not(:focus){ position: absolute; clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; white-space: nowrap; width: 1px; } /* ---------------- - SVG ---------------- */ .ipsSvg{ height: 1em; width: auto; } /* ---------------- - Icons ---------------- */ /* Reserve space for loading icons? */ :where(.ipsLayout :is(.fa-regular, .fa-solid, .fa-brands)){ min-width: .7em; } .fa-ips{ display: inline-block; min-width: 1.2em; text-align: center; flex: 0 0 auto; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-style: normal; font-weight: var(--icon--fo-we, 900); } .fa-ips::before{ content: var(--icon, "\f1c5"); } .ipsEmoji, .ipsIcon--emoji { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline-block; height: 1lh; } .ipsEmoji img { --i--emo-he: 1.05em; display: inline; height: var(--i--emo-he); margin-block: calc((1lh - var(--i--emo-he)) / 2); } /* ---------------- - Backdrops ---------------- */ dialog::backdrop{ background: hsl(210 20% 8% / .5); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } :where([data-ips-scheme="dark"]) dialog::backdrop{ background:hsl(210 10% 40% / .7); } li{ display: contents; } /* Hide badge container if it's empty */ .ipsBadges:not(:has(*)){ display: none !important; } @supports not selector(a:has(b)){ .ipsBadges:-moz-only-whitespace{ display: none !important; } } .ipsBadge{ --i-badge: var(--i-background_6); background: var(--i-badge); color: oklch(from var(--i-badge) clamp(0.4, (.75 - l) * 10000, 1) clamp(0, c * 5 * (1 - clamp(0, (.75 - l) * 10000, 1)), .2) h ); display: inline-flex; align-items: center; justify-content: center; gap: .4em; text-align: center; font-weight: 600; text-transform: uppercase; min-height: 1.8em; min-width: 1.8em; padding: 0 .8em; font-size: max(.7em, 10px); border-radius: min(var(--i-design-radius), .4em); text-decoration: none !important; } :where(.ipsBadge){ position: relative; /* Required to contain the absolute elements such as the "Expert follow" button */ } @supports (not (color: oklch(from red l c h))) or (not (color: oklch(from var(--i-badge) clamp(0.35, (.75 - l) * 10000, 1) clamp(0, c * 1000 * (1 - clamp(0, (.75 - l) * 10000, 1)), .3) h))){ .ipsBadge{ color: color-mix(in hsl, var(--i-badge), hsl(none none var(--if-light,20%) var(--if-dark,80%)) 100%); } } @supports (not (color: color-mix(in srgb, red, blue))){ .ipsBadge{ color: var(--i-color_hard); } } /* Remove the underline from links if they contain a badge. Eg, Featured forum names on expanded fluid view layout */ a:has(.ipsBadge){ text-decoration: none !important; } .ipsBadge a{ color: inherit; } .ipsBadge--negative, .ipsBadge--hidden, .ipsBadge--pending, .ipsBadge--warning{ --i-badge: hsl(0 var(--if-light, 70% 85%) var(--if-dark, 30% 28%)); } .ipsBadge--locked{ --i-badge: var(--i-background_5); } .ipsBadge--hot, .ipsBadge--intermediary, .ipsBadge--assigned{ --i-badge: hsl(24 var(--if-light, 47% 83%) var(--if-dark, 31% 25%)); } .ipsBadge--assigned{ text-transform: none; } .ipsBadge--neutral, .ipsBadge--poll{ } .ipsBadge--positive, .ipsBadge--popular, .ipsBadge--solved{ --i-badge: hsl(var(--if-light, 117 56% 85%) var(--if-dark, 150 72% 35%)); } .ipsBadge--pinned{ --i-badge: hsl(350 var(--if-light, 56% 80%) var(--if-dark, 33% 35%)); } .ipsBadge--featured{ --i-badge: hsl(39 var(--if-light, 73% 82%) var(--if-dark, 57% 41%)); } .ipsBadge--author{ background-color: color-mix(in srgb, var(--i-primary) 20%, var(--i-background_1)); color: var(--i-color_primary); } .ipsBadge--prefix{ background-color: var(--i-primary); color: var(--i-primary-contrast); text-transform: none; } .ipsBadge--new{ background-color: var(--i-featured, var(--i-primary)); color: hsl(0 0% 100%); font-weight: 700; font-size: 10px; } .ipsBadge--highlightedGroup { --i-badge: hsl(var(--if-light, 117 56% 85%) var(--if-dark, 150 62% 25%)); --i-badge: var(--i-entry-color); } .ipsBadge--solution{ background-color: var(--i-background_positive); color: hsl(0 0% 100%); } .ipsBadge--expert{ --i-badge: color-mix(in srgb, var(--i-primary) 20%, var(--i-background_1)); } .ipsBadge--expert [data-role="followButton"]{ position: absolute; inset: 0; overflow: hidden; opacity: 0; } .ipsBadge--expert:has(.ipsButton--positive){ background-color: var(--i-secondary); color: var(--i-secondary-contrast); } .ipsBadge--expert:has(.ipsButton)::after{ content: '\f234'; border-inline-start: 1px solid hsl(0 0% 100% / .3); padding-inline-start: .7em; margin-inline-start: .3em; font-family: "Font Awesome 6 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-style: normal; font-weight: 900; } .ipsBadge--expert:has(.ipsButton--positive)::after{ content: '\f00c' } .ipsBadge[style*="--i-featured"]{ --i-badge: var(--i-featured); } /* These styles are used on fields in Pages */ .ipsBadge--style1 { --i-badge: var(--i-primary); color: var(--i-primary-contrast); } .ipsBadge--style2 { --i-badge: var(--i-secondary); color: var(--i-secondary-contrast); } .ipsBadge--style3 { --i-badge: var(--i-background_4); } .ipsBadge--style4 { --i-badge: var(--i-base-contrast_4); } .ipsBadge--style5 { --i-badge: hsl(160, 50% 50%); } .ipsBadge--style6 { --i-badge: hsl(20, 50% 50%); } .ipsBadge--style7 { --i-badge: hsl(50, 50% 50%); } .ipsBadge--string{ text-transform: none; } .ipsBadge > i{ font-size: .8em; } .ipsBadge--icon{ padding: 0; } .ipsBadge--icon > span, .ipsBadge--text > i{ display: none; } .ipsBadge--rare { position: absolute; top: -6px; inset-inline-start: -10px; transform: rotate(calc(var(--i-lang-dir) * -20deg)); } /* Reputation badges */ .ipsRepBadge { font-size: .8em; display: inline-block; font-weight: 600; color: var(--i-color_soft) } .ipsRepBadge--positive { color: var(--i-color_positive); } .ipsRepBadge--negative { color: var(--i-color_negative); } /* ======================================================== */ /* POINTS (for warnings) */ .ipsWarningPoints { display: inline-grid; place-content: center; background: #b14848; color: #fff; width: 2em; height: 2em; border-radius: 50%; font-size: 1.12em; } .ipsWarningPoints--removed { background: var(--i-color_soft); } .ipsWarningPoints--small { font-size: .85em; vertical-align: middle; } /* Container titles, with featured colors */ .ipsContainerTitle{ font-weight: 600; color: var(--i-featured, var(--i-color_hard)); color: color-mix(in hsl, var(--i-featured, var(--i-color_hard)), hsl(none none var(--if-light,40%) var(--if-dark,70%)) 100%); } /* Relative colors */ @supports (color: oklch(from var(--i) min(l, .5) c h)){ .ipsContainerTitle{ color: oklch(from var(--i-featured, var(--i-color_hard)) var(--if-light, min(l, .5)) var(--if-dark, max(l, .7)) c h); } }]]> .ipsForm[action$="do=edit"] > .ipsForm, .ipsWizard:not(.ipsBox *){ background-color: var(--i-box--ba-co); border-radius: var(--i-box--bo-ra); box-shadow: var(--i-box--bo-sh); border-width: var(--i-box--bo-wi); border-style: var(--i-box--bo-st); border-color: var(--i-box--bo-co); } .ipsLayout__primary-column > .ipsForm[action$="do=edit"] > .ipsForm{ padding: var(--i-sp_4); } .ipsBox__header{ flex: 0 0 auto; /* Useful when in flex-direction:column layouts */ --i-co: var(--i-boxHeader--co); background-color: var(--i-boxHeader--ba-co); color: var(--i-co); } .ipsBox__padding, .ipsBox--padding{ padding: var(--i-box--pa-bl) var(--i-box--pa-in); } .ipsBox__footer{ padding: var(--i-sp_2) var(--i-sp_3); background-color: var(--i-background_3); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } /* Inner boxes */ .ipsInnerBox{ border: 2px solid var(--i-background_3); border-radius: var(--i-box--bo-ra); } .ipsInnerBox__header{ color: var(--i-color_hard); font-weight: 600; font-size: 1.1em; } .ipsInnerBox--padding, .ipsInnerBox__padding{ padding: 2em; } /* Tinted boxes */ .ipsInnerBox--inherit{ background-color: var(--i-background_2); } /* Collapse icon */ .ipsBox__header-toggle{ margin-inline-start: auto; background: color-mix(in srgb, var(--i-co) 5%, transparent); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; height: 1.7em; width: 2.6em; } @media (hover:hover){ .ipsBox__header-toggle{ opacity: .6; transition: opacity 0.15s linear; background: color-mix(in srgb, var(--i-co) 20%, transparent); } .ipsBox__header:not(:hover) .ipsBox__header-toggle{ opacity: 0; } } .ipsBox__header-toggle:hover, .ipsBox__header-toggle:focus-visible{ opacity: 1 !important; } .ipsBox__header-toggle::before{ content: "\2b"; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; } .ipsBox__header-toggle[aria-expanded="true"]::before{ content: "\f068"; } .ipsBox__header:has(.ipsBox__header-toggle[aria-expanded="false"]){ border-radius: calc(var(--i-box--bo-ra) - var(--i-box--bo-wi)); } /* ---------------- - Widgets ---------------- */ .ipsWidget{ background: var(--i-widget--ba-co); border-radius: var(--i-widget--bo-ra); box-shadow: var(--i-widget--bo-sh); border-width: var(--i-widget--bo-wi); border-style: var(--i-widget--bo-st); border-color: var(--i-widget--bo-co); background-clip: padding-box; position: relative; } /* Remove widget styles from certain elements */ .ipsWidget[data-blockid^="app_core_advertisements_"], .ipsWidget[data-blockBuilder], .ipsWidget.ipsWidget--transparent { background: transparent; box-shadow: none; border-width: 0; } .ipsWidget__header{ flex: 0 0 auto; /* Useful in flex-direction:column elements */ --i-co: var(--i-widget-header--co); color: var(--i-co); background-color: var(--i-widget-header--ba-co); font-size: 1.1em; font-weight: 600; } .ipsWidget__padding{ padding: var(--Widget__padding--pa, 1.5em); } /* CMS navigation */ .ipsWidget__nav{ font-weight: 500; padding-bottom: var(--i-box--bo-ra); } .ipsWidget__nav :is(a, summary){ display: flex; align-items: center; gap: .8em; padding: .7em; padding-inline-start: 1.4em; } .ipsWidget__nav details details :is(a, summary){ padding-inline-start: 3em; } .ipsWidget__nav details details details :is(a, summary){ padding-inline-start: 4.6em; } .ipsWidget__nav :is(a, summary):hover{ background-color: var(--i-background_2); } .ipsWidget__nav summary{ color: var(--i-color_hard); } .ipsWidget__nav summary::after{ margin: -2em 0; font-size: .8em; content: "\2b"; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; margin-inline-start: auto; width: 2em; height: 2em; color: var(--i-color_soft); border-radius: 4px; display: grid; place-content: center; } .ipsWidget__nav summary:hover::after{ background: color-mix(in srgb, var(--i-color_soft) 10%, transparent); } .ipsWidget__nav [open] > summary::after{ content: "\f068"; } .ipsWidget__nav a{ color: var(--i-color_root); } .ipsWidget__nav details a::before{ content: "-"; margin-inline-start: 1em; opacity: .5; align-self: baseline; } /* ---------------- - Responsive pull ---------------- */ @media (max-width: 767px){ html .ipsPull{ border-radius: 0; margin-left: calc(var(--i-layout-gutter) * -1); margin-right: calc(var(--i-layout-gutter) * -1); border-left-width: 0; border-right-width: 0; } .ipsPull .ipsPull{ margin-left: 0; margin-right: 0; } .ipsPull .ipsBox__header{ border-radius: 0; } } /* ---------------- - Other ---------------- */ /* Let certain divs inherit border-radius, so it can correctly be applied to .ipsBox__header, etc */ :where(.ipsBox > [data-tableid]){ border-radius: inherit; }]]> li{ display: contents; } /* Hide empty button containers */ .ipsButtons:not(:has(a, button)){ display: none } @supports not selector(a:has(b)){ .ipsButtons:-moz-only-whitespace{ display: none } } /* Full width buttons */ .ipsButtons--fill .ipsButton{ flex-grow: 1; } .ipsButtons--fill .ipsButton--primary{ flex-grow: 2; } @media (max-width: 600px){ /* Buttons fill the entire width on small screens. */ .ipsButtons :is(.ipsButton, .ipsButtonGroup){ flex-grow: 1; } /* Primary buttons occupy more space and sit last in the order */ .ipsButtons .ipsButton--primary{ flex-grow: 3; order: 1; } /* If at least 3 buttons exist, make the primary button occupy its own row */ .ipsButtons:has(> li:nth-child(3)) .ipsButton--primary{ flex: 999 1 100%; } /* If a view toggle exists, force it and the primary button to their own row at the bottom */ /* .ipsButtons:has(:nth-child(3)):has(.ipsButtonGroup)::before{ content: ''; flex: 1 1 100%; order: 1; } */ /* Order necessary due to above pseudo element */ /* .ipsButtons .ipsButtonGroup{ order: 1; } */ .ipsButtons:has(.ipsButtonGroup) .ipsButton--primary{ flex: 999 1 auto; } .ipsButtons .ipsButton--text{ --i-button--pa-in: 1em; } } .ipsButton, .ipsButtonGroup{ --i-button--co: var(--i-co); --i-button--ba-co: transparent; --i-button--bo-co: transparent; --i-button-hover--ba-co: color-mix(in srgb, var(--i-button--ba-co), #fff 20%); --i-outline-color: var(--i-button--ba-co); background-color: var(--i-button--ba-co); border-width: var(--i-button--bo-wi); border-style: var(--i-button--bo-st); border-color: var(--i-button--bo-co); border-radius: calc(var(--i-button--bo-ra) * 1px); box-shadow: var(--i-button--bo-sh); vertical-align: baseline; } /* Fallback */ @supports not (color: color-mix(in srgb, red, red)){ .ipsButton, .ipsButtonGroup{ --i-button-hover--ba-co: var(--i-button--ba-co); } } .ipsButton, .ipsButtonGroup, .ipsButtonGroup__button{ display: inline-flex; align-items: center; justify-content: center; } .ipsButtonGroup{ flex-wrap: wrap; align-items: stretch; } .ipsPageHeader .ipsButtonGroup{ display: flex; } .ipsButtonGroup__button{ flex: 1 1 auto; } .ipsButton, .ipsButtonGroup__button{ gap: 0 .6em; color: var(--i-button--co); cursor: pointer; font-size: var(--i-button--fo-si, inherit); font-weight: var(--i-button--fo-we); line-height: var(--i-button--li-he, 1); min-width: 44px; padding: var(--i-button--pa-bl) var(--i-button--pa-in); /* position: relative; */ /* This causes the "Save" button to overlap the auto-complete menu while editing the Poll widget */ text-align: center; text-decoration: none !important; text-transform: var(--i-button--te-tr, none); touch-action: manipulation; } /* Flex gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsButton > :not(:first-child), .ipsButtonGroup__button > :not(:first-child){ margin-inline-start: .6em; } } /* Links are sometimes placed inside div.button, such as on the "Manage Followed Content" page */ .ipsButton a{ color: inherit; } .ipsButton svg, .ipsButtonGroup__button svg{ width: auto; height: 1em; } .ipsButton:active{ transform: translateY(1px); } @media (any-hover:hover){ .ipsButton:hover, .ipsButtonGroup__button:hover{ background-color: var(--i-button-hover--ba-co); } } .ipsButtonGroup > *{ display: flex; flex: 1 1 auto; } .ipsButtonGroup > *:first-child, .ipsButtonGroup > *:first-child .ipsButtonGroup__button{ border-start-start-radius: max(0px, var(--i-button--bo-ra) - 1px); border-end-start-radius: max(0px, var(--i-button--bo-ra) - 1px); } .ipsButtonGroup > *:last-child, .ipsButtonGroup > *:last-child .ipsButtonGroup__button{ border-start-end-radius: max(0px, var(--i-button--bo-ra) - 1px); border-end-end-radius: max(0px, var(--i-button--bo-ra) - 1px); } .ipsButtonGroup > * + *{ border-inline-start: 1px solid transparent; border-color: color-mix(in srgb, var(--i-button--co) 15%, transparent); } @media (max-width: 767px){ .ipsButtonGroup > .ipsResponsive_hidePhone + *{ border-inline-start-width: 0; } } .ipsButtonGroup .ipsButtonGroup__button{ margin: calc(var(--i-button--bo-wi) * -1); border: var(--i-button--bo-wi) solid transparent; background-clip: padding-box; } .ipsButtonGroup .ipsButtonGroup__button--active{ --i-outline-color: var(--i-secondary); background: var(--i-secondary); color: var(--i-secondary-contrast); border: 1px solid transparent; border-color: color-mix(in srgb, var(--i-color_root) 30%, transparent); } .ipsButton__segment{ flex-grow: 0; padding: 0 .85em; border-inline-start: 1px solid transparent; border-color: color-mix(in srgb, currentColor 15%, transparent); display: flex; align-items: center; align-self: stretch; margin-top: calc(var(--i-button--pa-bl) * -.4); margin-bottom: calc(var(--i-button--pa-bl) * -.4); margin-inline-end: calc(var(--i-button--pa-in) * -1); margin-inline-start: calc(var(--i-button--pa-in) - .6em); } .ipsButton--text{ --i-button--co: var(--i-co); --i-outline-color: var(--i-button--co); --i-button-hover--ba-co: color-mix(in srgb, var(--i-button--co) 5%, transparent); } .ipsButton--inherit, .ipsButton--follow:not(.ipsButton--follow-active){ --i-outline-color: var(--i-button--co); --i-button--co: currentColor; --i-button--bo-co: transparent; --i-button--ba-co: color-mix(in srgb, var(--i-button--co) 10%, transparent); --i-button-hover--ba-co: color-mix(in srgb, var(--i-button--co) 15%, transparent); } .ipsButton--primary{ --i-button--ba-co: var(--i-primary-button--ba-co); --i-button--co: var(--i-primary-button--co); } .ipsButton--secondary{ --i-button--ba-co: var(--i-secondary); --i-button--co: var(--i-secondary-contrast); } .ipsButton--positive{ --i-button--ba-co: var(--i-color_positive); --i-button--co: hsl(0 0% 100%); } .ipsButton--negative{ --i-button--ba-co: var(--i-color_negative); --i-button--co: hsl(0 0% 100%); } .ipsButton--soft{ --i-outline-color: currentColor; --i-button--ba-co: var(--i-background_1); --i-button-hover--ba-co: color-mix(in srgb, var(--i-button--co) 3%, var(--i-button--ba-co)); --i-button--bo-co: color-mix(in srgb, var(--i-button--co) 20%, transparent); --i-button--bo-sh: hsl(0 0% 0% / .06) 0px 2px 3px; background-clip: padding-box; } .ipsButton--overlay{ --i-button--co: hsl(0 0% 100%); --i-button--ba-co: hsl(0 0% 0% / .4); --i-button-hover--ba-co: hsl(0 0% 0% / .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Automatic contrast for certain elements */ :is(.ipsButton--inherit, .ipsButton--text):where(:not(.ipsBox *, .ipsDialog *, .ipsWidget *)){ --i-button--co: var(--i-color_contrast, currentColor); } .ipsButton--follow-active{ --i-button--ba-co: var(--i-secondary); --i-button--co: var(--i-secondary-contrast); } .ipsButton--share, .ipsButton--promote{ /* --i-button-hover--ba-co: color-mix(in srgb, var(--i-button--co) 5%, transparent); */ } .ipsButton[disabled], .ipsButton[aria-disabled="true"], .ipsButton--disabled{ filter: grayscale(1) opacity(60%); pointer-events: none; cursor: not-allowed; } .ipsButton--ghost{ border-color: currentColor; border-color: color-mix(in srgb, var(--i-button--co) 20%, transparent); } @media (any-hover:hover){ .ipsButton--ghost:hover{ border-color: color-mix(in srgb, var(--i-button--co) 40%, transparent); } } /* Follow buttons */ [data-controller="core.front.core.followButton"]{ display: contents; } .ipsButton--follow{ padding: 0; gap: 0; /* cursor: default; pointer-events: none; */ } .ipsButton--follow > *{ display: flex; gap: .6em; padding: var(--i-button--pa-bl) var(--i-button--pa-in); color: inherit; } .ipsButton--follow a{ pointer-events: auto; /* Necessary for full width Follow buttons */ flex: 1 1 auto; justify-content: center; } .ipsButton--follow a:first-child{ border-start-start-radius: inherit; border-end-start-radius: inherit; } .ipsButton--follow a:last-child{ border-start-end-radius: inherit; border-end-end-radius: inherit; } @media (any-hover:hover){ .ipsButton--follow-active{ --i-button-hover--ba-co: var(--i-button--ba-co); } .ipsButton--follow-active a:hover{ background-color: color-mix(in srgb, currentColor 10%, transparent); } } .ipsButton--follow .ipsButton__segment{ margin: 0; padding: var(--i-button--pa-bl) calc(var(--i-button--pa-in) * .7); flex: 0 0 auto; } /* Larger size */ .ipsButton--large, .ipsButtons--large, .ipsButtons--main{ --i-button--pa-bl: 1.2em; --i-button--pa-in: 1.8em; } .ipsButtonGroup.ipsButtons--large{ --i-button--pa-in: .8em; } .ipsButton--small, .ipsButtons--small{ --i-button--pa-bl: .8em; --i-button--pa-in: 1.2em; --i-button--fo-si: .85em; } .ipsButton--tiny, .ipsButtons--tiny{ --i-button--pa-bl: .4em; --i-button--pa-in: 1.2em; --i-button--fo-si: .85em; } .ipsButtons--main{ justify-content: flex-end; } @media (max-width: 700px){ .ipsButtons--main{ --i-button--pa-bl: .9em; --i-button--pa-in: .9em; } } .ipsButtons--margin{ margin-top: var(--i-sp_block); margin-bottom: var(--i-sp_block); } .ipsButton--wide{ width: 100%; } /* Icon button */ .ipsButton--icon{ --i-button--pa-in: .75em; } /* Dropdown icon in buttons */ .ipsMenuCaret{ flex: 0 0 auto; align-self: center; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; font-style: normal; font-size: .8em; opacity: .7; } .ipsMenuCaret::before{ content: "\f0d7"; } .ipsButton[aria-expanded="true"] .ipsMenuCaret::before{ content: "\f0d8"; } /* Move "Submit Post" button to end */ .ipsButton--form-submit{ margin-inline-start: auto; } /* Social buttons */ .ipsSocial { color: #fff; display: flex; align-items: stretch; /* Overwrite default Safari styles */ font-weight: 600; border-radius: min(var(--i-design-radius), var(--i-button--bo-ra)); overflow: hidden; width: 100%; text-align: center; box-shadow: inset color-mix(in srgb, var(--i-co) 20%, transparent) 0px 0px 0px 1px; } @media (any-hover:hover){ .ipsSocial:hover{ filter: brightness(1.07); } } .ipsSocial__icon { display: grid; place-content: center; flex: 0 0 auto; width: 2.6em; /* Needed to prevent text from squashing */ background: hsl(0 0% 0% / .2); font-size: 1.2em; } .ipsSocial__icon svg{ fill: currentColor; height: 1em; } .ipsSocial__icon img { max-width: 1em; } .ipsSocial__text { padding: calc(1px + var(--i-button--pa-bl)) var(--i-button--pa-in); flex: 1 1 auto; line-height: 1; } .ipsSocial--microsoft { background-color: #008b00; } .ipsSocial--facebook { background-color: #3a579a; } .ipsSocial--twitter { background-color: #00abf0; } .ipsSocial--linkedIn { background: #007eb3; } .ipsSocial--google { background-color: #4285F4; } .ipsSocial--internal { background-color: #008b00; }]]> *{ flex: 0 0 auto; flex-basis: min( 100%, clamp( var(--i-basis), (100% - (var(--i-column-gap) * (var(--i-carousel--show) - 1))) / var(--i-carousel--show), 100% ) ); scroll-snap-align: start; } .ipsCarousel > *:last-child{ scroll-snap-align: end; } .ipsCarousel:has(:focus-visible):focus-within > *:not(:focus-within){ scroll-snap-align: none; } /* Navigation buttons */ .ipsCarouselNav{ display: flex; justify-content: center; } :is(.ipsBox__header, .ipsWidget__header) .ipsCarouselNav{ margin: -2em auto; margin-inline-end: -0.8em; } /* Add space between carousel and controls, unless the carousel already has padding */ :where(.ipsCarousel:not(.ipsCarousel--padding, .ipsCarousel--images) + .ipsCarouselNav, .ipsCarouselNav + .ipsCarousel:not(.ipsCarousel--padding, .ipsCarousel--images)){ margin-top: 2em; } /* If the carousel needs padding, the bottom navigation probably needs a space too */ :where(.ipsCarousel--padding + .ipsCarouselNav){ margin-bottom: 1em; } .ipsCarouselNav__button{ display: grid; place-content: center; min-height: max(34px,2em); min-width: max(34px,2.5em); border-radius: min(var(--i-design-radius), 6px); color: var(--i-co); touch-action: manipulation; } @media (any-hover:hover){ .ipsCarouselNav__button:hover{ background: color-mix(in srgb, var(--i-co) 4%, transparent); } } :is([dir="ltr"] [data-carousel-arrow="prev"], [dir="rtl"] [data-carousel-arrow="next"]) .fa-ips::before{ content: "\f104"; } :is([dir="ltr"] [data-carousel-arrow="next"], [dir="rtl"] [data-carousel-arrow="prev"]) .fa-ips::before{ content: "\f105"; } @media (min-width: 768px){ .ipsCarouselNav--overlay{ --i-co: hsl(0 0% 100%); position: absolute; top: 50%; transform: translateY(-50%); left: 1em; right: 1em; justify-content: space-between; pointer-events: none; margin-top: 0 !important; z-index: 2; } .ipsCarouselNav--overlay .ipsCarouselNav__button{ pointer-events: auto; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background: hsl(0 0% 0% / .3); } } /* ---------------- - Thumbnail carousel: Used for images of different sizes such as Download screenshots ---------------- */ .ipsCarousel--images{ --_height: 160px; min-height: 1em; } .ipsCarousel--images > *{ flex: 0 0 auto; max-width: 100%; } /* Force image to be correct height */ .ipsCarousel--images a{ display: block; } .ipsCarousel--images :is(.ipsThumb, .ipsFigure){ aspect-ratio: var(--i-ratio, auto); height: var(--_height); } /* Safari fix */ .ipsCarousel--images img{ width: auto; } .ipsCarousel--images .ipsFigure:has(video){ aspect-ratio: 16/9; }]]> .ipsColorSchemeChanger{ flex: 0 0 auto; display: flex; gap: 1px; } .ipsColorSchemeChanger button{ display: grid; place-content: center; width: 2.8em; height: 2.8em; border-radius: min(var(--i-design-radius), 4px); } .ipsColorSchemeChanger button:hover{ background-color: hsl(0 0% 100% / .1); background-color: color-mix(in srgb, currentColor 10%, transparent); } .ipsColorSchemeChanger button[aria-current]{ background-color: hsl(0 0% 100% / .2); background-color: color-mix(in srgb, currentColor 20%, transparent); } .ipsColorSchemeChanger [aria-current] :is(.fa-lightbulb, .fa-moon){ font-weight: bold; } /* Hide if the setting says so */ [data-ips-theme-setting-change-scheme="0"] [data-controller="core.front.core.colorScheme"]{ display: none; } .ipsAttachment_dropZoneSmall_info { margin-inline-start: 0; margin-top: 7px; } */ /* SERVICE FIELDS */ #eOriginalText textarea { height: 200px !important; } .ipsImageAttach_controls { /* position: absolute; top: 5px; inset-inline-end: 5px; z-index: 2; opacity: 1; transition: .2s all linear; */ } .ipsAttach .ipsAttach_title { max-width: 100%; text-overflow: ellipsis; overflow: hidden; margin-top: .7em; font-weight: 600; color: var(--i-color_hard); } .ipsAttach .ipsAttach_title + p { color: var(--i-color_soft); font-size: .9em; } .ipsAttach:not(.ipsAttach_done) [data-role="preview"] { opacity: 0.5; } /* Stock replies */ /* v5 todo: Is this used? */ .ipsStockReplies_menu { border-radius: 0px; height: 250px; overflow-y: auto; } .ipsStockReplies_row.i-padding_2 { padding-inline-start: 1.5em; } .ipsStockReplies_row:hover { cursor: pointer; background: var(--i-background_2); } .ipsStockReplies_content .ipsLoading { height: 250px; } /* My Media */ .cMyMedia{ flex: 1 1 auto; display: flex; flex-direction: column; } .cMyMedia__align{ display: contents; } .cMyMedia [data-role="status"] { } .cMyMedia .ipsColumns{ flex: 1 1 auto; } .cMyMedia .ipsColumns__primary{ height: 100%; overflow: auto; } .cMyMedia_controls{ flex: 0 0 auto; } .cMyMedia [data-role="myMediaContent"] { overflow-y: auto; }]]> *{ grid-area: 1/1; } .ipsCoverPhoto__container { background-color: var(--i-background_6); aspect-ratio: 4; position: relative; overflow: hidden; border-radius: inherit; transition: all 0.3s ease-in-out; border-radius: var(--i-box--bo-ra); min-height: 160px; max-width: 100%; } .ipsCoverPhoto__container::after{ content: ''; position: absolute; inset: 0; border: 1px solid currentColor; opacity: .3; border-radius: inherit; pointer-events: none; } /* Expanded */ .ipsCoverPhoto--expanded .ipsCoverPhoto__container{ aspect-ratio: var(--coverPhoto--ratio, auto); min-height: 0; } /* Expand cursors */ .ipsCoverPhoto__image[data-action="toggleCoverPhoto"]{ cursor: zoom-in; } .ipsCoverPhoto--expanded .ipsCoverPhoto__image[data-action="toggleCoverPhoto"]{ cursor: zoom-out; } /* Cover Photo dropdown menu items: The JS requires clicks on 'a', not 'span' or FA icon */ .ipsMenu--coverPhoto :is(span, i){ pointer-events: none; } /* Remove edit button from widgets */ .cWidgetContainer .ipsCoverPhoto [id^="elEditPhoto_"]{ display: none; } .ipsCoverPhoto__image { height: 100%; width: 100%; object-fit: cover; object-position: 50% max(0%, min(var(--offset, 50) * 1%, 100%)); user-select: none; } /* Fix reversed alignment bug in Firefox */ @supports(-moz-osx-font-smoothing: grayscale){ .ipsCoverPhoto__image{ object-position: 50% min(0%, max(var(--offset, 50) * 1%, 100%)); } } /* Editing using scroll */ .ipsCoverPhoto--editing .ipsCoverPhoto__container{ overflow-y: auto; cursor: ns-resize; overscroll-behavior: contain; scrollbar-width: none; } .ipsCoverPhoto--editing .ipsCoverPhoto__container::-webkit-scrollbar { -webkit-appearance: none; width: 0px; } .ipsCoverPhoto--editing .ipsCoverPhoto__container::after{ content: none; } .ipsCoverPhoto--editing .ipsCoverPhoto__image{ position: static; display: block; height: auto; min-height: 100%; /* Ensure wide and short images work on mobile */; pointer-events: none; } .ipsCoverPhoto--editing [data-hideoncoveredit]{ display: none; } .ipsCoverPhoto__overlay-buttons { place-self: start end; margin: 10px; transition: opacity .3s linear; position: relative; display: flex; gap: 8px; } .ipsCoverPhoto--expanded .ipsCoverPhoto__overlay-buttons{ opacity: 0; pointer-events: none; } /* Coverphoto Footers */ .ipsCoverPhotoMeta{ display: flex; align-items: center; flex-wrap: wrap; gap: 1em; padding: 1em 2em; } /* Hide empty cover photo footers. These can occur if no footer is specified, since the wrapper still exists. Page Records are an example */ .ipsCoverPhotoMeta:not(:has(*)){ display: none; } .ipsCoverPhoto__avatar{ flex: 0 0 50px; position: relative; } .ipsCoverPhoto__buttons{ display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; } .ipsCoverPhoto__buttons > *, .ipsCoverPhoto__buttons .ipsButton{ flex-grow: 1; } .ipsCoverPhoto__title{ font-size: 1.6em; font-weight: 700; } .ipsCoverPhoto__title :is(h1, h2, h3, h4){ color: var(--i-color_hard); line-height: 1.2; } .ipsCoverPhoto__title a:not(.ipsBadge){ color: inherit; } .ipsCoverPhoto__title :is(h1, h2, h3, h4):not(:only-child){ display: inline; } :where(.ipsCoverPhoto__title > *){ margin-inline-end: .3em; } .ipsCoverPhoto__title-icon{ font-size: max(11px, .6em); margin-top: calc(1ex - 1cap); } .ipsCoverPhoto__subTitle{ font-weight: 500; color: var(--i-color_soft); } .ipsCoverPhoto__stats{ display: flex; flex-wrap: wrap; white-space: nowrap; gap: 1px; overflow: hidden; } .ipsCoverPhoto__stats li{ flex: 1 1 auto; position: relative; padding: .5em clamp(1em, 3vw, 2.5em); outline: 1px solid var(--i-background_3); } .ipsCoverPhoto__stats li:has(.ipsCoverPhoto__link):hover{ background: var(--i-background_2); } .ipsCoverPhoto__statTitle{ font-weight: 500; color: var(--i-color_soft); } /* Capitalize the first letter since some language strings are lowercase (Blogs) */ .ipsCoverPhoto__statTitle:first-letter{ text-transform: capitalize; } .ipsCoverPhoto__statValue{ color: var(--i-color_root); font-weight: 700; } .ipsCoverPhoto__link{ position: absolute; inset: 0; } @media (max-width: 979px){ .ipsCoverPhotoMeta{ padding: 1em; } .ipsCoverPhoto__titles{ flex: 999 1 auto; } .ipsCoverPhoto__buttons{ flex: 1 1 auto; } .ipsCoverPhoto__stats{ order: 1; flex: 1 1 100%; text-align: center; border: 1px solid var(--i-background_3); border-width: 1px 0 0 0; margin: 0 -1em -1em; } } @media (min-width: 980px){ .ipsCoverPhoto__avatar{ flex-basis: 120px; margin-bottom: -.5em; margin-inline-start: -.5em; margin-inline-end: .5em; align-self: flex-end; transition: flex-basis .3s linear; } .ipsCoverPhoto--expanded ~ .ipsCoverPhotoMeta .ipsCoverPhoto__avatar{ flex-basis: 70px; } .ipsCoverPhoto__avatar .ipsUserPhoto{ position: absolute; bottom: 0; left: 0; border: 3px solid var(--i-background_1); } .ipsCoverPhoto__titles{ margin-inline-end: 1.5em; } .ipsCoverPhoto__stats{ border-inline-start: 1px solid var(--i-background_3); } }]]> *{ padding: .6em; } :where(.ipsBox) .ipsButtonBar--top{ border-radius: var(--i-box--bo-ra) var(--i-box--bo-ra) 0 0; border-bottom-width: 1px; } :where(.ipsBox) .ipsButtonBar--bottom{ border-radius: 0 0 var(--i-box--bo-ra) var(--i-box--bo-ra); border-top-width: 1px; } /* Hide empty pagination. This prevents an empty gap when the bars wrap on mobiles */ .ipsButtonBar__pagination:not(:has(*)){ display: none; } .ipsButtonBar__end{ margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: .6em; } .ipsButtonBar__end .ipsButtonBar__mod{ display: contents; } @media (max-width: 767px){ .ipsButtonBar{ flex-direction: column; align-items: stretch; } .ipsButtonBar__pagination, .ipsButtonBar .ipsPagination{ align-self: stretch; } .ipsButtonBar__end{ order: -1; } .ipsPagination__next, .ipsPagination__last{ order: 1; } } @media (max-width: 500px){ .ipsButtonBar__end{ margin: 0; } /* If the pagination bar is visible, add a border to the filter bar to separate them visually */ .ipsButtonBar__pagination:not([hidden]) ~ .ipsButtonBar__end:not(:only-child){ border-bottom: 1px solid; border-bottom-color: color-mix(in srgb, currentColor 10%, transparent); } } /* ---------------- - Data filters ---------------- */ .ipsDataFilters{ flex: 1 1 auto; display: flex; } .ipsDataFilters + .ipsDataFilters{ margin-inline-start: .4em; } .ipsDataFilters > *{ flex-grow: 1; } /* Prevent the auto-check icon from expanding to full width in topics on mobiles */ .ipsDataFilters > li:has([data-ipsautocheck], [href="#elFolderSettings_menu"]){ flex-grow: 0; margin-inline-start: auto; } .ipsDataFilters__button{ height: 100%; display: flex; align-items: center; justify-content: center; gap: .5em; color: var(--i-co); padding: .8em 1.2em; text-decoration: none; text-transform: uppercase; border-radius: min(var(--i-design-radius), .3em); position: relative; /* For notification badge */ } /* Automatic contrast for some buttons (Eg. at the top of topics) */ .ipsDataFilters__button:where(:not(.ipsBox *, .ipsDialog *, .ipsWidget *)){ color: var(--i-color_contrast, var(--i-co)); } @media (any-hover:hover){ .ipsDataFilters__button:not(.ipsDataFilters__button--active):hover{ background-color: color-mix(in srgb, currentColor 8%, transparent); } } .ipsDataFilters__button--active{ --i-outline-color: var(--i-secondary); background-color: var(--i-secondary); color: var(--i-secondary-contrast); } /* ---------------- - Data Lists/tables ---------------- */ i-data{ display: block; container: ipsData / inline-size; } /* List */ .ipsData{ --i-data--padding: 1.3em; --i-data--cell-spacing: var(--i-data--padding); --i-data--icon-width: 40px; --i-data--latest--width: clamp(13em, 25%, 17em); --i-data--icon-ratio: 1; --i-data--icon-radius: min(var(--i-design-radius), 6px); --i-data--title: 1.08em; --i-data--border: 1px; --i-data--desc-truncate: 4; --i-data--display-latest-photo: none; /* Hide latest avatar by default */ --i-data--display-stats-icon: none; /* Hide stat icons by default */ --i-data--display-views: initial; /* Hide views on small UIs by default */ display: grid; } /* Replace basis variable with i-basis_x if a class is added */ .ipsData[class*="i-basis_"]{ --i-data--basis: var(--i-basis); } /* Widgets */ .ipsData--compact{ --i-data--padding: 1em; --i-data--cell-spacing: 1em; --i-data--icon-width: 32px; } /* Global data styles */ .ipsData__item{ container: ipsData__item / inline-size; gap: var(--i-data--cell-spacing); padding: var(--i-data--padding); border: 0px solid var(--i-data--bo-co); border-bottom-width: var(--i-data--border); display: flex; align-items: center; position: relative; /* Clickable rows */ isolation: isolate; /* Helpful to contain z-indexes with clickable rows */ } /* Flex gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsData__item > *{ margin: calc(var(--i-data--cell-spacing) / 2); } } .ipsData__item:where(:last-child){ border-bottom-width: 0; } /* Warning: used in Mod Cpanel > Reported content */ .ipsData__item--warning { --i-co: var(--i-color_moderated); background-color: var(--i-background_moderated); } .ipsData__item--warning, .ipsData__item:where(:has(+ .ipsData__item--assigned)){ border-color: color-mix(in srgb, var(--i-background_moderated), var(--if-light, black 8%) var(--if-dark, white 8%)); } /* Assigned */ .ipsData__item--assigned{ --i-co: var(--i-color_assigned); background-color: var(--i-background_assigned); --i-background_hover: color-mix(in srgb, var(--i-color_assigned) 3%, transparent); } .ipsData__item--assigned, .ipsData__item:where(:has(+ .ipsData__item--assigned)){ border-color: color-mix(in srgb, var(--i-background_assigned), var(--if-light, black 8%) var(--if-dark, white 8%)); } /* Selected */ :where(.ipsData__item:has(:is(.ipsInput, [data-role="moderation"]):checked)){ background-color: var(--i-background_selected); } .ipsData__item:has(:is(.ipsInput, [data-role="moderation"]):checked), .ipsData__item:where(:has(+ .ipsData__item :is(.ipsInput, [data-role="moderation"]):checked)){ border-color: color-mix(in srgb, var(--i-background_selected), var(--if-light, black 10%) var(--if-dark, white 8%)); } /* :has() fallback */ .ipsData__item--selected { background-color: var(--i-background_selected); } @supports (color: color-mix(in srgb, var(--x), transparent)){ :is(.ipsData__item--assigned, .ipsData__item--warning):where(:not(.ipsData__item--selected)){ color: var(--i-co); --i-color_soft: color-mix(in srgb, var(--i-co) 65%, transparent); --i-color_hard: color-mix(in srgb, var(--i-co), var(--if-light, black 15%) var(--if-dark, white 80%)); --i-color_root: var(--i-co); --i-link--co: var(--i-color_hard); --i-link-hover--co: var(--i-color_hard); } } .ipsData__item > *, .ipsData__content > *{ flex: 0 0 auto; } /* Extend content, or extend element if it's the only child */ .ipsData__content, .ipsData__main, .ipsData__item > :only-child{ flex: 1 1 100%; } /* Remove padding when ipsEntry is the only child. This happens often when viewing "Profile > See my activity" */ .ipsData__item:has( > .ipsEntry:only-child){ padding: 0; border-width: 0; display: block; } /* Center all icons/images */ .ipsData__icon{ text-align: center; position: relative; } /* Stacked user photos, for replies */ .ipsData__icon .ipsUserPhoto:has(~ .ipsUserPhoto){ transform: scale(.7); transform-origin: 0 0; } .ipsData__icon .ipsUserPhoto ~ .ipsUserPhoto{ position: absolute; bottom: 0; inset-inline-end: 0; transform: scale(.6); transform-origin: 100% 100%; outline: 4px solid var(--i-box--ba-co); } /* Image, used for thumbnails/cover photos. Stretches to full width in the grid UI */ .ipsData__image{ aspect-ratio: var(--i-data--icon-ratio); display: var(--i-data--display-image, grid); border-radius: var(--i-data--icon-radius); /* Trim border-radius of images */ overflow: hidden; /* Let icons use this as a container, for cqmin font-size */ container-type: size; /* This prevents the a:hover color from applying */ color: inherit; } .ipsData__image > *{ grid-area: 1/-1; } /* Adjust cover photos inside ipsData__image */ .ipsData__image .ipsCoverPhoto{ height: 100%; } .ipsData__image .ipsCoverPhoto__container{ min-height: 0; aspect-ratio: auto; } /* Make all child elements occupy full size */ .ipsData__image > i, .ipsData__image > .ipsIcon, .ipsData__image > .ipsNsfwOverlay{ width: 100%; height: 100%; border-radius: inherit; /* Adjust font-size for emoji and FA icons */ font-size: 50cqmin; line-height: 1; aspect-ratio: var(--i-data--icon-ratio); } /* Images */ .ipsData__image img, .ipsData__image video{ border-radius: inherit; width: 100%; height: 100%; object-fit: cover; } /* Emoji */ .ipsData__image .ipsIcon--emoji{ display: grid; place-content: center; /* Emoji should occupy the full width of the column */ font-size: 100cqmin; height: 100%; /* Safari fix */ } .ipsData__image .ipsIcon--fa{ display: grid; place-content: center; } /* Avatars inside ipsData__image, eg Most Contributions widget */ .ipsData__image .ipsUserPhoto{ border-radius: inherit; aspect-ratio: var(--i-data--icon-ratio); } /* Remove pseudo element */ .ipsData__image .ipsUserPhoto::after{ content: none; } /* "No image" icon */ .ipsData__image > i{ display: grid; place-content: center; font-family: "Font Awesome 6 Free"; font-weight: var(--i-data--fallback-icon-weight, 900); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; background: var(--i-background_3); } .ipsData__image > i::before{ content: var(--i-data--fallback-icon, "\f1c5"); opacity: .2; } /* FA icons have a background which changes based on read/unread status */ .ipsData--category [data-ips-read] .ipsData__image .ipsIcon--fa, .ipsData--category [data-ips-unread] .ipsData__image .ipsIcon--fa{ --i-co: var(--i-featured, var(--i-secondary)); aspect-ratio: var(--i-data--icon-ratio); display: grid; place-content: center; border-radius: var(--i-design-radius); background: color-mix(in srgb, var(--i-co) 10%, transparent); color: var(--i-co); } /* Add a solid background color to unread content */ .ipsData--category [data-ips-unread] .ipsData__image .ipsIcon--fa{ --i-co: var(--i-featured, var(--i-primary)); background: var(--i-co); color: #fff; } /* Default icons for forums */ .ipsData__item--discussions{ --i-data--fallback-icon: "\f15c"; --i-data--fallback-icon-weight: 400; } .ipsData__item--password{ --i-data--fallback-icon: "\f023"; } .ipsData__item--redirect{ --i-data--fallback-icon: "\f061"; } /* Badges on images (Tags overview) */ .ipsData__image .ipsBadge{ align-self: start; justify-self: end; margin: 10px; background-color: oklch(from var(--i-badge) min(.44, l) min(.065, c) h); color: hsl(0 0% 100%); z-index: 3; /* Higher than nsfw overlay */ } .ipsData__image .ipsBadge--icon{ font-size: 13px; } .ipsData__item > .ipsIndicator{ /* Thinner column for indicators */ flex: 0 0 1.2em; /* Improve alignment */ align-self: baseline; line-height: 1lh; order: 10; align-self: center; } .ipsData__item[style*="--i-featured:"] .ipsIndicator{ color: inherit; } .ipsData__item[data-ips-read] > .ipsIndicator:not(.ipsIndicator--participated), .ipsData__item > .ipsIndicator--read:not(.ipsIndicator--participated){ display: none; } :where(.ipsData__icon a){ display: block; text-decoration: none !important; } .ipsData__icon:has(.ipsDateBlock){ --i-data--icon-width: 3em; } /* Hide images based on configuration */ .cWidgetContainer--noImages .ipsData__icon, .cWidgetContainer--noImages .ipsData__image { display: none !important; } /* Indicator cells */ .ipsData__icon--indicator{ width: 2em; /* Same size as avatars, so "Moved" icon aligns neatly */ } /* Thumbnails */ .ipsData__icon .ipsThumb{ aspect-ratio: var(--i-data--icon-ratio); } .ipsData__image, .ipsData__item .ipsFigure{ flex-basis: var(--i-data--icon-width); } .ipsData--cart-dropdown .ipsData__image, .ipsLayout__secondary-column .ipsData__item > .ipsFigure{ flex-basis: 3.5em; } /* Avatars */ .ipsData__icon .ipsUserPhoto{ width: 28px; } /* Events */ .ipsData__item > .ipsCalendarDate{ flex-basis: clamp(34px, 10%, 3.2em); align-self: start; } /* Experimental. This might be a poor decision */ .ipsData__main > :last-child{ margin-bottom: 0 !important; } .ipsData__title{ font-size: var(--i-data--title, 1em); font-weight: 500; color: var(--i-color_hard); overflow-wrap: break-word; line-height: 1.3; /* Clear floated items such as ratings or badges */ display: flow-root; } /* Faint "read" notifications */ .ipsData__item--notification[data-ips-read] .ipsData__title a{ color: var(--i-color_soft); font-weight: 500; } .ipsData__title :where(a:not(.ipsBadge, .ipsBadges *, .ipsMiniPagination *)){ color: inherit; } /* Bold titles for unread content */ [data-ips-unread] .ipsData__title{ font-weight: bold; } /* Align children inside .ipsData__title */ :where(.ipsData__title > :is(h1, h2, h3, h4, h5):not(:only-child)){ display: inline; } :where(.ipsData__title > :not(:last-child)){ margin-inline-end: .4em; } :where(.ipsData__title :is(.ipsBadges, .ipsBadge--prefix), .ipsData__title > .ipsBadge){ vertical-align: .15em; } /* Float badges in certain layouts */ :is(.ipsData--wallpaper, .ipsData--grid, .ipsData--mini-grid) .ipsData__title .ipsBadges{ float: inline-end; margin: 0; } .ipsData__desc, .ipsData__meta{ --i-co: var(--i-color_soft); --i-link--co: var(--i-co); --i-link-hover--co: var(--i-co); --i-link-hover--te-de: underline; color: var(--i-co); } /* Remove empty meta tags? This can happen with the Featured Content widget */ .ipsData__meta:empty{ display: none; } :where(.ipsData__meta){ font-size: 1em; /* Sometimes __meta uses elements */ } /* Always show long dates in meta */ .ipsData__meta .ipsTime__long{ display: revert; } .ipsData__meta .ipsTime__short{ display: none; } /* Optionally hide the meta bar (if it contains the original author) in small UIs when the "last" column exists */ .ipsData__item:has(.ipsData__last) .ipsData__meta:has(.ipsUsername){ /* display: var(--i-data--display-meta, block); */ } /* Prefixes can be added to meta */ .ipsData__meta .ipsBadges{ margin-inline-end: .6em; } :where(.ipsData__desc){ margin-top: .2em; } /* Forum catgories */ .ipsData__category{ color: var(--i-color_soft); font-weight: 600; font-size: .92em; margin-bottom: .4em; } :where(.ipsData__category) a{ color: inherit; } /* Truncate simple descriptions using line-clamp since the text in this element is just a string */ .ipsData__desc:not(.ipsData__desc--all){ display: var(--i-data--display-desc, -webkit-box); -webkit-line-clamp: var(--i-data--desc-truncate); -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } /* If a

tag exists, it's likely .ipsRichText. Truncate these descriptions using max-height to prevent issues with paragraphs, images, etc */ .ipsData__desc:has(p):not(.ipsData__desc--all){ display: var(--i-data--display-desc, flow-root); max-height: calc(var(--i-data--desc-truncate) * 1.5em); max-height: calc(var(--i-data--desc-truncate) * 1lh); } /* Fade out ipsData__desc if it contains large elements since they can't be truncated. A faded image looks better than a solid crop */ .ipsData__desc:where(:has(img, iframe, blockquote):not(.ipsData__desc--all)){ mask-image: linear-gradient(#000 calc((var(--i-data--desc-truncate)) * 1lh), transparent calc((var(--i-data--desc-truncate) + 2) * 1lh)); } .ipsData__desc[data-truncate-expanded="true"]{ display: var(--i-data--display-desc, block); max-height: none !important; overflow: visible; mask-image: none; } /* Convert br elements into a space if it's a simple truncation */ .ipsData__desc:not(.ipsData__desc--all, [data-truncate-expanded="true"]) > br{ content: ""; margin-inline-end: 1em; } /* Hide empty descriptions */ .ipsData__desc:-moz-only-whitespace{ display: none; } .ipsData .ipsTags{ font-size: max(.7em, 10px); /* Tags and prefixes should use the same font-size */ margin: .6em 0; } .ipsData__groups{ display: var(--i-data--display-groups, flex); flex-wrap: wrap; gap: .1em .4em; line-height: 1; /* Remove empty space below icons */ } @container (min-width: 750px){ .ipsData__groups{ display: var(--i-data--display-groups, grid); } } .ipsData__groups img{ max-height: 1.2em; } .ipsData__groups .ipsBadge{ vertical-align: top; } .ipsData__container-title{ font-weight: 600; color: var(--i-featured); } /* ---------------- - Stats ---------------- */ .ipsData__stats{ color: var(--i-color_soft); display: var(--i-data--display-stats, flex); align-items: center; flex-wrap: wrap; gap: 0 clamp(1em, 6cqw, 1.8em); } /* Flex gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsData__stats > :not(:first-child){ margin-inline-start: 1.5em; } } /* If stats include an icon, lower its opacity (Eg. Album widget) */ .ipsData__stats .fa-regular:not(.ipsRating *), .ipsData__stats .fa-solid:not(.ipsRating *){ opacity: .4; font-size: .9em; margin-inline-end: .25em; } /* Darker and bolder stats for featured and tables */ :where(:is(.ipsData--table, .ipsData--featured) .ipsData__stats [data-stattype*="comments"]:first-child){ color: var(--i-color_root); } /* Sometimes stats can be linked (Comments in Page listings) */ .ipsData__stats :where(a:not([class])){ color: inherit; } /* Hide a stats list item if it contains a hidden reaction component. This is used in expanded topic lists */ .ipsData__stats > li:has(.ipsReactOverview--none){ display: none; } /* ---------------- - Stat icons, typically shown in small UIs ---------------- */ .ipsData__stats-icon{ display: var(--i-data--display-stats-icon, inline-flex); align-items: baseline; } /* Icon */ .ipsData__stats-icon::before{ content: var(--_i-icon, "\e473"); font-weight: 900; font-family: "Font Awesome 6 Free"; font-style: normal; font-size: .9em; opacity: .6; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-variant: normal; text-rendering: auto; margin-inline-end: .4em; } .ipsData__stats [data-stattype*="comments"]{ --_i-icon: "\f075" } .ipsData__stats [data-stattype*="views"]{ --_i-icon: "\f06e" } .ipsData__stats [data-stattype="price"]{ --_i-icon: "\f07a" } .ipsData__stats [data-stattype="purchases"]{ --_i-icon: "\f291" } .ipsData__stats [data-stattype="downloads"]{ --_i-icon: "\f019" } .ipsData__stats [data-stattype="images"]{ --_i-icon: "\f083" } .ipsData__stats [data-stattype="image_comments"]{ --_i-icon: "\f302" } .ipsData__stats [data-stattype="album_comments"]{ --_i-icon: "\f075" } /* Value */ .ipsData__stats-icon[data-stat-value]::after{ content: attr(data-stat-value); } /* Remove the label if icons are shown */ .ipsData__stats-icon[data-stat-value] ~ .ipsData__stats-label{ display: var(--i-data--display-stats-label, inline); } /* If the stats are inside __main (usually under description or meta), add a space */ :where(.ipsData__main :is(.ipsData__desc, .ipsData__meta) ~ .ipsData__stats){ margin-top: .6em; } .ipsData__stats-hot { background: #da621a; color: #fff; font-size: max(.9em, 12px); font-weight: 500; display: inline-block; padding: 0 .4em; position: relative; vertical-align: middle; border-radius: 4px; white-space: nowrap; } .ipsData__stats-hot::before { content: attr(data-text); text-transform: uppercase; font-size: .8em; opacity: 0.6; margin-inline-end: .4em; vertical-align: .1em; } @container (max-width: 500px){ /* Use short dates for small UI */ :where(.ipsData__item) .ipsTime__long{ display: none; } :where(.ipsData__item) .ipsTime__short{ display: revert; } /* Hide 0 comment stats */ /* .ipsData__stats [data-stattype*="comments"][data-v="0"]{ display: none; } */ /* Hide views by default, with option of restoring */ .ipsData__stats [data-stattype*="views"]{ display: var(--i-data--display-views, block); } } /* ---------------- - Active users ---------------- */ /* Hide element if it's empty, otherwise it occupies space in the mobile UI due to the grid gap */ .ipsData [data-role="activeUsers"]:empty{ display: none; } /* ---------------- - Latest content - Inline by default, with a stacked version for large tables ---------------- */ .ipsData__last{ display: var(--i-data--display-latest, flex); gap: .7em; align-items: center; } /* Gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsData__last > :not(:first-child){ margin-inline-start: .7em; } } :where(.ipsData__last) a{ color: inherit; } .ipsData__last .ipsUserPhoto{ flex: 0 0 auto; width: 1.4em; /* Width is required to fix premature wrapping bug */ display: var(--i-data--display-latest-photo, block); } /* Inline latest content */ .ipsData__last-text{ flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 .4em; align-items: baseline; } /* Flex gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsData__last-text > :not(:first-child){ margin-inline-start: .6em; } } :where(.ipsData__last-primary){ color: var(--i-color_hard); /* Trim long topic titles */ max-height: 2lh; overflow: hidden; } /* Bold "last" and "comment stat" for unread entries */ :where([data-ips-unread] :is(.ipsData__last-primary, .ipsData__stats [data-stattype*="comments"]:first-child)){ color: var(--i-color_hard); font-weight: 600; } /* Add middot between latest author and date */ .ipsData__last-text:has(> :nth-child(2))::after{ content: "\00B7"; } :where(.ipsData__last-secondary){ font-size: 1em; /* Reset font-size for elements */ color: var(--i-color_soft); order: 1; } /* Improved alignment for stats/latest */ .ipsData__extra{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em 1em; margin-top: .75em; } /* Move stats to end and flip them so most prominent one is at the end */ :where(.ipsData__extra .ipsData__stats){ order: 1; flex-direction: row-reverse; } /* Sometimes stats can have a checkbox (Downloads Grid UI). Ensure it's always last in the list */ :where(.ipsData__extra .ipsData__stats > li:has(.ipsInput)){ order: -1; } /* And then move rating to the start */ :where(.ipsData__extra .ipsData__stats li:has(.ipsRating)){ order: 3; } @container (max-width: 750px){ /* Smaller font-size in small UI */ .ipsData__meta, .ipsData__extra{ font-size: max(11px, .92em); } .ipsData--category .ipsData__extra{ margin-top: .5em; } .ipsData--category .ipsData__last-primary{ font-weight: 600; } /* Soft "last content" in small entries UI */ :is(.ipsData--table, .ipsData--minimal, .ipsData--mini-grid) [data-ips-read] .ipsData__last-primary{ color: var(--i-color_soft); } /* If a username exists in the meta area and if there are more than 0 comments, we can assume that the username in the "last" area has replied to the content. Prepend a "replied icon" */ :where(.ipsData__item:has(.ipsData__meta .ipsUsername):not(:has([data-stattype*="comments"][data-v="0"]))) .ipsData__last-primary::before{ content: "\f3e5"; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; font-size: .8em; color: var(--i-color_soft); opacity: .7; margin-inline-end: .5em; } } /* Mod checkbox */ .ipsData__mod .ipsInput{ display: flex; } /* Snippet */ .ipsData--snippet-topic-list{ --i-data--icon-width: 3em; } .ipsData--snippet-topic-list .ipsData__icon{ align-self: flex-start; } .ipsData--snippet-topic-list .ipsData__desc{ margin-top: .8em; } .ipsData--snippet-topic-list .ipsData__last .ipsUserPhoto{ width: 1.2em; } /* ---------------- - Pages Fields ---------------- */ .ipsData__fields{ margin-top: 1em; display: flex; flex-wrap: wrap; gap: 5px; } .ipsData__fields:not(:has(li)){ display: none; } /* ---------------- - Data statuses ---------------- */ /* Statuses */ .ipsModerated:not(:has([data-role="moderation"]:checked)){ --i-co: var(--i-color_moderated); --i-link--co: var(--i-color_moderated); --i-link-hover--co: var(--i-color_moderated); --i-color_root: var(--i-color_moderated); --i-color_soft: var(--i-color_moderated); --i-color_hard: var(--i-color_moderated); background-color: var(--i-background_moderated) !important; border-color: var(--i-background_moderated); border-color: color-mix(in srgb, var(--i-color_moderated) 60%, transparent); color: var(--i-co) !important; outline: 4px solid color-mix(in srgb, var(--i-color_moderated) 15%, transparent); } .ipsData__item:has(+ .ipsModerated [data-role="moderation"]:not(:checked)){ border-color: color-mix(in srgb, var(--i-color_moderated) 60%, transparent); } .ipsModerated:not(:has([data-role="moderation"]:checked)) *{ --i-co: var(--i-color_moderated) !important; } /* :has polyfill */ /* This version means that "selected moderated" entries still have red text */ @supports not selector(a:has(b)){ .ipsModerated:not(.ipsSelected, .ipsEntry--selected){ --i-co: var(--i-color_moderated); --i-link--co: var(--i-color_moderated); --i-link-hover--co: var(--i-color_moderated); --i-color_root: var(--i-color_moderated); --i-color_soft: var(--i-color_moderated); --i-color_hard: var(--i-color_moderated); background-color: var(--i-background_moderated) !important; border-color: var(--i-background_moderated); border-color: color-mix(in srgb, var(--i-background_moderated), var(--if-light, black) var(--if-dark, white) 12%); color: var(--i-co) !important; } .ipsModerated:not(.ipsSelected, .ipsEntry--selected) *{ --i-co: var(--i-color_moderated) !important; } } :where(.ipsBox, .ipsWidget, .ipsDialog) .ipsModerated{ outline-width: 0 !important; } .ipsSelected{ background-color: var(--i-background_selected) !important; } /* Sublists */ .ipsSubList{ display: var(--i-data--display-subforums, flex); flex-wrap: wrap; gap: 5px; margin-top: 1em; font-size: 0.9em; font-weight: 500; color: var(--i-color_root); } .ipsSubList a{ color: inherit; display: block; text-decoration: none !important; padding: .4em .9em; border-radius: min(var(--i-design-radius), 5px); background-color: color-mix(in srgb, currentColor 10%, transparent); } .ipsSubList a::before{ content: "\e185"; font-family: var(--i-font-awesome); font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; vertical-align: 1px; margin-inline-end: .5em; font-size: .8em; } /* Display 'read' status only to members */ [data-ips-member] .ipsSubList__item--read{ color: var(--i-color_soft); } [data-ips-member] .ipsSubList__item--read a::before{ font-weight: 400; } @media (any-hover:hover){ .ipsSubList a:hover{ background-color: color-mix(in srgb, currentColor 15%, transparent); } } /* Rating */ .ipsData .ipsRating{ display: var(--i-data--display-rating, flex); margin: .6em 0; } /* ---------------- - Contextual data tables ---------------- */ /* Entry lists: Topic list, etc */ @container (min-width: 768px){ .ipsData--table{ --i-data--title: 1.1em; } } /* Messenger */ .ipsData__item--messenger{ --i-data--cell-spacing: .8em; --i-data--padding: 1.2em; --i-data--icon-width: 26px; } /* Active */ .ipsData__item--active { --i-co: var(--i-primary-contrast); --i-color_root: var(--i-primary-contrast); --i-color_soft: color-mix(in srgb, var(--i-co) 80%, transparent); --i-color_hard: var(--i-co); background: var(--i-primary) !important; color: var(--i-co); } @container (max-width: 750px){ /* Relocate mod checkbox in some tables to left side on mobiles */ .ipsData__item--snippet .ipsData__mod{ position: absolute; bottom: var(--i-data--padding); inset-inline-start: var(--i-data--padding); } .ipsData--snippet-topic-list .ipsData__mod{ align-self: end; } } /* ---------------- - Tables ---------------- */ .ipsData--table{ --i-data--padding: clamp(1em, 2cqw, 1.3em); --i-data--desc-truncate: 2; } @supports not (padding: 1cqw){ .ipsData--table{ --i-data--padding: 1em; } } /* Use root text color for entries with no new content */ :where([data-ips-member] :is(.ipsData--table, .ipsData--minimal, .ipsData--mini-grid) [data-ips-read]) .ipsData__title{ color: var(--i-color_root); font-weight: 550; } /* Large */ @container (min-width: 750.1px){ /* This makes the Albums widget look bad. Is it needed? */ .ipsData--table:not(.ipsData--category) :is(.ipsData__image, .ipsData__icon){ /* align-self: start; */ } .ipsData--table .ipsData__content{ display: contents; } .ipsData--table .ipsData__main{ flex: 1 1 auto; } .ipsData--table .ipsData__extra{ display: contents; } .ipsData--table .ipsData__stats{ flex: 0 0 11ch; display: grid; align-content: center; justify-items: end; /* Aligns text and ratings to the end */ /* The below prevents unintended wrapping in certain scenarios, such as: 0 replies */ min-width: fit-content; margin-inline-end: 1em; /* Overwrite the "small" design, which moves stats to the end */ order: unset; } /* If group badges exist, add a basis to stats so they vertically align neatly */ .ipsData--table:has(.ipsData__groups) .ipsData__stats{ flex: 0 0 10ch; } /* Large stats: Place the stats in a row, with each value/label stacked vertically */ .ipsData--table .ipsData__stats--large{ display: var(--i-data--display-stats, flex); gap: 2em; line-height: 1.1; flex: 0 0 auto; text-align: center; } :where(.ipsData--table .ipsData__stats--large li){ display: grid; gap: .25em; } :where(.ipsData--table .ipsData__stats--large span:first-of-type){ font-size: 1.3em; font-weight: 550; color: var(--i-color_root); } /* v5 todo: Relocate live activity to meta position? */ .ipsData--table .ipsData__stats .ipsLiveActivity{ margin-inline-end: -.5em; } .ipsData--table .ipsData__last{ flex: 0 0 var(--i-data--latest--width); } /* Stacked "latest" column in large tables */ .ipsData--table .ipsData__last .ipsUserPhoto{ width: 2em; } .ipsData--table .ipsData__last-text{ display: grid; } /* Remove middot/replied icon */ .ipsData--table .ipsData__last-text::after{ display: none; } /* Slightly bolder and harder text */ :where(.ipsData--table [data-ips-read] .ipsData__last-primary){ font-weight: 500; color: var(--i-color_root); } } /* Small */ @container (max-width: 750px){ .ipsData--table{ /* --i-data--display-meta: none; */ --i-data--display-stats-icon: initial; --i-data--display-stats-label: none; } /* Align the image to the start */ .ipsData--table :is(.ipsData__image, .ipsFigure, .ipsData__icon){ align-self: start; } /* Space out all "main" elements when stacked */ .ipsData--table.ipsData--category .ipsData__content{ display: grid; gap: .5em; } /* Floated assigned badges */ .ipsData--table .ipsBadge--assigned{ float: inline-end; margin-inline-end: 0; } .ipsData--table .ipsData__extra{ margin-top: .4em; } .ipsData--table .ipsData__mod{ align-self: end; } /* Stack the last into in category tables, in small contexts. The primary slot often contains long topic titles, and when they wrap, the middot is placed poorly. So lets just keep everything on 2 rows with no middots */ .ipsData--category .ipsData__last-text{ /* gap: 0 1em; */ } } /* Categories */ .ipsData--category{ --i-data--icon-width: 32px; --i-data--latest--width: clamp(16em, 33%, 22em); --i-data--title: 1.2em; --i-data--display-latest-photo: initial; --i-data--desc-truncate: 99; } /* Ensure indicators in categorys are always centered, since the text is always centered here */ .ipsData--category .ipsData__item > .ipsIndicator{ align-self: center; } /* Coloured titles */ @supports (color: hsl(from var(--i) h s 30%)) and (color: oklch(from red l c h)){ [data-ips-scheme="light"] .ipsData--category .ipsData__item[style*="--i-featured"] .ipsData__title, [data-ips-scheme="light"] .ipsCategoryWithFeed__item[style*="--i-featured"] .ipsData--forumFeedViewParent .ipsData__title{ color: oklch(from var(--i-featured) min(.4, l) c h); } [data-ips-scheme="dark"] .ipsData--category .ipsData__item[style*="--i-featured"] .ipsData__title, [data-ips-scheme="dark"] .ipsCategoryWithFeed__item[style*="--i-featured"] .ipsData--forumFeedViewParent .ipsData__title{ color: oklch(from var(--i-featured) max(.85, l) c h); } } /* ---------------- - Wallpaper ---------------- */ .ipsData--wallpaper{ --i-data--basis: 290px; --i-data--padding: 1.4em; --i-data--radius: var(--i-design-radius); --i-data--title: 1.2em; --i-data--gap: 1em; --i-data--max: 99; --i-data--min: 1; --i-data--icon-ratio: auto; --i-data--wallpaper-height: min(110%, 400px); --i-data--display-desc: none; --i-data--display-stats-icon: initial; --i-data--display-stats-label: none; grid-template-columns: repeat(auto-fill, minmax( min( 100% / var(--i-data--min) - var(--i-data--gap), max( var(--i-data--basis), 100% / var(--i-data--max) - var(--i-data--gap) ) ) , 1fr )); gap: var(--i-data--gap); padding: var(--i-data--gap); } :where(.ipsWidget i-data:last-child .ipsData--wallpaper) { overflow: hidden; border-bottom-left-radius: var(--i-box--bo-ra); border-bottom-right-radius: var(--i-box--bo-ra); } /* If the gap is removed, change the scrollbar to white so it's easier to see */ .cWidgetContainer--isWidget[style*="--i-widget--gap:0px"] .ipsData--wallpaper.ipsData--carousel{ scrollbar-color: hsl(0 0% 100% / .5) transparent; } /* If placed within a widget, let the widget settings control the variables */ :where(.cWidgetContainer--isWidget) .ipsData--wallpaper { --i-data--basis: var(--i-widget--size, 290px); --i-data--gap: var(--i-widget--gap, 1em); } .ipsData--wallpaper .ipsData__item{ display: grid; border-width: 0; padding: 0; overflow: hidden; border-radius: min(var(--i-data--radius), var(--i-data--gap)); /* Wallpaper grids with 0px gap should have 0px radius */ background: var(--i-background_dark); /* Added here to ensure the background appears even if images/icons don't exist */ } .ipsData--wallpaper .ipsData__item::before{ content: ""; display: block; padding-top: var(--i-data--wallpaper-height); grid-area: 1/1; z-index: -5; } .ipsData--wallpaper .ipsData__item > *{ grid-area: 1/1; } /* Flex gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsData--wallpaper .ipsData__item > *{ margin: 0; } } .ipsData--wallpaper .ipsData__image, .ipsData--wallpaper .ipsFigure{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -3; /* Let the ipsLinkPanel hover sit on top */ border-radius: 0; } .ipsData--wallpaper .ipsData__image > i{ aspect-ratio: 1.3; color: hsl(0 0% 100%); background-color: transparent; font-size: 30cqmin; /* This prevents a misaligned icon when a Wallpaper UI uses a "wide-width carousel" */ width: 100%; max-height: 100%; } .ipsData--wallpaper .ipsData__content{ --i-color_soft: hsl(0 0% 100% / .8); --i-color_hard: hsl(0 0% 100%); --i-color_root: hsl(0 0% 100%); --i-link--co: var(--i-color_hard); --i-link-hover--co: var(--i-color_hard); color: var(--i-color_root); align-self: end; position: relative; z-index: 1; display: grid; gap: .6em; padding: var(--i-data--padding); padding-top: 6em; -webkit-mask-image: -webkit-linear-gradient(#0000, #000 6em); mask-image: linear-gradient(#0000, #000 6em); background: hsl(220 22% 10% / 0.7); } /* Make prefixes visible */ .ipsData--wallpaper .ipsBadge--prefix{ background: #fff; color: #111; } /* Brighten the category name, since dark colors won't have enough contrast */ .ipsData--wallpaper .ipsContainerTitle{ color: inherit; } .ipsData--wallpaper .ipsData__meta{ flex: 1 1 auto; } .ipsData--wallpaper .ipsRating{ margin: 0; } .ipsData--wallpaper .ipsData__extra{ margin-top: 0; } .ipsData--wallpaper .ipsData__stats-icon::before, .ipsData--wallpaper .ipsData__stats :is(.fa-regular, .fa-solid){ opacity: 1; } /* Move mod checkbox to top right */ .ipsData--wallpaper .ipsData__mod{ place-self: start end; padding: 1em; } /* Add outline to selected wallpaper items */ .ipsData--wallpaper .ipsData__item:has(:is(.ipsInput, [data-role="moderation"]):checked){ outline: 2px solid var(--i-primary); outline-offset: 2px; } @container (max-width: 500px){ .ipsData--wallpaper .ipsData__meta{ /* --i-data--display-meta: none; */ } } /* ---------------- - Mini grid ---------------- */ .ipsData--mini-grid{ --i-data--basis: 330px; --i-data--cell-spacing: 1em; --i-data--padding: 1.2em; --i-data--border: 1px; --i-data--icon-ratio: 1; --i-data--icon-width: 4em; --i-data--icon-radius: min(5px, var(--i-design-radius)); --i-data--gap: var(--i-data--border); --i-data--title: 1em; --i-data--display-meta: none; --i-data--display-desc: none; --i-data--display-stats-icon: initial; --i-data--display-stats-label: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--i-data--basis)), 1fr)); gap: var(--i-data--gap); padding: max(0px, var(--i-data--gap) - 1px); overflow: hidden; } /* If placed within a widget, let the widget settings control the variables */ :where(.cWidgetContainer--isWidget) .ipsData--mini-grid { --i-data--basis: var(--i-widget--size, 300px); --i-data--gap: max(1px, var(--i-widget--gap) + var(--i-data--border)); /* We need at least 1px gap for grids */ } .ipsData--mini-grid.ipsData--carousel{ grid-template-rows: repeat(3, auto); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(var(--i-data--basis), 80%); } .ipsData--mini-grid .ipsData__item{ border-width: 0; outline: var(--i-data--border) solid var(--i-background_3); } .ipsData--mini-grid .ipsData__title{ /* Truncate long titles. Handy for thinner blocks like carousels and grids */ max-height: 2.9em; max-height: 2lh; overflow: hidden; } .ipsData--mini-grid .ipsRating{ margin: .4em 0; } /* Hide "views" stats */ .ipsData--mini-grid [data-stattype*="views"]{ display: none; } /* Make the last content soft, otherwise it's a little too much... */ .ipsData--mini-grid .ipsData__last-primary{ color: var(--i-color_soft); } /* ---------------- - Grid ---------------- */ .ipsData--grid{ --i-data--basis: 320px; --i-data--icon-ratio: 16/10; --i-data--icon-width: 100%; --i-data--radius: 0px; --i-data--border: 1px; --i-data--gap: 0px; --i-data--max: 99; --i-data--min: 1; --i-data--padding: 1.2em; --i-data--cell-spacing: 1.2em; --i-data--desc-truncate: 3; --i-data--display-stats-icon: initial; --i-data--display-stats-label: none; --i-data--display-latest-photo: initial; grid-template-columns: repeat(auto-fill, minmax( min( 100% / var(--i-data--min) - var(--i-data--border), max( var(--i-data--basis), 100% / var(--i-data--max) - var(--i-data--border) ) ) , 1fr )); gap: max(1px, var(--i-data--gap)); padding: var(--i-data--gap); overflow: hidden; } .ipsData--grid:has(.ipsData__image){ --i-data--padding: 1.5em; --i-data--title: 1.15em; } .ipsData--grid.ipsData--category{ --i-data--title: 1.3em; } /* Inherit border-radius */ :where(.ipsWidget__content > .ipsData--grid:only-child){ border-bottom-left-radius: var(--i-box--bo-ra); border-bottom-right-radius: var(--i-box--bo-ra); } /* If placed within a widget, let the widget settings control the variables */ :where(.cWidgetContainer--isWidget) .ipsData--grid{ --i-data--basis: var(--i-widget--size, 320px); --i-data--gap: var(--i-widget--gap, var(--i-data--border)); } /* Add border using outline so we can fall down to a 1px border */ .ipsData--grid .ipsData__item{ align-items: stretch; border-width: 0; outline: var(--i-data--border) solid var(--i-data--bo-co); border-radius: var(--i-data--radius); /* Always stack grid items? Add this to the legacy code if it's moved to a :has() selector */ flex-direction: column; } /* Cover photos */ .ipsData--grid .ipsData__image{ background: var(--i-background_3); flex: 0 0 auto; margin: calc(var(--i-data--padding) * -.3); margin-bottom: 0; } /* If the __image element contains an image, hide the fallback icons */ .ipsData--grid .ipsData__image img ~ :is(.ipsIcon, i:not[class]){ display: none !important; } /* Emoji and icons */ .ipsData--grid .ipsData__image > :is(.ipsIcon, i:not[class]){ font-size: 50cqmin; } /* We need flex here so we can push the latest reply to the bottom */ .ipsData--grid .ipsData__content{ display: flex; flex-direction: column; gap: .6em; } /* Flex gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsData--grid .ipsData__content > :not(:first-child){ margin-top: .6em; } } .ipsData--grid .ipsData__main{ margin-bottom: auto; flex: 0 0 auto; } /* Truncate titles since they can be too long otherwise */ .ipsData--grid .ipsData__title{ max-height: 3.9em; max-height: 3lh; overflow: hidden; } /* Increase margin of descriptions in grid categories */ .ipsData--grid .ipsData__desc{ margin-top: .6em; } /* Push everything down after description/meta */ .ipsData--grid .ipsData__desc, .ipsData--grid .ipsData__meta{ margin-bottom: auto; } /* If the cell contains both desc and meta, remove the auto margin from meta */ .ipsData--grid .ipsData__desc ~ .ipsData__meta{ margin-bottom: 0; } /* Inline stats */ .ipsData--grid .ipsData__stats { text-align: start; gap: 0.3em 1.5em; font-weight: 450; } /* Reposition mod checkbox to top right */ .ipsData--grid .ipsData__mod{ position: absolute; padding: 6px; top: 5px; inset-inline-end: 5px; background: var(--i-box--ba-co); border-radius: 6px; } /* ---------------- - Minimal ---------------- */ .ipsData--minimal{ --i-data--padding: 1em; --i-data--cell-spacing: 1em; --i-data--icon-width: 30px; --i-data--display-desc: none; --i-data--display-stats-icon: initial; --i-data--display-stats-label: none; } .ipsData--minimal .ipsData__item{ container-type: normal; } .ipsData--minimal .ipsData__title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } .ipsData--minimal .ipsData__extra{ margin-top: .2em; } .ipsData--minimal .ipsData__stats{ gap: .7em 2em; } /* Flex gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsData--minimal .ipsData__stats > :not(:first-child){ margin-inline-start: 2em; } } .ipsData--minimal .ipsData__extra .ipsData__stats{ order: 1; } /* Hide certain elements */ .ipsData--minimal .ipsData__fields, .ipsData--minimal .ipsBadge--prefix, .ipsData--minimal .ipsTags, .ipsData .ipsRating, .ipsData--minimal .ipsTime__long{ display: none; } .ipsData--minimal .ipsTime__short{ display: revert; } /* If placed within a widget, let the widget settings control the variables */ :where(.cWidgetContainer--isWidget) .ipsData--carousel.ipsData--minimal { --i-data--basis: var(--i-widget--size, 300px); } /* Minimal carousels always have a 1px border between items */ .ipsData--carousel.ipsData--minimal { gap: 1px; } .ipsData--carousel.ipsData--minimal .ipsData__item{ border-width: 0; outline: 1px solid var(--i-background_3); } /* ---------------- - Featured ---------------- */ .ipsData--featured{ --i-data--icon-width: min(180px, 20%); --i-data--title: clamp(1.1em, 1em + 0.7cqw, 1.5em); --i-data--padding: clamp(1.1em, 3cqw, 2.2em); /* Reset gap and basis, since these should always be 0px and 100% for Featured */ --i-data--gap: 1px; --i-data--basis: 100%; } @supports not (padding: 1cqw){ .ipsData--featured{ --i-data--title: 1.2em; --i-data--padding: 1em; } } @container (max-width: 500px){ .ipsData--featured .ipsData__meta{ /* --i-data--display-meta: none; */ } :where(.ipsData--featured .ipsData__title .ipsBadges){ float: inline-end; } } /* Show stats icons if they exist on small UI */ @container (max-width: 600px){ .ipsData--featured{ --i-data--display-stats-icon: initial; --i-data--display-stats-label: none; } } /* Display more of the description on large UI */ @container (min-width: 800px){ .ipsData--featured{ --i-data--desc-truncate: 6; --i-data--display-latest-photo: initial; } } .ipsData--featured .ipsData__item{ align-items: start; } .ipsData--featured .ipsData__content{ align-self: center; display: flex; flex-direction: column; } .ipsData--featured .ipsData__desc{ --i-co: var(--i-color_root); margin: .5em 0; } @container (min-width: 600px){ .ipsData--featured .ipsData__content{ align-self: stretch; align-content: space-between; gap: 1em; } .ipsData--featured .ipsTags{ margin-top: 1.5em; } .ipsData--featured .ipsData__extra{ display: flex; flex-wrap: wrap; gap: 1em; margin-top: auto; } .ipsData--featured .ipsData__stats { order: 1; margin-inline-start: auto; flex-direction: row-reverse; } } /* ---------------- - Align stats/latest correctly in certain designs ---------------- */ :where(.ipsData--wallpaper, .ipsData--grid, .ipsData--mini-grid) .ipsData__extra{ margin-top: .3em; } /* ---------------- - Carousel ---------------- */ :where(.ipsData--carousel){ --i-data--basis: 100%; /* Give carousels 100% width by default, but allow other classes like .ipsData--grid to overwrite them */ /* Set defaults, but let other classes overwrite, such as .ipsData--grid */ --i-data--gap: 0px; --i-data--border: 1px; } /* If placed within a widget, let the widget settings control the variables */ :where(.cWidgetContainer--isWidget .ipsData--carousel){ --i-data--basis: var(--i-widget--size, 100%); --i-data--gap: var(--i-widget--gap, 0px); } .ipsData--carousel{ --i-data--min: 1; --i-data--max: 4; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min( (100% - (var(--i-data--gap) * (var(--i-data--min) - 1))) / var(--i-data--min), clamp( var(--i-data--basis), (100% - (var(--i-data--gap) * (var(--i-data--max) - 1))) / var(--i-data--max), 100% ) ) ; gap: max(1px, var(--i-data--gap)); overflow: auto; overscroll-behavior-x: contain; /* Snap padding should cater for the border, otherwise the border of the "out of view" element is visible */ scroll-padding-inline: max(0px, var(--i-data--gap)); scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--i-co) 40%, transparent) transparent; } /* Carousel items */ .ipsData--carousel .ipsData__item{ scroll-snap-align: start; border-width: 0; } .ipsData--carousel .ipsData__item:last-child{ scroll-snap-align: end; } .ipsData--carousel:has(:focus-visible):focus-within .ipsData__item:not(:focus-within){ scroll-snap-align: none; } .ipsData--carousel ~ .ipsCarouselNav{ border-top: 1px solid var(--i-background_3); padding: 1em; } /* Non-JS moderation bar */ .ipsData__modBar{ background: var(--i-background_4); padding: var(--i-sp_2); display: flex; justify-content: flex-end; gap: var(--i-sp_2); } /* ---------------- - Link panels ---------------- */ .ipsLinkPanelWrap{ isolation: isolate; position: relative; } .ipsLinkPanel{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Inset isn't used here as it prevents the linkpanel from working in ancient browsers */ z-index: -1; border-radius: inherit; grid-column: initial; /* Ensure ipsLinkPanel isn't restricted by any grid areas (such as .ipsData--grid) */ } /* Hide panels if disabled via settings */ [data-ips-theme-setting-link-panels="0"] .ipsLinkPanel{ display: none; } [data-ips-theme-setting-link-panels="1"] .ipsLinkPanel ~ *:not(a, button, input, textarea, [data-ipsTooltip], iframe, abbr, select, summary){ pointer-events: none; } [data-ips-theme-setting-link-panels="1"] .ipsLinkPanel ~ * :is(a, button, input, textarea, [data-ipsTooltip], iframe, abbr, select, summary){ pointer-events: auto; } @media (any-hover:hover){ :where([data-ips-theme-setting-link-panels="1"] .ipsLinkPanel ~ *) a:where(:hover){ text-decoration: underline; } } .ipsLinkPanel span{ clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } @media (any-hover:hover){ :hover > .ipsLinkPanel{ background: var(--i-background_hover); } } /* Use the text color for container title underlines */ a:has(.ipsContainerTitle){ text-decoration: none; } @media (any-hover:hover){ .ipsContainerTitle:hover{ text-decoration: underline; } } /* Apply border-radius to last row in certain situations */ :where(.ipsWidget, .ipsBox:not(:has(.ipsButtonBar--bottom)) .ipsData__item:last-child .ipsLinkPanel){ border-radius: 0 0 var(--i-box--bo-ra) var(--i-box--bo-ra); } /* ---------------- - Hide elements in certain widgets/sizes ---------------- */ .ipsData--featured :is([data-show-on]:not([data-show-on~="featured"]), [data-hide-on~="featured"]), .ipsData--grid :is([data-show-on]:not([data-show-on~="grid"]), [data-hide-on~="grid"]), .ipsData--minimal :is([data-show-on]:not([data-show-on~="minimal"]), [data-hide-on~="minimal"]), .ipsData--mini-grid :is([data-show-on]:not([data-show-on~="mini-grid"]), [data-hide-on~="mini-grid"]), .ipsData--table :is([data-show-on]:not([data-show-on~="table"]), [data-hide-on~="table"]), .ipsData--wallpaper :is([data-show-on]:not([data-show-on~="wallpaper"]), [data-hide-on~="wallpaper"]){ display: none !important; } @container (max-width: 750px){ /* Hide pagination from the topic feed when it's small */ .ipsData--topic-feed-widget:is(.ipsData--table, .ipsData--minimal, .ipsData--mini-grid) .ipsMiniPagination{ display: none; } } /* ---------------- - Adjust certain widgets ---------------- */ /* Increase snippet in postFeed */ .ipsData--widget-forums-postFeed.ipsData--table{ --i-data--desc-truncate: 10; } .ipsData--widget-forums-postFeed.ipsData--table .ipsData__icon{ align-self: start; } .ipsData--widget-forums-postFeed .ipsData__meta{ margin-top: .5em; } /* Loading skeletons. Eg, used in Events Overview and Fluid forum view */ @keyframes ipsData__item--loading { 0% { opacity: .5 } } .ipsData__item--loading :is(.ipsData__icon, .ipsData__image, .ipsData__title, .ipsData__meta, .ipsData__desc){ background: var(--i-background_3); animation: ipsData__item--loading 1s infinite alternate; } .ipsData__item--loading .ipsData__title{ height: 1em; height: 1lh; max-width: min(20ch, 70%); } .ipsData__item--loading .ipsData__meta{ height: .7em; height: .7lh; max-width: min(32ch, 90%); margin-top: .3em; } .ipsData__item--loading .ipsData__desc{ height: 3em; height: 3lh; margin-top: .5em; display: block; /* Ensure description is shown, since it is hidden due to .ipsData__desc:-moz-only-whitespace */ } .ipsData__item--loading .ipsData__stats::before, .ipsData__item--loading .ipsData__stats::after, .ipsData__item--loading .ipsData__last::before, .ipsData__item--loading .ipsData__last::after{ content: ''; display: block; background: var(--i-background_3); height: .8em; height: .8lh; width: 9ch; margin: .1lh 0; } .ipsData__item--loading .ipsData__stats::after{ width: 8ch; } /* ---------------- - Legacy browsers ---------------- */ @supports not (aspect-ratio: 1){ .ipsData__image::before{ content: ''; display: block; padding-top: 100%; } .ipsData--grid .ipsData__image::before{ padding-top: 56.25%; } .ipsData__image img{ position: absolute; } } @supports not (container-type: inline-size){ .ipsData__image{ position: relative; } .ipsData__stats{ gap: 0 2em; } .ipsData--table{ --i-data--padding: 1.3em; } }]]> *) { width: 100%; } .ipsEditor__toolbar-select-option[data-current="yes"] { background-color: var(--if-light, var(--i-background_2)) var(--if-dark, var(--i-background_4)); } .ipsEditor__toolbar-select-option[data-current="yes"]:is(:hover, :focus-visible) { background-color: var(--if-light, var(--i-background_3)) var(--if-dark, var(--i-background_5)); } .ipsEditor__tiptap-wrap { display: grid; border-radius: var(--i-box--bo-ra); grid-template-rows: auto 1fr; } .tiptap.ProseMirror { /* tiptap injects position:relative, so we need z-index: 2 to make panels appear above z-indexed siblings of the editor */ z-index: 2; padding: 1.5em; min-height: 100px; /* The editor content won't even be visible if the editor isn't wrapped inside the ipsEditorV5 element */ outline: none; width: 100%; height: 100%; } .ipsEditor__toolbar { order: -1; /* Ensure the toolbar is always the first item */ display: flex; gap: 2px; flex-wrap: wrap; /* We do this to create a new stacking context. This makes sure that fixed positioning of anchored children (e.g. dropdowns) is effectively RELATIVE, so scrolling and stuff will make those children automatically reposition */ transform: translate(0); } /* Main toolbar */ .ipsEditor__toolbar--main { position: -webkit-sticky; position: sticky; top: var(--i-sticky-offset, 0px); z-index: 3; background: var(--i-box--ba-co); color: var(--i-color_root); border-bottom: 2px solid var(--i-background_3); margin: 0 .4em; padding: .4em 0; } /* Prevent iOS zoom */ @media (hover:none) and (pointer:coarse){ .ipsEditor .ipsRichText{ font-size: max(16px, 1em); } } [data-role="editor-messages-container"] { position: sticky; bottom: 0.25em; z-index: 2; /* Need this so the messages (e.g. autosave message) appear above the content inside the editor */ } /* Mobile selection toolbar */ @media(max-width: 979px) { [data-role="editor-messages-container"] { bottom: calc(var(--i-mobileFooter--he) + 0.25em); } } .ipsEditor__toolbar-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: .5em; border-radius: min(5px, var(--i-design-radius)); min-width: 2.4em; min-height: 2.4em; width: max-content; padding: 0 .7em; user-select: none; } .ipsEditor__toolbar--nested .ipsEditor__toolbar-item { flex-grow: 1; } @media (any-hover:hover){ .ipsEditor__toolbar-item:is(:hover, :focus-visible):not(.ipsEditor__toolbar-item--unavailable, .ipsEditor__toolbar-item--no_pointer_events), .ipsEditor__toolbar-select-option--active { background-color: color-mix(in srgb, currentColor 10%, transparent); } } .ipsEditor__toolbar-item--active, .ipsEditor__toolbar-select-option--active:is(:hover, :focus-visible){ background-color: color-mix(in srgb, currentColor 25%, transparent); } @media (any-hover:hover){ .ipsEditor__toolbar-item--active:is(:hover, :focus-visible):not(.ipsEditor__toolbar-item--no_pointer_events) { background-color: color-mix(in srgb, currentColor 35%, transparent); } } .ipsEditor__toolbar-item > svg, .ipsEditor__toolbar-item [data-role="currentValue"] > svg{ width: 1em; height: 1em; display: inline; max-width: revert; min-width: revert; } .ipsEditor__toolbar-item > [data-role="currentValue"] { display: contents; } .ipsEditor__toolbar-label { clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* Select menus */ .ipsEditor__toolbar-select { cursor: pointer; position: relative; } .ipsEditor__toolbar-select > .ipsEditor__toolbar-select-option { display: contents; /* Let the parent element handle alignment */ } .ipsEditor__toolbar-select-options, .ipsEditor__toolbar-select-options.ipsRichText, :where(.ipsEditor__toolbar-panel) { background: var(--i-dropdown--ba-co); color: var(--i-color_root); box-shadow: var(--i-dropdown--bo-sh); display: flex; flex-direction: column; flex-wrap: nowrap; position: absolute; z-index: calc(var(--ips-js-zindex-top) - 9); max-height: 200px; overflow-y: auto; } .ipsEditor__toolbar-select-option { flex: 0 0 auto; min-width: 150px; display: flex; align-items: center; justify-content: stretch; border-radius: 0; gap: 4px; padding: .5em 1em; } .ipsEditor__toolbar-select-option:focus-visible { outline: none; } /* Remove margins from "Heading previews" in dropdown menu */ .ipsEditor__toolbar-select-options :is(h1, h2, h3, h4, h5, h6){ margin: 0; } .ipsEditor__toolbar-select-options[data-panel-anchor="block"] > .ipsEditor__toolbar-select-option { width: 100%; } [data-tippy-root] { z-index: calc(var(--ips-js-zindex-top) - 10) !important; } :where(.tiptap .react-renderer) { display:contents; } /* Node view wrap stuff */ :where(.tiptap .react-renderer > [data-node-view-wrapper]) { width: fit-content; position: relative; display: inline-block; } :where(.tiptap .react-renderer.node-ipsBox > [data-node-view-wrapper]) { width:100%; display: flow-root; } .node-ipsBox .ipsRichTextBox > .react-renderer > :is(.ipsCode, .ipsQuote) { margin: 1em 1.3em; width: calc(100% - 2.6em); } /* Selected elements in editor (video, embed, etc) */ .ProseMirror-selectednode, .tiptap.ProseMirror .react-renderer:not(.ProseMirror-selectednode, .node-codeBlock, .node-ipsBox, .node-blockquote), .node-ipsEmbed { outline-color: var(--i-background_6); } .tiptap.ProseMirror .react-renderer:hover:not(.ProseMirror-selectednode, .node-codeBlock, .node-ipsBox, .node-blockquote) > [data-node-view-wrapper]:hover, :is(.ProseMirror-selectednode, .node-ipsEmbed) > [data-node-view-wrapper] { outline-width: 2px; outline-style: solid; outline-color: inherit; } .tiptap [data-node-view-wrapper][data-is-resizing] { outline: 2px solid var(--i-primary) !important; } .tiptap [data-node-view-wrapper][data-attachment-type="file"]:not(.ProseMirror-selectednode > *) { outline: none; } :is(.ipsRichTextBox, .ipsQuote_contents > *) > .node-codeBlock > pre { margin-block: 0; } .node-ipsEmbed:not(.ProseMirror-selectednode) { outline-color: var(--i-background_4); } .ProseMirror-selectednode { outline-color: var(--i-primary); } .ProseMirror-selectednode:not(.react-renderer) { outline: 2px solid var(--i-primary); } .tiptap .react-renderer:not(.react-renderer--no-indicators) :is(.ipsCode.ipsCode--nodeview-wrapper, .ipsQuote) { overflow: visible; } .react-renderer :is(iframe) { border-width: 0 !important; } .tiptap :is(p,ol,ul).ProseMirror-selectednode { outline-width:0px; } .tiptap :is(.node-blockquote, .node-ipsBox, .node-ipsEmbed) + *:not(#x) { margin-block-start: 1em; } .ipsEditor__create-sibling { --i-indicator-size: 20px; --i-font-size: calc(var(--i-indicator-size) * 0.55); --i-hz-offset: 1em; padding-inline-start: calc(var(--i-indicator-size) / 10); position: absolute; height: var(--i-indicator-size); width: var(--i-indicator-size); line-height: var(--i-font-size); font-size: var(--i-font-size); color: var(--i-primary-contrast); background: var(--i-primary); border-radius: 50%; z-index: 1; margin: -1px; /* The -1px centers the button along the 2px node outline */ } /* Leaving this here in case we need it. I've noticed some cases where the arrows are not centered, but this breaks the regular view */ /*.ipsEditor__create-sibling > .ipsEditor__create-sibling-arrow {*/ /* margin-inline-start: 0.5em;*/ /*}*/ .tiptap .react-renderer :is(.ipsEditor__node-options--media > .ipsEditor__toolbar-item--media-options, .ipsEditor__create-sibling, .ipsEditor__toolbar-item--escapeembed, .ipsEditor__toolbar-item--embeddimensions):not(.ipsEditor__node-options--open > *) { display: none; } :is(.react-renderer > [data-node-view-wrapper]:hover, .ProseMirror-selectednode > [data-node-view-wrapper]):not(.react-renderer--no-indicators > [data-node-view-wrapper]) > :is(.ipsEditor__node-options--media, .ipsEditor__create-sibling-wrapper, .ipsEditor__node-options--embed) > :is(.ipsEditor__toolbar-item--media-options, .ipsEditor__create-sibling, .ipsEditor__toolbar-item--escapeembed, .ipsEditor__toolbar-item--embeddimensions), .ipsEditor__node-options--media.ipsEditor__node-options--open > .ipsEditor__toolbar-item--media-options { display: flex; justify-content: center; align-items: center; } .tiptap [data-node-view-wrapper][data-is-resizing] :is(.ipsEditor__create-sibling-wrapper, .ipsEditor__node-options--media, .ipsEditor__node-options), .ipsEditor__nodewrap--narrow .ipsEditor__node-options--media:not(.ProseMirror-selectednode > [data-node-view-wrapper] > *) { display: none !important; } :is(.ipsEditor__toolbar-item--media-options, .ipsEditor__toolbar-item--escapeembed, .ipsEditor__toolbar-item--embeddimensions) { color: var(--i-primary-contrast); background: var(--i-primary); } :is(.ipsEditor__toolbar-item--media-options, .ipsEditor__toolbar-item--escapeembed, .ipsEditor__toolbar-item--embeddimensions):is(:hover, :active, :focus, :focus-visible, .ipsEditor__toolbar-item--active):not(#x), .ipsEditor__create-sibling:hover { color: var(--i-secondary-contrast); background: var(--i-secondary); } .ipsEditor__create-sibling--before { left: var(--i-hz-offset); top: calc(var(--i-indicator-size) * -0.5); transform: rotate(-90deg); transform-origin: center; } .ipsEditor__create-sibling--after { right: var(--i-hz-offset); bottom: calc(var(--i-indicator-size) * -0.5); transform: rotate(90deg); transform-origin: center; } [data-attachment-type="file"] { display: inline-block; } [data-attachment-type="file"] a { cursor: default; } .ipsEditor__node-hover-overlay { position: absolute; inset: 0; } /* The dropdown/popup panels */ .ipsEditor__toolbar-panel, .ipsEditor__toolbar--nested{ background: var(--i-dropdown--ba-co); border-radius: var(--i-dropdown--bo-ra); box-shadow: var(--i-dropdown--bo-sh); z-index: calc(var(--ips-js-zindex-top) - 9); padding: 5px; display: grid; grid-auto-flow: column; } :where(.ipsEditor__toolbar-panel) { padding: 0.5em 1em; } .ipsEditor__toolbar-panel label{ font-weight: 600; } .ipsEditor__toolbar-panel-row { display: flex; align-items: center; gap: 1em; } /* Without this, the inputs width collapses */ .ipsEditor__toolbar-panel-row .ipsInput{ width: revert; min-width: min(60vw, 200px); } /* The global messages */ .ipsEditor__global-messages { display: flex; flex-direction: column; gap: 0.5em; padding: 0.5em; } .ipsEditor__global-message { align-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: color-mix(in srgb, var(--i-background_dark) 80%, transparent); color: #fff; border-radius: min(var(--i-design-radius), 5px); display: flex; font-weight: 500; justify-content: space-between; padding: 0.5em 0.7em; } .ipsEditor__global-message :is(.far, .fa-regular, .fa-solid, .fas) { font-size: 1.2em; } .ipsEditor__autosave-clear { text-decoration: underline; color: inherit; } /* Box Support */ .ipsRichTextBox__nodeview-wrap summary.ipsRichTextBox__title { cursor: text; } .ipsRichTextBox__nodeview-wrap .ipsRichTextBox__title--empty::before { position: absolute; content: "Add a box title..."; opacity: 0.5; } /* Color options */ .ipsColorOptions__panel { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5em; padding: 0.5em; grid-auto-flow: row; } .ipsColorOptions__option { border-radius: 0.25em; height: 30px; width: 30px; background: var(--i-richtext-background-color); border: 2px solid; border-color: color-mix(in srgb, var(--i-richtext-background-color), var(--if-light, black 20%) var(--if-dark, white 30%)); } /* Add an eraser icon to the default text color option */ .ipsColorOptions__option[data-i-background-color="root"]::before{ content: "\f12d"; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; color: var(--i-background_1); display: block; text-align: center; opacity: .6; } /* Show no background for the "No highlighting" option */ #editorToolbarPanel_nested_highlight [data-i-background-color="root"]{ --i-richtext-background-color: var(--i-background_1); } #editorToolbarPanel_nested_highlight [data-i-background-color="root"]::before{ content: "\f00d"; color: var(--i-color_root); } .ipsEditor__toolbar-item--font-color { color: inherit; } .ipsEditor__toolbar-item--font-color:not([data-i-color="root"]){ color: var(--i-richtext-color); background: color-mix(in srgb, var(--i-richtext-color) 20%, transparent); } .ipsEditor__toolbar-item--box-color:not(#x) { border-bottom: 5px solid color-mix(in srgb, var(--i-richtext-color, var(--i-background_2)) 85%, var(--i-color_root)); padding-top: 5px; color: inherit; background-color: color-mix(in srgb, var(--i-richtext-color, var(--i-background_2)) 20%, var(--i-background_2)); } .ipsEditor__toolbar-item--box-color:not(#x)[data-i-color*="theme_"] { border-color: color-mix(in srgb, var(--i-richtext-color) 85%, var(--i-color_root)); background-color: var(--i-richtext-color); } /* Giphy Panel */ .ipsEditor__giphy-search { min-height: revert; padding: 0.5em; display: block; border-radius: var(--i-box--bo-ra); } .ipsEditor__giphy-search:focus-visible { outline-offset: calc(var(--i-outline-width) * -1); } .ipsEditor__giphy-panel { display: flex; flex-direction: column; padding: 0; max-height: 400px; width: 400px; max-width: 90vw; } .ipsEditor__giphy-panel > form { display: contents; } .ipsEditor__giphy-search{ margin: 7px; width: auto; } .ipsEditor__giphy-results { padding: 0.5em; padding-top: 0; overflow-y: auto; flex-grow: 1; min-height: 200px; --i-giphy-ratio: 16/9; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; } .ipsEditor__giphy-results-page{ display: contents; } .ipsEditor__giphy-results-page button{ aspect-ratio: var(--i-giphy-ratio); flex-grow: calc(10 * (var(--i-giphy-ratio))); flex-shrink: 1; flex-basis: calc(var(--i-giphy-ratio) * 90px); background: var(--i-background_3); } .ipsEditor__giphy-results-page img{ aspect-ratio: var(--i-giphy-ratio); width: 100%; } .ipsEditor__giphy-results h3 { display: block; align-self: center; flex-basis: 100%; text-align: center; } /* Restrict width of embedded content (iframes, etc) */ .tiptap .node-ipsEmbed:not([data-embed-type="og"]) > [data-node-view-wrapper]{ max-width: min(100%,var(--i-embed-max-width, 500px)); } .node-ipsEmbed:is([data-embed-type="og"]) [data-node-view-wrapper] { max-width:100%; border-radius: min(var(--i-design-radius), 6px); } .node-ipsEmbed:is([data-embed-type="og"]) [data-node-view-wrapper] [data-role="embed-node-view-content-wrap"] > :not(a, .ipsEmbeddedLink) { max-width:100%; border-radius: min(var(--i-design-radius), 6px); overflow: hidden; } .node-ipsEmbed:not(.ProseMirror-selectednode):is([data-embed-type="og"]) [data-node-view-wrapper] { outline-width:0; } .node-ipsEmbed [data-node-view-wrapper] > div > * { margin: 0 !important; } /* Disabled buttons */ .ipsEditor__toolbar-item--unavailable, .ipsEditor__toolbar button:disabled { pointer-events: none; opacity: .2; } .ipsEditor__toolbar-item--no_pointer_events { pointer-events: none; } /* The codeblock dropdown */ .ipsCode--nodeview-wrapper > .ipsEditor__toolbar { font-family: var(--i-font-family); cursor: default; } .ipsEditor__toolbar--nodeview:not(#x) { flex-wrap: nowrap; position:relative; } .ipsEditor__toolbar--nodeview:not(#x) > * { min-width: revert !important; } .ipsEditor__toolbar--nodeview .ipsEditor__toolbar-item { cursor: pointer; } .ipsEditor__toolbar--nodeview .ipsEditor__toolbar-panel { cursor: default; } /* The "code format" dropdown menu at the top of code blocks in the editor */ .ipsCode [data-role="toolbar"] > .ipsEditor__toolbar-item { display: block; width: fit-content; margin-bottom: 1em; position: sticky; left: 0; background: color-mix(in srgb, currentColor 15%, transparent); padding: 0.5em 0.9em; font-size: 0.7em; border-radius: min(var(--i-design-radius), 5px); font-family: var(--i-font-family); font-weight: 600; color: var(--i-color_soft); outline-width: 0; } .ipsCode .ipsEditor__toolbar-item:hover{ background: color-mix(in srgb, currentColor 25%, transparent); } /* The box tools */ [data-node-view-wrapper] .ipsEditor__node-options { align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.25em; position: absolute; top: 1em; right: 1em; transition: right 0.25s, top 0.25s; } [data-node-view-wrapper].ipsEditor__nodewrap--narrow .ipsEditor__node-options--media { right: calc( -1em - 30px); top: 0; } .ipsEditor__tiptap-wrap .ipsRichText summary::after, .ipsEditor__tiptap-wrap .ipsRichTextBox__title:not(.ipsRichTextBox--alwaysopen > .ipsRichTextBox__title)::after { display: none; } [data-node-view-content] > .ipsRichTextBox { overflow: visible; } .ipsEditor__toolbar-item--box-options { display: inline-grid; place-content: center; width: 2em; height: 2em; border-radius: 3px; } /* Clicking mentions does nothing */ .tiptap [data-mentionid] { cursor: default; } /* Hide Align/Width options on narrow screens */ @media(max-width: 767px) { [data-toolbar-item="boxwidth"], [data-panel-anchor="boxwidth"] { display: none; } @media (max-width: 499px) { [data-toolbar-item="boxalign"], [data-toolbar-item="imagealign"], [data-panel-anchor="boxalign"], [data-panel-anchor="imagealign"] { display: none; } } } /* Add a larger gap and prevent usernames from wrapping in @mentions menu */ .ipsEditor__toolbar-select-options--mentionSuggestions .ipsEditor__toolbar-select-option{ gap: 1em; } .ipsEditor__toolbar-select-options--mentionSuggestions .ipsEditor__toolbar-select-option .ipsUserPhoto{ width: 34px; } /* Quotes are expanded */ .tiptap .ipsQuote, .tiptap .ipsQuote_contents { min-height: revert; /*max-height: revert;*/ display: flow-root; } .tiptap img.ProseMirror-separator { width: revert !important; } .ipsEditor__link-options { max-height: none; overflow-y: hidden; } .ipsEditor__toolbar-panel--link { gap: 5px; display: grid; width: min(80vw, 350px); grid-template-columns: auto 3em; } .ipsEditor__toolbar-panel--link .ipsEditor__toolbar-panel-row { display: grid; grid-template-columns: 5ch 1fr; grid-column: 1; } .ipsEditor__toolbar-panel--link label{ text-align: end; } .ipsEditor__toolbar-panel--link [data-role="unlink"] { grid-row-start: 1; grid-column: 2; } :root { --i-editor-panel-zi: 1; /* z-index that panels in the editor use */ } .ipsEditor__toolbar-panel--link [data-role='unlink'].ipsEditor__remove-link--fullheight { grid-row-end: 3; } .ipsEditor__toolbar-panel--link [data-role="convert_to_embed"] { grid-row-start: 2; grid-column: 2; } .ipsEditor__link-panel-status { max-height: 1lh; grid-row: span 1; grid-column: span 2; text-align: end; font-size: 0.75em; padding: 0 calc(0.7em / 0.75); color: var(--i-color_positive); } .ipsEditor__link-panel-status [data-role=content] { transition: opacity 0.1s ease-in; } .ipsEditor__link-panel-status--processing [data-role=content] { opacity: 0; } .ipsEditor__close-link-panel { display: none; } /* On mobile, we show a check button */ @media(max-width: 767px) { .ipsEditor__close-link-panel { margin-top: 1em; display: flex; grid-row: span 1; grid-column: span 2; } .ipsEditor__link-panel-status { display: none; } } .ipsEditor__toolbar-panel--embed { max-width: 210px; grid-template-columns: 1fr; grid-auto-flow: row; position: revert; width: max-content; gap: 5px; } .ipsEditor__toolbar-panel--embed > * { gap: 5px; display: grid; grid-auto-flow: column; align-items: center; } .ipsEditor__toolbar-panel--embed > * > label { width: max-content; white-space: nowrap; } .ipsEditor__toolbar-panel--embed > * > .ipsInput { width: revert; flex-grow: 1; } /* Inline styles for the page builder */ .ipsEditor__toolbar--hovering:not(#x) { /*left: -1em;*/ width: 100%; margin-inline: 0; bottom: 20px; top: revert; } [data-role="toollist-wrap"] { right: calc(100% + var(--i-hz-offset, 20px)); } .cWidgetContainer__portal-menu { padding: 1em; } [data-role="toollist-wrap"], .cWidgetContainer__portal-menu { --i-hz-offset: 20px; display: flex; flex-direction: column; gap: 1em; } [data-role="toollist-wrap"], .ipsEditor__toolbar--hovering:not(#x), .cWidgetContainer__portal-menu { position: absolute; z-index: calc(var(--ips-js-zindex-top) - 10); /* -10 so that the tooltips appear above the menu */ } [data-role="toollist-wrap"] > [data-ipseditor-toollist], [data-role="toollist-wrap"] > .ipsEditor__global-messages > .ipsEditor__global-message, .ipsEditor__toolbar--hovering:not(#x), .cWidgetContainer__portal-menu { outline: 2px solid var(--i-primary); border-radius: var(--i-box--bo-ra); background: var(--i-background_3); } [data-resize-active] .cWidgetContainer__portal-menu { opacity: 0; } :root { --i-drag-cursor: move; } [data-mouse-down-drag-active] * { cursor: var(--i-drag-cursor) !important; } /* Firefox: Prevent videos from playing when dragging to resize */ .tiptap [data-attachment-type="video"][data-is-resizing] video{ pointer-events: none; } .cWidgetContainer__portal-menu [data-action='cancel'] { background-color: var(--i-color_negative); color: var(--i-primary-contrast); } [data-role="toollist-wrap"] > .ipsEditor__global-messages { padding: 0; order: -1; } [data-role="toollist-wrap"] .ipsComposeArea_dropZone { margin: 0 !important; } .tiptap [data-drag-handle] { cursor: move; } .tiptap [data-drag-handle]:is([data-is-resizing], [data-is-resizing] *) { cursor: inherit; } /* The width options for images and attachments */ .ipsEditor__toolbar-item--imagewidth { width: max-content; } .ipsEditor__width-form { display: grid; min-width: 200px; gap: 1em; padding: 0.5em; grid-auto-flow: row; } @container(max-width: 767px) { .ipsEditor__width-form { width: 80cqw; } } .ipsEditor__width-form > div { display: flex; flex-direction: row; justify-content: stretch; align-items: baseline; } .ipsEditor__width-form > div > * { flex: 1 1 fit-content; } .ipsEditor__width-form [data-role="status-indicator"] { position: relative; display: flex; align-items: flex-end; flex-direction: column; } .ipsEditor__width-form [data-role="status-indicator"] > .ipsLoading:not(#x)::before { right: 0; height: 1em; width: 1em; font-size: revert; } .ipsEditor__width-form [data-role="status-indicator"] .fa-solid.fa-check { position: absolute; color: var(--i-color_positive); font-size: 0.75em; bottom: -0.5lh; } .ipsEditor__width-form > [data-role="custom-width-wrap"] { position: relative; } .ipsEditor__width-form > [data-role="custom-width-wrap"]::after { position: absolute; inset-inline-end: 35px; display: block; inset-block-end: 0.7em; content: 'px'; color: var(--i-color_soft); } .ipsRichText :is(.ipsRichText__align--width-custom, .ipsRichText__align--width-fullwidth)[data-node-view-wrapper] img { width: 100%; display: inline-block; } .tiptap .ipsRichText__align--inline[data-node-view-wrapper] > .ipsEditor__create-sibling-wrapper { display: none; } .tiptap .ipsEditor__media-resize-handle { display: block; position: absolute; bottom: -3px; right: -3px; height: 8px; width: 8px; outline: 1px solid var(--i-primary-contrast); background: var(--i-primary, red); cursor: nwse-resize; } .tiptap .ipsEditor__media-resize-handle--nesw { cursor: nesw-resize; right: revert; left: -3px; } /* Text align can break the inline toolbars and menus */ .tiptap :is(.ipsEditor__node-options--media, .ipsEditor__toolbar, .ipsEditor__toolbar-panel, .ipsEditor__toolbar-item) { text-align: start; } .node-ipsEmbed[data-embed-type="video"], .node-ipsEmbed[data-embed-type="video"] > [data-node-view-wrapper] { --i-media-width: 100%; width: var(--i-media-width); } .node-ipsEmbed:where([data-embed-src*="youtube."], [data-embed-src*="youtube-nocookie."], [data-embed-src*="vimeo."]), .node-ipsEmbed:where([data-embed-src*="youtube."], [data-embed-src*="youtube-nocookie."], [data-embed-src*="vimeo."]) > [data-node-view-wrapper]{ max-width: none !important; } /* Embed alignment */ [data-role="embed-node-view-content-wrap"] { display: contents; } .tiptap .node-ipsEmbed[data-alignment] { display: flex; width: 100%; flex-direction: row; flex-wrap: nowrap; padding-block: 1em; } .tiptap .node-ipsEmbed[data-alignment]:is([data-embed-type='video'], [data-embed-type='photo'], [data-embed-type='brightcove']) > [data-node-view-wrapper] { width: var(--i-media-width); } .tiptap .node-ipsEmbed[data-alignment="center"] { justify-content: center; } .tiptap .node-ipsEmbed[data-alignment="end"] { justify-content: end; } .tiptap .node-ipsEmbed[data-alignment] .ipsEmbedded__wrap > *:not(#x) { margin-block: 0; } /* When page editor is active, editors should be hidden */ .cWidgetsManaging .ipsWidget__content--wrap :is(.ipsEditor, [data-ipseditorv5], .tiptap, .ipsEditor__tiptap-wrap, .ipsEditor__toolbar):not(#x, .ipsWidget__content--wrap--editing *) { z-index: 0; pointer-events: none; } .cWidgetsManaging .ipsWidget__content--wrap :is([data-role="mainEditorArea"].ipsLoading):not(#x, .ipsWidget__content--wrap--editing *)::before { display: none; } .ipsEditor__iconpicker-wrap { width: 340px; max-height: 450px; } :where(.ipsEditor__anchored-panel) { top: 100%; }]]> a, .ipsReact_reactCount > span { display: flex; align-items: center; color: var(--i-color_hard); padding: 4px; border: 1px solid var(--i-background_4); background: var(--i-background_1); border-radius: 50px; } .ipsReact_reactCount > a:hover { border-color: var(--i-background_6); outline: 4px solid var(--i-background_3); } .ipsReact_reactCount img { width: 20px; height: 20px; } .ipsReact_reactCount > span > span:last-child, .ipsReact_reactCount > a > span:last-child { font-size: var(--i-font-size_-2); padding: 0 .8em; } .ipsReact_reactCountOnly { padding: 0 7px; font-weight: bold; line-height: 24px; border-radius: 2px; font-size: var(--i-font-size_-2); display: inline-block; } @media screen and (max-width: 767px) { .ipsReact { /* --_react-size: 36px; */ } .ipsReact_button .ipsReact_reaction::after, .ipsReact_overview{ display: none; } } .ipsReact_reactCountOnly_mini { line-height: 18px; font-size: max(10px, .7em); } .ipsReactOverview { text-align: center; } /* Hide reaction container if it's empty */ .ipsReactOverview:not(:has(*)){ display: none } @supports not selector(a:has(b)){ .ipsReactOverview:-moz-only-whitespace{ display: none } } .ipsReactOverview ul { display: flex; align-items: center; justify-content: center; /* Featured comments at the top of topics */ gap: .3em; } .ipsReactOverview ul + span{ vertical-align: middle; } .ipsReactOverview ul img { max-height: 1.8em; width: auto; } .ipsReactOverview_small ul img { max-height: 1.6em; } .ipsReactOverview p { display: block; margin-top: .5em; font-size: var(--i-font-size_-2); text-transform: uppercase; opacity: 0.5; font-weight: 500; } /* REACTION ANIMATION DEFINITIONS */ @keyframes reaction-click-ring { 0% { opacity: 1; transform: scale3d(0.4, 0.4, 1); } 40% { transform: scale3d(1, 1, 1); opacity: .8; } 100% { opacity: 0; transform: scale3d(1.2, 1.2, 1); } } @keyframes reaction-click { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 1); } 30% { transform: scale3d(1.3, 1.3, 1); opacity: 1; } 100% { transform: scale3d(1, 1, 1); } } @keyframes reaction-hover { 0% { opacity: 0; transform: scale3d(0, 1, 1); } 50% { transform: scale3d(1.2, 1, 1); opacity: 1; } 100% { transform: scale3d(1, 1, 1); } } @keyframes reaction-hover-out { 0% { opacity: 1; transform: scale3d(1, 1, 1); } 60% { transform: scale3d(0, 0, 1); } 100% { opacity: 0; } } .ipsReputation_count { background: #fff; display: inline-block; position: relative; font-size: var(--i-font-size_-1); font-weight: bold; border-radius: min(var(--i-design-radius, 4px)); border: 1px solid rgba(0,0,0,0.1); } .ipsReputation_count.i-color_positive { background: var(--i-background_positive-soft); } .ipsReputation_count.i-color_negative { background: var(--i-background_negative-soft); } .ipsLikeRep [data-action="giveReputation"] + .ipsReputation_count { font-size: var(--i-font-size_-2); margin-inline-start: 10px; } .ipsLikeRep [data-action="giveReputation"] + .ipsReputation_count::before { content: ''; display: block; width: 1px; height: 100%; position: absolute; background: currentColor; opacity: .1; top: 0; inset-inline-start: -8px; } /* ======================================================== */ /* FOLLOW/LIKE */ .ipsFollowerList { max-height: 300px; } /* ======================================================== */ /* SHARE LINKS */ .ipsPageActions{ color: var(--i-color_soft); display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; font-size: calc(.85em + var(--i-range) * .1); } :where(.ipsPageActions > :is(li, div)){ display: contents; } .ipsPageActions .ipsButton{ flex: 1 1 auto; } @container (max-width: 600px){ .ipsPageActions--mini-responsive .ipsButton__label{ display: none; } } .ipsPageActions__mainLink { display: block; padding: .6em 1em; border-radius: min(var(--i-design-radius), 5px); background-color: var(--i-background_3); color: var(--i-color_root); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ipsPageActions__mainLink:hover{ background-color: var(--i-background_4); } .ipsPageActions__mainLink i{ opacity: .5; margin-inline-end: .3em; } /* ---------------- - Leaderboard ---------------- */ .ipsLeaderboard_trophy { color: #ffffff; background-color: var(--i-trophy-first--background); font-size: 1.5em; width: 2em; height: 2em; border-radius: 50%; position: relative; display: inline-flex; align-items: center; justify-content: center; } .ipsLeaderboard_trophy_2{ background-color: var(--i-trophy-second--background); } .ipsLeaderboard_trophy_3{ background-color: var(--i-trophy-third--background); } .ipsLeaderboard_trophy_4 { display: none; }]]> li > *{ display: flex; align-items: center; justify-content: center; gap: .5em; color: inherit; padding: .7em 1em; line-height: 1; /* Windows fix? */ } .ipsEntry__authorStats i{ opacity: .6; color: var(--i-color_soft); } .ipsEntry__authorStats--mini-profile{ overflow: hidden; border: 0 solid var(--i-background_3); border-width: 1px 0; gap: 1px; } .ipsEntry__authorStats--mini-profile > li { outline: 1px solid var(--i-background_3); flex: 1 1 auto; } .ipsEntry__authorStats--mini-profile > li > *{ padding: 1em; } .ipsEntry__authorStats--mini-profile a:hover{ background-color: var(--i-background_2); } .ipsEntry__authorStats--mini-profile [data-i-el="group-icon"]{ display: grid; place-content: center; padding: 0 1em; } .ipsEntry__authorStats--mini-profile [data-i-el="group-icon"] img{ max-height: 1.5em; padding: 0; } /* Minimal stats UI */ .ipsEntry__authorStats--minimal{ justify-content: center; margin-left: calc(var(--i-post--pa-in) * -.8); margin-right: calc(var(--i-post--pa-in) * -.8); text-align: center; } .ipsEntry__authorStats--minimal > li > *{ border-radius: 5px; } .ipsEntry__authorStats--minimal [data-i-el="label"]{ clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .ipsEntry__authorStats--minimal a:hover{ background: var(--i-background_3); } /* Custom fields */ .ipsEntry__authorFields{ text-align: start; color: var(--i-color_soft); font-size: max(.9em, 12px); display: grid; gap: .8em; } .ipsEntry__authorFields [data-i-el="title"]{ font-weight: 600; color: var(--i-color_hard); display: block; } /* Hide custom fields if they're empty */ .ipsEntry__authorFields:not(:has(*)){ display: none } @supports not selector(a:has(b)){ .ipsEntry__authorFields:-moz-only-whitespace{ display: none } } .ipsEntry__profile .ipsEntry__authorFields{ padding: 1.3em; border-bottom: 1px solid var(--i-background_3); } .ipsEntry__content{ position: relative; /* Required for quote tooltip */ } @media (min-width: 601px){ .ipsEntry__header .ipsBadges{ margin-inline-end: 1.2em; } .ipsEntry__header .ipsBadge{ /* padding: .6em 1.3em; */ } } @media (max-width: 600px){ .ipsEntry__header .ipsBadges{ flex: 1 1 100%; margin-top: 1em; order: 10; } } /* This helps with vertical alignment */ :where(.ipsEntry--simple, .ipsEntry--post) .ipsEntry__post > .ipsBadges > li{ display: contents; } .ipsEntry--simple .ipsEntry__post, .ipsEntry--post .ipsEntry__post{ padding: var(--i-post--pa-bl) var(--i-post--pa-in); flex-grow: 1; } :where(.ipsRichText--user){ font-size: calc(var(--set__i-user-content-font-size, 100) * .01em); font-weight: normal; line-height: 1.6; } /* Signature */ .ipsEntry__signature{ margin-top: 1em; border-top: 1px solid; border-color: color-mix(in srgb, currentColor 15%, transparent); padding: 1em 0; } /* Controls */ .ipsEntry__footer{ padding: .6em; display: flex; align-items: center; flex-wrap: wrap-reverse; /* Make sure reactions sit on top of buttons when they wrap */ gap: .6em; font-size: .9em; } /* Hide the footer if it only contains an empty/invisible reaction component */ .ipsEntry__footer:has(> .ipsReact:only-child):not(:has(.ipsReact_types)):has(.ipsReact_blurb.ipsHide){ display: none; } .ipsEntry__controls{ color: var(--i-color_primary); display: flex; gap: 1px; flex-wrap: wrap; align-items: center; font-weight: 600; } .ipsEntry__controls > li{ border-radius: 5px; height: 2.5em; /* Needed for helpful */ display: flex; position: relative; } @media (any-hover:hover){ .ipsEntry__controls > li:not(:has(p)):hover{ background-color: color-mix(in srgb, currentColor 10%, transparent); } } .ipsEntry__controls :where(a, button, p){ display: flex; align-items: center; gap: .5em; padding: 0 1em; color: inherit; border-radius: inherit; } .ipsEntry__controls [data-active="helpful"]{ color: var(--i-color_positive); } .ipsEntry__controls p{ color: var(--i-color_soft); } /* Split buttons, such as helpful */ .ipsEntry__controls-badge{ margin-inline-start: -.4em; position: relative ; padding: 0 .8em; border-start-start-radius: 0; border-end-start-radius: 0; } .ipsEntry__controls-badge:hover{ background-color: color-mix(in srgb, currentColor 5%, transparent); } .ipsEntry__controls-badge::before{ content: ''; position: absolute; inset-inline-start: 0; top: .5em; bottom: .5em; border-left: 1px solid currentcolor; opacity: .15; } .ipsEntry__footer .ipsReact{ margin-inline-start: auto; } /* ---------------- - Simple entries (used in widgets or inside ipsBox) ---------------- */ /* Add a border to the top of posts */ :where(.ipsBox, .ipsWidget, .ipsDialog) .ipsEntry--simple{ border-top: 6px solid var(--i-background_4); } /* Remove the top border on the first post in the minimal topic view */ .ipsEntry--first-simple{ border-top-width: 0; } :where(.ipsEntry--first-simple .ipsEntry__post .ipsRichText--user){ font-size: max(var(--set__i-user-content-font-size, 100) * .01em, 1.12em, 16px); } /* Hide side column and meta row */ .ipsEntry--simple .ipsEntry__author-column, .ipsEntry--simple .ipsEntry__meta{ display: none; } /* v5 todo: This overwrites :where(.ipsEntry--simple, .ipsEntry--post) .ipsEntry__post in this same file. What do we need? */ .ipsEntry--simple .ipsEntry__post{ padding: 1.5em; } /* Add a margin to badges in simple comments (ie. Featured CMS comments) */ .ipsEntry--simple .ipsEntry__post .ipsBadges{ margin-bottom: .6em; } /* ---------------- - Posts ---------------- */ .ipsEntry--post{ display: grid; } /* Author column */ .ipsEntry__author-column{ display: grid; align-content: start; gap: 1.2em; text-align: center; padding: var(--i-post--pa-bl) var(--i-post--pa-in); border-inline-end: 1px solid var(--i-background_3); position: relative; } .ipsEntry__author-online{ display: none; position: absolute; top: -1px; inset-inline-start: -1px; border: .6em solid var(--i-background_positive); border-bottom-color: transparent; border-inline-end-color: transparent; border-start-start-radius: var(--i-box--bo-ra); } .ipsEntry__author-column .ipsEntry__username{ font-size: 1.1em; font-weight: 700; justify-content: center; gap: .5em; } .ipsEntry__author-column .ipsEntry__author-moderator-badge{ --i-badge: hsl(var(--if-light, 117 56% 80%) var(--if-dark, 150 62% 25%)); font-size: .8em; } .ipsEntry__author-column .ipsAvatarStack{ width: 50%; justify-self: center; } .ipsEntry__author-column .ipsEntry__group{ margin-top: -1.2em; color: var(--i-color_soft); } /* Hide badges by default */ .ipsEntry__authorStats [data-i-el="badges"]{ display: none; } /* Date: Shown on desktops in Posts */ .ipsEntry__meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 0 1em; margin-bottom: var(--i-post--pa-bl); } .ipsEntry__meta .ipsEntry__date{ --i-co: var(--i-color_soft); color: var(--i-co); font-size: var(--i-font-size_-1); white-space: nowrap; /* Necessary to stop the date from weirdly wrapping in some situations */ margin-inline-end: auto; } /* Increase height of top buttons slightly (ellipsis) */ .ipsEntry__meta .ipsEntry__topButton{ min-height: 2em; margin-block: -0.4em; } /* Post content */ .ipsEntry--post .ipsEntry__content{ display: flex; flex-direction: column; } /* Editing a post. Remove excess spacing */ .ipsEntry__post .ipsForm--edit .ipsFieldRow{ padding-inline: 0; } .ipsEntry__post .ipsForm--edit .ipsFieldRow:first-of-type{ padding-top: 0; } .ipsEntry__post .ipsForm--edit .ipsFieldRow__label[for="comment_value"]{ display: none; } /* ---------------- - Other components ---------------- */ /* Ignored */ .ipsEntry--ignored{ font-weight: 500; color: var(--i-color_soft); padding: 1em; font-size: max(.9em, 11px); } .ipsEntry--simple ~ .ipsEntry--ignored, :is(.ipsEntries--topic, .ipsEntries--comments, .ipsEntries--reviews) .ipsEntry--ignored{ text-align: center; background-color: var(--i-background_2); border-top: 1px solid var(--i-background_5); } /* Hidden message */ .ipsEntry__hiddenMessage{ background-color: color-mix(in srgb, var(--i-co) 10%, transparent); padding: .8em 1em; border-radius: 5px; margin-bottom: 1em; font-weight: 500; font-size: .95em; } .ipsUnreadBar { color: var(--i-color_primary); margin: 1em; display: flex; align-items: center; gap: 0 1.2em; font-weight: 600; font-size: .9em; text-align: center; } .ipsUnreadBar::before, .ipsUnreadBar::after { content: ''; height: 3px; border-radius: 3px; flex: 1 1 auto; background: currentColor; } .ipsBox .ipsUnreadBar:not(hr){ display: block; color: var(--i-primary-contrast); background: var(--i-primary); padding: .4em; margin: 5px; border-radius: 5px; } .ipsBox .ipsUnreadBar::before, .ipsBox .ipsUnreadBar::after{ content: none; } hr.ipsUnreadBar{ display: block; padding: 0; background-color: currentColor; border-radius: 4px; height: 6px; } /* Truncate posts if using the compact style and are viewing pages beyond 1 */ .ipsEntry__truncate:not([data-truncate-expanded]){ max-height: 30em; } html .ipsEntry__truncate ~ .ipsTruncate_more{ background: var(--i-secondary); color: var(--i-secondary-contrast); margin-left: auto; margin-right: auto; width: fit-content; padding: 0 1em; border-radius: 5px; } /* Container queries don't work well here at the moment. They have layout containment, so "Edit post" dropdown menus are overlaid by sidebars. These menus are located inside the post area due to data-ipsMenu-appendTo which is necessary for editing posts */ @media (min-width: 768px) { .ipsEntry--post{ grid-template-columns: var(--post-column--fl-ba, 230px) 1fr; } /* Column styles */ .ipsEntry--post .ipsEntry__header, .ipsEntry--post .ipsEntry__post > .ipsBadges{ display: none; } } @media (max-width: 767px){ .ipsEntry--post .ipsEntry__author-column, .ipsEntry--post .ipsEntry__meta{ display: none; } }]]> .ipsHr:only-child){ display: none; } /* Form headers, eg in "Edit Profile" modal */ .ipsFieldRow__section{ padding: 1em; font-weight: 600; background: var(--i-background_3); } :where(:first-child > .ipsFieldRow__section){ border-top-left-radius: var(--i-box--bo-ra); border-top-right-radius: var(--i-box--bo-ra); } /* If the field row sections are in tabbed content, they should never have rounded corners */ .ipsTabs__panel .ipsFieldRow__section{ border-radius: 0; } /* Submit row */ .ipsSubmitRow{ flex: 0 0 auto; /* Useful when in flex-direction:column layouts */ margin-top: auto; /* Push this bar down if its previous siblings don't have flex-grow: 1; */ background: var(--i-background_2); padding: 1em; border-top: 1px solid var(--i-background_4); border-bottom-left-radius: var(--i-box--bo-ra); border-bottom-right-radius: var(--i-box--bo-ra); text-align: center; } .ipsApp_admin .ipsSubmitRow{ position: -webkit-sticky; position: sticky; bottom: 0; z-index: 3; /* High enough to overlap editor */ } /* Remove sticky footer when selecttreee is active, otherwise the footer overlaps it */ .ipsForm:has(.ipsSelectTree_active) + .ipsSubmitRow{ position: static; } /* Apply submit row styles to alternate HTML markup */ .ipsFieldRow:has(> .ipsFieldRow__content > button:only-child){ background: var(--i-background_2); padding: 1em; border-top: 1px solid var(--i-background_4); border-bottom-left-radius: var(--i-box--bo-ra); border-bottom-right-radius: var(--i-box--bo-ra); text-align: center; margin-top: -1px; /* This prevents a double border */ } /* Labels */ .ipsFieldRow__label{ font-weight: 600; font-size: 1.1em; color: var(--i-color_hard); display: flex; align-items: center; flex-wrap: wrap; gap: 0em 2em; } /* Potential fix for Opera Mobile, where labels and "Required" were wrapping prematurely */ .ipsFieldRow__label > *{ min-width: fit-content; } /* Hide labels on certain forms */ .ipsFieldRow--noLabel .ipsFieldRow__label, .ipsForm--noLabels .ipsFieldRow:not(.ipsFieldRow--checkbox) .ipsFieldRow__label { display: none; } /* ..or if they're empty */ .ipsFieldRow__label:has(span:only-child:empty){ display: none; } /* Hide empty labels, but keep parent visible incase it contains "Required". Topic content forms are an example */ .ipsFieldRow__label span:empty{ display: none; } /* Labels next to radios */ .ipsFieldList--radio label{ font-weight: 500; color: var(--i-color_hard); } .ipsFieldRow__required { font-size: max(.7em, 10px); text-transform: uppercase; color: var(--if-light, hsl(0 78% 37%)) var(--if-dark, hsl(0 89% 70%)); margin-inline-start: auto; } /* Descriptions */ .ipsFieldRow__desc { font-size: 0.9em; margin-top: .75em; color: var(--i-color_soft); } .ipsFieldRow__label ~ .ipsFieldRow__desc{ margin-top: 0; } /* Remove margin from radio option descriptions */ .ipsFieldList--radio .ipsFieldRow__desc{ margin-top: 0; } /* Underline links in form descriptions */ :where(.ipsFieldRow__desc) a{ text-decoration: underline; } /* Warning */ .ipsFieldRow__warning{ color: var(--i-color_warning); background: color-mix(in srgb, var(--i-color_warning) 15%, transparent); border: 1px solid color-mix(in srgb, var(--i-color_warning) 40%, transparent); padding: 0.8em 1em; border-radius: 5px; font-weight: 500; margin-top: 1em; font-size: .9em; } .ipsFieldRow__warning .fa-circle-exclamation{ margin-inline-end: .4em; } .ipsFieldRow__warning:empty{ display: none; } /* Horizontal UI */ @media (min-width: 700px){ .ipsForm--horizontal .ipsFieldRow{ display: flex; align-items: flex-start; } .ipsForm--horizontal .ipsFieldRow[style*="list-item"]{ display: flex !important; } .ipsForm--horizontal .ipsFieldRow__required{ flex: 1 1 100%; } .ipsForm--horizontal .ipsFieldRow__label{ flex: 1 1 20em; display: grid; text-align: end; place-items: end; } .ipsForm:not(.ipsForm--horizontal) .ipsFieldRow--fullWidth > *{ flex: 1 1 100%; max-width: none; } } .ipsFieldRow--checkbox{ display: flex; align-items: center; gap: 1em; } /* Follow pop-up menu */ .ipsForm--notifications-follow .ipsFieldRow:has([name="follow_public_checkbox"]){ display: flex; align-items: center; } /* Vertically stack question and options */ .ipsPollList--questions .ipsFieldRow{ display: grid; } /* Fix Safari alignment bug */ .ipsPollList--questions .ipsFieldList{ align-self: start; } .ipsFieldRow__content{ flex: 999 1 55%; } /* Inline checkboxes */ .ipsFieldRow__content--checkboxes{ display: flex; flex-wrap: wrap; gap: 1em 2em; } .ipsFieldRow__inlineCheckbox, .ipsFieldRow__content--checkboxes > *{ display: flex; align-items: center; gap: .5em; } .ipsFieldRow__inlineCheckbox{ display: inline-flex; } /* Stacked form: Used for addresses, poll options, etc */ .ipsFieldListParent{ display: grid; gap: 2em; } .ipsFieldList > *{ display: flex; align-items: center; gap: .8em; padding: .4em; } .ipsFieldList > input{ flex: 0 0 auto; align-self: baseline; margin-top: .2em; } .ipsFieldList__content{ flex: 1 1 auto; } .ipsFieldRow label[for], :where(label:has(input)){ cursor: pointer; } /* Remove cursor if the field is an autocomplete, since clicking the label does nothing */ .ipsFieldRow label[for]:has(~ [data-controller="core.global.core.optionalAutocomplete"]){ cursor: default; } /* Highlight code tags (ACP > Content Discovery > Search) */ .ipsFieldList__content code{ background: var(--i-background_5); color: var(--i-color_hard); border-radius: 4px; padding: .3em; display: inline-block; } /* Full width inputs */ :is(.ipsFieldRow--fullWidth,.ipsForm--fullWidth) :is(select, textarea, input:not([type="radio"], [type="checkbox"]), .ipsField_autocomplete, .ipsSelectTree), .ipsInput--wide{ width: 100%; max-width: none; } /* Select menus: If they're followed by a label, set their width to auto */ .ipsFieldRow__content select:has(+ span){ width: auto; margin-inline-end: .6em; } /* Date fields in "New" form */ .cCreateTopic_date{ display: grid; gap: .5em; } /* Stacks */ .ipsFieldRow:not(.ipsFieldRow--fullWidth) .ipsField_stack { max-width: 350px; } [data-role="stack"]{ position: relative; } .ipsField_stackItem[style*="absolute"]{ background: var(--i-background_2); } .ipsField_stackItem{ display: flex; gap: .4em; padding: .4em 1em; position: relative; } .ipsField_stackDrag{ cursor: move; display: grid; place-content: center; padding: 0 1em; flex: 0 0 auto; color: var(--i-color_soft); } .ipsField_stackItem_keyValue{ display: flex; gap: .5em; } .ipsField_stackDelete{ flex: 0 0 auto; order: 1; cursor: pointer; color: var(--i-color_soft); font-weight: 500; padding: 0 1em; display: grid; place-content: center; border-radius: 6px; } .ipsField_stackDelete:hover{ background: var(--i-background_2); } .ipsField_stackAdd{ margin-inline-start: 5em; } [data-ipsstack-wrapper] { flex: 1 1 auto; } /* ---------------- - Translatable inputs ---------------- */ .ipsForm--translatable{ display: grid; gap: 1em; } .ipsForm--translatable .ipsFieldRow{ padding: 0; border-width: 0; } /* ---------------- - Polls ---------------- */ /* Polls have parent and child .ipsFieldRows, which doubles up on padding/borders. This fixes that */ .ipsTabs__panel[class*="_pollTab"] > .ipsForm > .ipsFieldRow{ display: contents; } /* Poll forms */ [data-role="pollContainer"]{ display: grid; gap: 1em; padding: 1em; } [data-role="pollContainer"] [data-role="question"]{ background: var(--i-background_2); padding: 1.5em; border-radius: var(--i-box--bo-ra); } /* Draggable */ @media (hover: none){ .ipsAttachment_supportDrag { display: none; } } /* Loading attachments */ .ipsAttachment_loading.ipsLoading--small { font-size: 30px; margin-top: 2px; margin-inline-end: 6px; } .ipsAttachment_loading.ipsAttachment_loading_editor { margin-top: -2px; } /* Content item */ .ipsContentItemSelector > *{ margin-top: 10px; } .ipsContentItemSelector > :first-child { margin-top: 5px; } .ipsContentItemSelector [data-role="contentItemRow"]{ padding-inline-start: 5px; } .cContentItem_delete { height: 18px; line-height: 18px; background: var(--i-primary); color: var(--i-primary-contrast); display: inline-block; font-size: 13px; border-radius: 12px; padding: 0 .85em; cursor: pointer; margin: 1px 5px !important; margin-inline-start: 0 !important; float: left; } [dir="rtl"] .cContentItem_delete{ float: right; } /* Select tree */ .ipsSelectTree { display: flex; align-items: center; min-height: 2.7em; max-width: 350px; padding: 0 1em; position: relative; cursor: pointer; background-color: var(--i-input--ba-co); background-clip: padding-box; border-color: var(--i-input--bo-co); border-radius: var(--i-input--bo-ra); border-style: var(--i-input--bo-st, solid); border-width: var(--i-input--bo-wi); box-shadow: var(--i-input--bo-sh, none); color: var(--i-co); } .ipsSelectTree:not(.ipsSelectTree_active):hover{ border-color: var(--i-input-hover--bo-co); } .ipsSelectTree_active{ border-color: var(--i-input-active--bo-co); } .ipsSelectTree.ipsSelectTree_disabled { opacity: .4; background-color: var(--i-background_3); font-style: italic; pointer-events: none; } .ipsSelectTree_expand { margin-inline-start: auto; opacity: .3; flex: 0 0 auto; } .ipsSelectTree [data-role="tokenList"]{ display: flex; flex-wrap: wrap; padding: 0.5em 0; } .ipsSelectTree [data-role="tokenList"] li { line-height: 1; margin-inline-end: 5px; } .ipsSelectTree [data-role="tokenList"] .cToken { background: var(--i-primary); color: var(--i-primary-contrast); margin-bottom: 4px; } .ipsSelectTree_nodes { position: absolute; top: 100%; left: -1px; max-width: 500px; background: var(--i-dropdown--ba-co); border-radius: var(--i-input--bo-ra); box-shadow: var(--i-dropdown--bo-sh); } .ipsSelectTree_nodes.ipsSelectTree_bottom { transform: translateY(5px); } .ipsSelectTree_nodes.ipsSelectTree_top { transform: translateY(-5px); } .ipsSelectTree_nodes [data-role="nodeList"] { max-height: 300px; overflow: auto; padding: .4em; } /* .ipsSelectTree_nodes [data-role="nodeList"] li { position: relative; } */ .ipsSelectTree_item{ border-radius: min(var(--i-design-radius), 5px); display: flex; align-items: center; gap: .5em; padding: .7em 1em; padding-inline-start: 1.5em; } /* .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item { } */ /* Reduce padding on collapsible headers since they include an icon */ .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_withChildren { padding-inline-start: .3em; } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not(.ipsSelectTree_itemDisabled, .ipsSelectTree_selected):hover { background: color-mix(in srgb, currentColor 8%, transparent); } .ipsSelectTree_nodes [data-role="nodeList"] li [data-role="childWrapper"] { margin-inline-start: 12px; padding-inline-start: 4px; border-inline-start: 1px dashed; border-color: color-mix(in srgb, currentColor 20%, transparent); } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_toggle { flex: 0 0 auto; width: 1.3em; display: grid; place-content: center; color: inherit; } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item > .ipsSelectTree_toggle::before { content: '\f054'; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; font-size: .8em; transition: .2s; } .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item.ipsSelectTree_itemOpen > .ipsSelectTree_toggle::before { transform: rotate(90deg); } .ipsSelectTree_nodes .ipsSelectTree_loadMore { text-align: center; padding: 7px 0px 0px; } .ipsSelectTree_nodes .ipsSelectTree_loadMore .ipsLoading { margin-inline-end: 4px; } .ipsSelectTree_selected { background: var(--i-primary); color: var(--i-primary-contrast); } .ipsSelectTree_selected::after { content: '\f00c'; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; margin-inline-start: auto; } .ipsSelectTree_itemDisabled > [data-role="nodeTitle"] { opacity: .5; cursor: default; } .ipsSelectTree_placeholder { opacity: .6; } .ipsSelectTree_search { margin-top: 7px; position: relative; } .ipsApp .ipsSelectTree_search input { border: 1px solid; border-color: color-mix(in srgb, currentColor 10%, transparent); font-size: .9em; padding-inline-start: 26px; } .ipsSelectTree_search::after { content: '\f002'; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; position: absolute; top: 7px; inset-inline-start: 7px; }]]> .ipsGrid--lines{ border-radius: inherit; } :where(.ipsGrid--lines > *){ outline: 1px solid var(--ipsGrid--lines--bo-co); padding: 1em; } /* ---------------- - Masonry ---------------- */ .ipsMasonry{ --i-ratio: 16/9; --i-column-gap: 7px; --i-basis: clamp(120px, 25%, 240px); display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--i-column-gap); } .ipsMasonry__item, .ipsMasonry::after{ flex-grow: calc(10 * (var(--i-ratio))); flex-shrink: 1; flex-basis: calc(var(--i-ratio) * var(--i-basis)); } .ipsMasonry__item{ aspect-ratio: var(--i-ratio); } .ipsMasonry__item:has(:checked){ outline: 2px solid var(--i-primary); outline-offset: 2px; } .ipsMasonry::after{ content: ''; flex-basis: 50%; } .ipsMasonry .ipsFigure{ aspect-ratio: var(--i-ratio); border-radius: 0; } /* ---------------- - Fluid ---------------- */ .ipsFluid{ --i-basis: auto; --i-column-gap: var(--i-sp_2); --i-row-gap: var(--i-column-gap); --i-fluid--min: 1; --i-fluid--max: 99; display: flex; flex-wrap: wrap; gap: var(--i-row-gap) var(--i-column-gap); } .ipsFluid > *{ flex: 1 1 0%; flex-basis: min( (100% - (var(--i-column-gap) * (var(--i-fluid--min) - 1))) / var(--i-fluid--min), clamp( var(--i-basis), (100% - (var(--i-column-gap) * (var(--i-fluid--max) - 1))) / var(--i-fluid--max), 100% ) ) ; } .ipsFluid--2 { --i-fluid--max: 2; } .ipsFluid--3 { --i-fluid--max: 3; } .ipsFluid--4 { --i-fluid--max: 4; } .ipsFluid--5 { --i-fluid--max: 5; } .ipsFluid--6 { --i-fluid--max: 6; } .ipsFluid--7 { --i-fluid--max: 7; } .ipsFluid--8 { --i-fluid--max: 8; } .ipsFluid--min-1 { --i-fluid--min: 1; } .ipsFluid--min-2 { --i-fluid--min: 2; } .ipsFluid--min-3 { --i-fluid--min: 3; } .ipsFluid--min-4 { --i-fluid--min: 4; } .ipsFluid--min-5 { --i-fluid--min: 5; } .ipsFluid--min-6 { --i-fluid--min: 6; } /* ---------------- - Columns ---------------- */ .ipsColumns{ --i-basis: 300px; --i-column-gap: var(--i-sp_2); --i-row-gap: var(--i-column-gap); display: flex; flex-wrap: wrap; gap: var(--i-row-gap) var(--i-column-gap); } :where(.ipsColumns > *){ flex: 1 1 var(--i-basis); } .ipsColumns__primary{ flex-basis: 55%; flex-grow: 9999; } .ipsColumns__secondary{ --i-basis: auto; } @media (max-width: 767px){ .ipsColumns--stack{ display: grid; } } /* Lines */ .ipsColumns--lines{ gap: 1px; background-color: var(--i-background_4); } :where(.ipsColumns--lines > *){ background-color: var(--i-background_1); } :where(.ipsColumns--lines > .ipsColumns__secondary){ background-color: var(--i-background_2); } @media (min-width: 980px){ .ipsColumns--lines > :nth-child(1):nth-last-child(2){ border-start-start-radius: inherit; border-end-start-radius: inherit; } .ipsColumns--lines > :nth-child(2):nth-last-child(1){ border-start-end-radius: inherit; border-end-end-radius: inherit; } } .ipsColumns--padding > *, .ipsFluid--padding > *{ padding: var(--i-sp_3); } /* v5 todo: These are old 12 column grids. Slowly merge these out over time. */ .ipsSpanGrid{ display: grid; gap: var(--i-sp_2); } @media (min-width: 768px){ .ipsSpanGrid{ grid-template-columns: repeat(12, 1fr); } /* These classes are prefixed to prevent .ipsSpanGrid__x from applying a width inside .ipsGrid */ .ipsSpanGrid .ipsSpanGrid__2{ grid-column: span 2; } .ipsSpanGrid .ipsSpanGrid__3{ grid-column: span 3; } .ipsSpanGrid .ipsSpanGrid__4{ grid-column: span 4; } .ipsSpanGrid .ipsSpanGrid__5{ grid-column: span 5; } .ipsSpanGrid .ipsSpanGrid__6{ grid-column: span 6; } .ipsSpanGrid .ipsSpanGrid__7{ grid-column: span 7; } .ipsSpanGrid .ipsSpanGrid__8{ grid-column: span 8; } .ipsSpanGrid .ipsSpanGrid__9{ grid-column: span 9; } .ipsSpanGrid .ipsSpanGrid__10{ grid-column: span 10; } .ipsSpanGrid .ipsSpanGrid__11{ grid-column: span 11; } .ipsSpanGrid .ipsSpanGrid__12{ grid-column: span 12; } }]]> /* ---------------- - Aria toggle ---------------- */ :where([data-ips-animating]), :where([data-ips-animating])::backdrop{ --i-animation-name: initial; --i-animation-duration: initial; animation-name: var(--i-animation-name, none); animation-duration: var(--i-animation-duration, .25s); animation-timing-function: ease-in-out; } /* When the element is being hidden, reverse the animation */ :where([data-ips-animating="closing"]), :where([data-ips-animating="closing"])::backdrop{ animation-direction: reverse; } /* Remove animations if requested */ @media (prefers-reduced-motion: reduce){ [data-ips-animating], [data-ips-animating]::backdrop{ animation-duration: 0s; } } [data-ips-hidden-animation="slide"]{ --i-animation-name: ipshidden_slide; } @keyframes ipshidden_slide{ 0%{ max-height: 0; overflow: hidden; } 100%{ max-height: var(--i-animating-height); overflow: hidden; } } [data-ips-hidden-animation="slide-fade"]{ --i-animation-name: ipshidden_slide-fade; } @keyframes ipshidden_slide-fade{ 0%{ opacity: 0; max-height: 0; overflow: hidden; } 100%{ opacity: 1; max-height: var(--i-animating-height); overflow: hidden; } } [data-ips-hidden-animation="fade"]{ --i-animation-name: ipshidden_fade; } @keyframes ipshidden_fade{ from{ opacity: 0; } } /* Apply a default animation to certain elements */ [data-ips-animating]::backdrop{ animation-name: ipshidden_fade; } i-details-content{ display: block; --i-animation-name: ipshidden_slide; } /* Dynamic text for aria-expanded triggers */ /* Hide trigger if content is expanded */ [aria-expanded="true"] .ipsAria__expanded-false, [aria-expanded="false"] .ipsAria__expanded-true, .ipsAria__expanded-hide[aria-expanded="true"]{ display: none !important; } *{ flex: 0 0 auto; } .ipsIconPicker__search{ display: flex; gap: .7em; background: var(--i-background_3); position: relative; padding: .7em; } .ipsIconPicker--anchored .ipsIconPicker__search { background: var(--i-background_2); padding: 0.5em; gap: 0.5em; } .ipsIconPicker__search::before { content: '\f002'; position: absolute; inset-inline-start: 2em; align-self: center; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; pointer-events: none; } .ipsIconPicker--anchored .ipsIconPicker__search::before { inset-inline-start: 1.3em; } .ipsIconPicker__search [type="text"]{ flex: 1 1 100%; padding: .8em 1em; padding-inline-start: 3em; font-size: 1.1em; } .ipsIconPicker--anchored .ipsIconPicker__search [type="text"] { padding: 0.5em; padding-inline-start: 2.4em; font-size: 1em; } .ipsIconPicker__search [type="text"]::placeholder{ opacity: 1; color: var(--i-color_soft); } .ipsIconPicker__close{ width: 1.5em; aspect-ratio: 1; display: grid; place-content: center; font-size: 1.8em; color: var(--i-color_soft); margin-inline-start: auto; } .ipsIconPicker__close:hover{ color: var(--i-color_hard); } .ipsIconPicker__tabs{ display: flex; align-items: center; border-bottom: 1px solid var(--i-background_3); padding: .5em; } .ipsIconPicker__tabs [data-role="tabs"]{ --i-co: var(--i-color_soft); --hover-co: var(--i-color_hard); --hover-ba-co: var(--i-background_3); --active-co: var(--i-secondary-contrast); --active-ba-co: var(--i-secondary); display: flex; gap: .5em; } .ipsIconPicker--anchored .ipsIconPicker__tabs [data-role="tabs"] { flex-grow: 1; justify-content: stretch; } .ipsIconPicker--anchored .ipsIconPicker__tabs [data-role="tabs"] > button { flex-grow: 1; text-align: center; font-size: 12px; padding: 0.6em; } .ipsIconPicker__tabs [data-role="tabs"] button{ --i-outline-offset: -2px; display: block; padding: 0.8em 1.4em; border-radius: 5px; font-weight: 600; } .ipsIconPicker__tabs [data-role="tabs"] button:where(:hover){ color: var(--hover-co); background: var(--hover-ba-co); } .ipsIconPicker__tabs [data-role="tabs"] [data-active]{ color: var(--active-co); background: var(--active-ba-co); } .ipsIconPicker__category-title{ padding: 1em; background: var(--i-background_1); color: var(--i-color_soft); position: -webkit-sticky; position: sticky; top: 0; z-index: 3; font-weight: 600; } .ipsIconPicker--anchored .ipsIconPicker__category-title { padding: 0.5em; top: -1px; /* Pretty sure this is a subpixel rendering thing (since the positioner sets the panel's position to a decimal px value), but for some reason setting this to 0 occasionally results in a thin sliver of visible emojis/icons between the header and the search area when left as 0 */ background: var(--i-background_2); } .ipsIconPicker [data-role="iconarea"], .ipsIconPicker__selectedIcons { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(55px, 7vw, 80px), 1fr)); text-align: center; padding: 1em; } .ipsIconPicker--anchored [data-role="iconarea"] { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); padding: 0.5em; } .ipsIconPicker--anchored .ipsIconPicker__root-icon-area--empty { display: flex; align-items: center; justify-content: center; } .ipsIconPicker [data-role="iconpicker_item"] { display: grid; place-content: center; border-radius: min(var(--i-design-radius), 5px); aspect-ratio: 1; position: relative; } .ipsIconPicker [data-role="iconpicker_item"][data-icon-selected]::after { content: '×'; background: var(--i-secondary); color: var(--i-secondary-contrast); position: absolute; inset-inline-end: 4px; top: 4px; border-radius: 50%; font-size: 14px; font-weight: bold; height: 1.2em; width: 1.2em; line-height: 1; text-align: center; } .ipsIconPicker [data-role="iconpicker_item"]:hover { background: var(--i-background_2); } .ipsIconPicker [data-role="iconpicker_item"]:is(.ipsIconPicker__option--active, :focus, :focus-visible) { z-index: 1; outline: var(--i-outline-width) var(--i-outline-style) var(--i-outline-color); outline-offset: var(--i-outline-offset); background: var(--if-light, var(--i-background_3)) var(--if-dark, var(--i-background_5)); } .ipsIconPicker [data-role="iconpicker_item"].ipsIconPicker__disabled{ filter: grayscale(1) opacity(60%); pointer-events: none; cursor: not-allowed; } .ipsIconPicker__content { font-size: 42px; /* The FA SVGs render at around 42 px on average, should make emojis a similar size */ display: grid; place-content: center; overflow: hidden; /* Prevent overflow from long (broken) emojis */ /* Ensure all symbols are displayed as emoji */ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } /* Emoji font size */ .ipsIconPicker--anchored [data-role="emojiarea"] .ipsIconPicker__content { font-size: 28px; overflow: hidden; } /* FA font size */ .ipsIconPicker--anchored [data-role="faarea"] .ipsIconPicker__content { font-size: 20px; } .ipsIconPicker__content svg { width: 1em; } .ipsIconPicker__title{ display: none; } .ipsIconPicker__iconWrap { flex: 1 1 auto; display: flex; flex-direction: column; } .ipsIconPicker__container { display: flex; flex-direction: column; position: relative; flex-grow: 1; } .ipsIconPicker__fa-attribution{ position: absolute; top: 1em; inset-inline-end: 1.3em; z-index: 10; font-weight: 600; color: var(--i-color_soft); font-size: .9em; } .ipsIconPicker--anchored .ipsIconPicker__fa-attribution{ top: revert; bottom: 0; padding-top: 0.25em; padding-left: 0.5em; background-color: var(--i-background_1); inset-inline-end: 1em; border-top-left-radius: 0.25em; } [data-role="emojiarea"] .ipsIconPicker__fa-attribution{ display: none; } .ipsIconPicker__fa-attribution i{ font-size: .8em; margin-inline-start: .3em; } .ipsIconPicker__iconWrap [data-role="icons"] { overflow-y: scroll; overflow-x: hidden; flex: 1 1 auto; overscroll-behavior: contain; height: 100%; } .ipsIconPicker--anchored .ipsIconPicker__iconWrap [data-role="icons"] { min-height: 50px; min-width: 280px; scrollbar-width: thin; padding-bottom: 0.8em; } .ipsIconPicker .ipsLoading * { opacity: 0; } /* No results */ .ipsIconPicker__root-icon-area--empty{ display: grid; place-content: center;; } .ipsIconPicker__search [data-role="type_selectors"]{ flex: 0 0 auto; display: flex; } /* Hide selector parent if it's empty (FA icons don't have color options) */ /* Hide all selectors if FA tab is selected */ .ipsIconPicker__search [data-role="type_selectors"]:not(:has(*)), .ipsIconPicker:has([data-tab="fa"][data-active]) [data-role="type_selectors"]{ display: none; } .ipsIconPicker__search [data-role="type_selectors"] select { font-size: 20px; padding: 0 0.8em; padding-inline-end: calc(1.1em + 12px); background-size: auto 12px; background-position: calc(100% - 0.8em) 50%; } /* todo when we upgrade the emoji data list to a version of unicode past 15.0, there will be wider hair style support. At this point, we should unhide this; at the time of creating the iconpicker feature, there were only 3 base emojis that supported hair styles */ .ipsIconPicker__search [data-role="type_selectors"] select[data-field="hair"] { display: none; } /* Hide "Selected icons" if it's empty */ .ipsIconPicker [data-role="selected_icons"]:not(:has([data-role="iconpicker_item"])){ display: none; } /** These support the icon picker implemented as a dropdown and suggestion panel via tiptap */ /* Dropdown toolbar menu */ .ipsIconPicker--anchored { width: 340px; max-width: 95vw; max-height: 450px; box-shadow: var(--i-dropdown--bo-sh); --i-arrow-border-top: 0; --i-arrow-border-bottom: 1; } /* Shortcode menu */ .ipsIconPicker--panel { max-height: 300px; width: 300px; } .ipsIconPicker--panel [data-role="iconarea"]{ display: block; } /* Show shortcodes in this menu */ .ipsIconPicker--panel [data-role="iconpicker_item"]{ display: flex; aspect-ratio: auto; align-items: center; justify-content: start; gap: .8em; width: 100%; outline-width: 0 !important; padding: 0 0.4em; overflow: hidden; } .ipsIconPicker--panel [data-role="iconpicker_item"]:is(.ipsIconPicker__option--active, :focus-visible){ background: var(--if-light, var(--i-background_3)) var(--if-dark, var(--i-background_5)); } .ipsIconPicker--panel [data-role="emojiarea"] .ipsIconPicker__content{ font-size: 23px; } .ipsIconPicker--panel .ipsIconPicker__title{ display: block; } .ipsIconPicker--panel .ipsIconPicker__title::before, .ipsIconPicker--panel .ipsIconPicker__title::after { content: ":"; } /* Shift contextual panel away from text */ #ipsIconPicker__backdrop.ipsIconPicker__backdrop--panel { margin-top: 10px !important; } #ipsIconPicker__backdrop.ipsIconPicker__backdrop--panel.ipsIconPicker__backdrop--popup { margin-top: -10px !important; } .ipsIconPicker--panel :is(.ipsIconPicker__tabs, .ipsIconPicker__search, .ipsSubmitRow, .ipsIconPicker__category-title), .ipsIconPicker--anchored :is(.ipsSubmitRow, .ipsIconPicker__close, [data-role="selected_icons"]) { display: none; } .ipsIconPicker--panel::after { --i-arrow-offset: calc(sqrt(2) * -1); /* The arrow borders are at a 45degree angle, so the shadow has to be offset by this much to make the effective "border" 1px */ --i-arrow-sh-co: color-mix(in srgb, var(--i-color_hard) 10%, transparent); content: ""; position: absolute; bottom: 100%; left: clamp(10px, 1px * var(--i-arrow-left, 0) - 8px, 100% - 10px); height: 16px; width: 16px; filter: drop-shadow(var(--i-arrow-sh-co) 0px calc(1px * var(--i-arrow-offset)) 0px); border: 8px solid transparent; border-top-color: var(--i-box--ba-co); border-bottom-color: var(--i-box--ba-co); border-top-width: calc(var(--i-arrow-border-top) * 8px); border-bottom-width: calc(var(--i-arrow-border-bottom) * 8px); } .ipsIconPicker__backdrop--popup .ipsIconPicker--panel::after { --i-arrow-offset: calc(sqrt(2)); top:100%; } .ipsIconPicker--anchored .ipsIconPicker__iconWrap { min-height: 80px; }]]> element which we style into an icon */ .ipsThumb > i{ container-type: size; display: grid; place-content: center; opacity: .1; overflow: hidden; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-style: normal; font-weight: 900; } .ipsThumb:not(:has(img)){ background-color: var(--i-background_3) } :where(.ipsThumb i)::before{ content: "\f03e"; font-size: 40cqmin; } .ipsThumb > *{ width: 100%; height: 100%; grid-area: 1/1; } .ipsUserPhoto::after, .ipsThumb::after{ content: ""; pointer-events: none; border-radius: inherit; grid-area: 1/1; } .ipsUserPhoto::after{ position: absolute; inset: 0; } :where(a.ipsUserPhoto, a.ipsThumb):hover::after{ background: color-mix(in srgb, var(--i-color_root) 10%, transparent); } .ipsThumb img{ object-fit: cover; border-radius: inherit; } /* Legacy browers (Safari 14) */ @supports not (aspect-ratio: 1){ .ipsThumb{ position: relative; } .ipsThumb img{ position: absolute; } .ipsThumb::before, .ipsUserPhoto::before{ content: ""; display: block; padding-top: 100%; } } /* Display rank and moderator/admin status */ .ipsAvatarStack{ position: relative; } .ipsAvatarStack__badge{ position: absolute; z-index: 1; inset-inline-end: 0; inset-block-start: 0; display: flex; justify-content: center; align-items: center; width: min(2.2em, 60%); aspect-ratio: 1; font-size: calc(var(--i-rem) * .8); background: var(--i-background_dark); color: hsl(0 0% 100%); border: 2px solid var(--i-background_1); border-radius: 50%; margin-block-start: -.5em; margin-inline-end: -.5em; } .ipsAvatarStack__badge::before{ content: var(--_icon, none); font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-style: normal; font-weight: 900; font-size: .8em; } /*.ipsAvatarStack__badge--moderator{ --_icon: "\f023"; }*/ .ipsAvatarStack__badge--new{ --_icon: "\f256"; } .ipsAvatarStack__rank{ position: absolute; z-index: 1; inset-inline-start: -5%; inset-block-end: -5%; width: max(30%, 17px); --bo-wi: 2px; filter: drop-shadow( var(--bo-wi) 0 0 var(--i-background_1) ) drop-shadow( 0 var(--bo-wi) 0 var(--i-background_1) ) drop-shadow( calc( var(--bo-wi) * -1 ) 0 0 var(--i-background_1) ) drop-shadow( 0 calc( var(--bo-wi) * -1 ) 0 var(--i-background_1) ); } .ipsPhotoPanel .ipsAvatarStack__rank{ --bo-wi: 1px; } /* ---------------- - Avatar panel ---------------- */ .ipsPhotoPanel{ --i-column-gap: initial; --i-photoPanelAvatar: initial; display: flex; gap: var(--i-column-gap, 1em); align-items: start; } @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsPhotoPanel > :not(:first-child){ margin-inline-start: var(--i-column-gap, 1em); } } .ipsPhotoPanel > .ipsUserPhoto, .ipsPhotoPanel .ipsAvatarStack{ flex: 0 0 auto; width: var(--i-photoPanelAvatar, 2.5em); } .ipsPhotoPanel__text{ flex: 999 1 auto; display: grid; gap: .1em 1.5em; line-height: 1.3; align-self: center; } .ipsPhotoPanel__primary{ font-weight: 500; } .ipsPhotoPanel__secondary{ color: var(--i-color_soft); font-size: inherit; /* For elements */ } @container (max-width: 720px){ .ipsPhotoPanel__secondary:has(.ipsUsername){ color: inherit; } } .ipsPhotoPanel__secondary a{ color: inherit; } .ipsPhotoPanel--small{ --i-column-gap: .6em; --i-photoPanelAvatar: 1.4em; } /* Inline photo panels: Used in ipsPageHeader */ .ipsPhotoPanel--inline{ --i-column-gap: .8em; --i-photoPanelAvatar: 1.5em; align-items: center; } .ipsPhotoPanel--inline .ipsPhotoPanel__text{ display: flex; flex-wrap: wrap; } /* ---------------- - Image Block ---------------- */ .ipsFigure{ --ipsFigure--icon: "\f87c"; color: hsl(0 0% 100%); display: grid; border-radius: min(var(--i-design-radius), 8px); background: oklch(40% calc(var(--i-base-c) * 40%) var(--i-base-h)); overflow: hidden; } .ipsFigure[style*="--_height"]{ height: var(--_height); } :where(.ipsCarousel .ipsFigure:only-child){ height: 100%; } .ipsFigure a{ color: inherit; } .ipsFigure:has(.ipsFigure__main:focus-visible){ outline: 2px solid var(--i-color_root); outline-offset: 2px; } .ipsFigure > *{ grid-area: 1/1; border-radius: inherit; position: relative; } .ipsFigure :is(a, button, input, img, video){ pointer-events: auto; } .ipsFigure__main{ display: grid; overflow: hidden; /* place-content: center;*/ /* Required for images which have width/height attributes */ /* isolation: isolate; Safari video border-radius bug */ } .ipsFigure__main > *{ grid-area: 1/-1; object-fit: cover; place-self: stretch; width: 100%; height: 100%; } .ipsFigure__main > span{ display: grid; place-items: center; } /* "No image" and "Play" icons */ .ipsFigure__icon, .ipsFigure__play{ container-type: inline-size; display: grid; place-content: center; position: relative; z-index: 2; } .ipsFigure__icon::before, .ipsFigure__play::before{ content: var(--ipsFigure--icon); font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; font-style: normal; opacity: .2; font-size: min(80px, 25cqmin); } .ipsFigure__play::before{ content: "\f144"; font-weight: 400; pointer-events: none; text-shadow: hsl(0 0% 0% / .2) 0px 1px 2px; opacity: .8; } .ipsFigure__header{ align-self: start; pointer-events: none; padding: 1em; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5em; } .ipsFigure__footer{ position: relative; text-shadow: hsl(0 0% 0% / .2) 0px 1px 2px; align-self: end; pointer-events: none; padding: 1em; z-index: 1; } .ipsFigure__footer a:hover{ text-decoration: underline; } .ipsFigure__footer .ipsIndicator{ margin-inline-end: .4em; color: inherit; } :where(.ipsFigure__footer > :first-child:not(:only-child)){ font-weight: 600; } :where(.ipsFigure__footer > :last-child:not(:only-child)){ opacity: .8; margin-top: .3em; font-size: .9em; } .ipsFigure__footer::before{ content: ''; position: absolute; inset: 0; top: -60px; z-index: -1; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; background-image: linear-gradient(to bottom, hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / .01) 8%, hsl(0 0% 0% / .04) 15%, hsl(0 0% 0% / .1) 22%, hsl(0 0% 0% / .17) 29%, hsl(0 0% 0% / .26) 35%, hsl(0 0% 0% / .35) 41%, hsl(0 0% 0% / .45) 47%, hsl(0 0% 0% / .55) 53%, hsl(0 0% 0% / .65) 59%, hsl(0 0% 0% / .74) 65%, hsl(0 0% 0% / .82) 71%, hsl(0 0% 0% / .9) 77%, hsl(0 0% 0% / .95) 84%, hsl(0 0% 0% / .98) 92%, hsl(0 0% 0%) 100%); opacity: .6; } .ipsFigure__title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Ratio */ .ipsFigure--ratio{ --_ratio: 1; } .ipsFigure--ratio .ipsFigure__main{ aspect-ratio: var(--_ratio); } /* Contain */ :is(.ipsFigure--contain, .ipsMasonry) .ipsFigure__main > :is(video, img){ object-fit: scale-down; width: auto; max-width: 100%; height: auto; } /* Add a blurred image in the background for --contain styles, if a background-image exists */ .ipsFigure--contain[style*="--_backdrop"]{ background-image: var(--_backdrop); background-size: cover; background-position: 50%; } .ipsFigure--contain[style*="--_backdrop"] .ipsFigure__main{ background: hsl(0 0% 0% / .5); -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); } /* Hover effect */ @media (any-hover:hover){ .ipsFigure--hover .ipsFigure__footer{ transition: opacity .15s linear; opacity: 0; } .ipsFigure--hover:hover .ipsFigure__footer, .ipsFigure--hover .ipsFigure__footer:focus-within{ opacity: 1; } } .ipsNsfwOverlay{ -webkit-backdrop-filter: blur(30px) brightness(.9); backdrop-filter: blur(30px) brightness(.9); display: grid; place-content: center; font-weight: 600; padding: .5em; text-align: center; z-index: 2; container-type: inline-size; } /* If the overlay doesn't contain any content (just the icon, which typically happens for smaller thumbnails), then make sure the link is clickable */ .ipsNsfwOverlay--no-content{ pointer-events: none; } /* Show the NSFW icon if the overlay has no text/button */ .ipsNsfwOverlay--no-content::before{ content: '\f070'; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 400; color: hsl(0 0% 100% / .6); font-size: min(80px, 20cqmin); } .ipsNsfwOverlay button{ background: hsl(0 0% 100% / .2); border-radius: 5px; padding: .5em 1.2em; margin-top: 1em; place-self: center; } .ipsNsfwOverlay button:hover{ background: hsl(0 0% 100% / .3); } .ipsFigure:has(.ipsNsfwOverlay) :is(.ipsFigure__header, .ipsFigure__footer), .ipsFigure__header:not(:has(*)){ display: none; } /* Simplify the NSFW overlay on small screens when used in the masonry layout */ @media (max-width: 767px){ .ipsMasonry .ipsNsfwOverlay{ pointer-events: none; } .ipsMasonry .ipsNsfwOverlay *{ display: none; } .ipsMasonry .ipsNsfwOverlay::before{ content: '\f070'; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 400; grid-area: 1/-1; display: grid; place-content: center; opacity: .6; font-size: min(80px, 20cqmin); } } .ipsData__icon .ipsFigure__main{ aspect-ratio: 1; } /* ---------------- - Fallback image * Used in cover photos and some grid UI's * A random color is assigned (from a predefined list) based on the nth-child selector ---------------- */ .ipsFallbackImage{ background-color: var(--i-empty-image--ba-co, oklch(var(--if-light, 60% 25%) var(--if-dark, 35% 15%) var(--_hue, var(--i-base-h)))); display: grid; border-radius: inherit; overflow: hidden; } .ipsFallbackImage::before{ content: ''; background-image: url('{resource="pattern.svg" app="core" location="global" inCss="true"}'); background-size: cover; background-position: 50%; mix-blend-mode: overlay; opacity: .5; } /* Default pattern image */ .ipsCoverPhoto__container .ipsFallbackImage{ position: absolute; inset: 0; } /* "Random" background color */ :where(:is(.ipsData__item, .ipsData__blog-item):nth-child(8n - 7) .ipsFallbackImage){ --_hue: 0; } :where(:is(.ipsData__item, .ipsData__blog-item):nth-child(8n - 6) .ipsFallbackImage){ --_hue: 45; } :where(:is(.ipsData__item, .ipsData__blog-item):nth-child(8n - 5) .ipsFallbackImage){ --_hue: 90; } :where(:is(.ipsData__item, .ipsData__blog-item):nth-child(8n - 4) .ipsFallbackImage){ --_hue: 135; } :where(:is(.ipsData__item, .ipsData__blog-item):nth-child(8n - 3) .ipsFallbackImage){ --_hue: 180; } :where(:is(.ipsData__item, .ipsData__blog-item):nth-child(8n - 2) .ipsFallbackImage){ --_hue: 225; } :where(:is(.ipsData__item, .ipsData__blog-item):nth-child(8n - 1) .ipsFallbackImage){ --_hue: 270; } :where(:is(.ipsData__item, .ipsData__blog-item):nth-child(8n - 0) .ipsFallbackImage){ --_hue: 315; }]]> *{ padding: .4em 1em; } /* Reset existing form styles */ .ipsField__checkboxOverflow--scroll .ipsField__checkboxOverflow__search { max-width: none; border-width: 0; border-bottom: 1px solid var(--i-background_3); border-radius: 0; box-shadow: none; background: transparent; } .ipsField__checkboxOverflow--scroll .ipsField__checkboxOverflow__focused { background: var(--i-background_4); } /* All/none buttons */ .ipsField__checkboxOverflow__toggles{ padding-top: .5em; padding-inline-start: 2.5em; } .ipsField__checkboxOverflow__toggles button:hover{ text-decoration: underline; } .ipsField__checkboxOverflow--scroll .ipsField__checkboxOverflow__toggles { padding: .8em; border-top: 1px solid var(--i-background_3); } /* v5 todo: Does this add padding to options on Windows? */ /* Select menus */ .ipsInput option{ padding: .6em 1em; } /* Simple select menus */ .ipsSimpleSelect{ display: grid; gap: .4em; cursor: pointer; } .ipsSimpleSelect::after{ font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-style: normal; font-weight: 900; content: "\f107"; pointer-events: none; grid-area: 1/-1; align-self: center; justify-self: end; opacity: .5; font-size: .8em; padding: 0 1em; } .ipsSimpleSelect i{ grid-area: 1/-1; padding-inline-start: 1.2em; justify-self: start; align-self: center; opacity: .5; pointer-events: none; position: relative; } .ipsSimpleSelect select{ padding: .5em 1em; padding-inline-end: 2em; grid-area: 1/-1; background: var(--i-background_3); border-radius: min(var(--i-design-radius), 5px); } .ipsSimpleSelect i + select{ padding-inline-start: 3em; } /* Align select content to the end */ .ipsSimpleSelect--end{ text-align: end; } .ipsSimpleSelect--end select{ direction: rtl; text-align: start; padding-inline-end: 1em; padding-inline-start: 2em; } [dir="rtl"] .ipsSimpleSelect--end select{ direction: ltr; } /* ---------------- - Checkbox and Radio inputs ---------------- */ .ipsInput:where([type="checkbox"], [type="radio"]){ -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; height: var(--i-input-toggle--size, 1.2em); position: relative; vertical-align: middle; width: var(--i-input-toggle--size, 1.2em); cursor: pointer; background-color: var(--i-input--ba-co); border-width: var(--i-input--bo-wi); border-style: solid; border-color: var(--i-input-toggle--bo-co, var(--i-input--bo-co)); box-shadow: var(--i-input--bo-sh, none); flex: 0 0 auto; } /* Hovered and Checked */ @media (any-hover:hover){ .ipsInput:where([type="checkbox"], [type="radio"]):hover{ border-color: var(--i-input-hover--bo-co); } } /* Focus */ .ipsInput:where([type="checkbox"], [type="radio"]):focus-visible{ --i-outline-color: var(--i-primary); border-color: var(--i-input-active--bo-co); outline: var(--i-outline-width) var(--i-outline-style) var(--i-outline-color); outline-offset: var(--i-outline-offset); } .ipsInput--pseudo{ padding: 0; width: 1.3em; height: 1.3em; justify-content: center; align-items: center; background-clip: border-box; cursor: pointer; } .ipsInput--pseudoChecked, .ipsInput:where([type="checkbox"], [type="radio"]):checked{ background-color: var(--i-primary); color: var(--i-primary-contrast); border-color: transparent; } .ipsInput--pseudo::before, .ipsInput:where([type="checkbox"], [type="radio"])::before{ content: ''; visibility: hidden; } .ipsInput--pseudoChecked::before, .ipsInput:where([type="checkbox"], [type="radio"]):checked::before{ visibility: visible; } /* Checkbox */ .ipsInput--pseudo, .ipsInput:where([type="checkbox"]){ border-radius: var(--i-input-checkbox--bo-ra, max(4px, .2em)); } /* Checkbox: tick */ .ipsInput--pseudoChecked::before, .ipsInput:where([type="checkbox"])::before{ content: "\f00c"; font-family: var(--i-font-awesome); font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: block; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; font-size: 0.75em; } /* Radio */ .ipsInput:where([type="radio"]){ border-radius: var(--i-input-radio--bo-ra, 50%); } /* Radio: dot */ .ipsInput:where([type="radio"])::before{ background: currentColor; border-radius: inherit; width: 40%; height: 40%; } /* Improved click/tap area */ @media(hover:none) and (pointer:coarse){ .ipsInput:where([type="checkbox"], [type="radio"])::after{ content: ''; position: absolute; top: 50%; left: 50%; height: max(30px, 100%); width: max(30px, 100%); transform: translate(-50%,-50%); cursor: pointer; z-index: 1; } } /* Input wrapped with label */ .ipsInputLabel{ display: flex; align-items: center; gap: .7em; } .ipsInputLabel input{ flex: 0 0 auto; } /* ---------------- - On/off toggle ---------------- */ .ipsSwitch{ -webkit-appearance: none; appearance: none; display: inline-block; font-size: 1.5em; height: 1em; width: 2em; position: relative; vertical-align: middle; cursor: pointer; background-color: var(--i-background_6); /* Chrome requires the variable. Safari requires var(--i-co) instead of currentColor */ --_bo-sh: inset color-mix(in srgb, var(--i-co) 40%, transparent) 0px 0px 0px 1px; box-shadow: var(--_bo-sh); border-radius: 50px; position: relative; transition: background 0.15s linear; } .ipsSwitch::before{ content: ''; background: #fff; border-radius: inherit; position: absolute; inset-inline-start: 0; height: 1em; width: 1em; border: 3px solid transparent; background-clip: padding-box; transition: all 0.15s linear; } .ipsSwitch[data-checked], .ipsSwitch:checked{ background: var(--i-color_positive); } .ipsSwitch[data-checked]::before, .ipsSwitch:checked::before{ inset-inline-start: 100%; transform: translateX(calc(-100% * var(--i-lang-dir))); } .ipsSwitch:disabled{ cursor: not-allowed; filter: opacity(.25); } .ipsSwitch + label{ font-weight: 500; margin-inline-start: .5em; vertical-align: middle; cursor: pointer; } /* CodeMirror */ .CodeMirror { border: var(--i-input--bo-wi) var(--i-input--bo-st, solid) var(--i-input--bo-co); border-radius: var(--i-input--bo-ra); cursor: text; } [dir="rtl"] .CodeMirror { direction: ltr; } /* Loading */ .ipsField_loading { background-image: url('{resource="loaders/tiny_loading@2x.gif" inCss="true" app="core" location="front"}'); background-size: 14px 14px; background-repeat: no-repeat; background-position: right 5px center; } [dir="rtl"] .ipsField_loading { background-position: left 5px center; } /* Live language translation */ .ipsField_vle { color: black !important; font-weight: normal; } /* Recaptcha RTL fix: from v4 */ [dir="rtl"] #recaptcha_table:not(.recaptcha_theme_clean) { direction: ltr !important; } /* Password strength */ [data-ips-scheme="light"]{ --i-meter_1: #C62828; --i-meter_2: #D84315; --i-meter_3: #FF8F00; --i-meter_4: #9E9D24; --i-meter_5: #2E7D32; } [data-ips-scheme="dark"]{ --i-meter_1: hsl(0 75% 80%); --i-meter_2: hsl(14 75% 60%); --i-meter_3: hsl(39 75% 60%); --i-meter_4: hsl(75 75% 60%); --i-meter_5: hsl(130 75% 61%); } .ipsForm_meter { width: 100%; height: 7px; display: block; margin-top: .7em; border-radius: 4px; background: color-mix(in srgb, currentColor 30%, transparent); } .ipsForm_meterAdvice { font-size: max(10px, .8em); font-weight: 600; display: block; margin-top: .5em; } .ipsForm_meter[data-adviceValue="1"] + .ipsForm_meterAdvice { color: var(--i-meter_1);} .ipsForm_meter[data-adviceValue="2"] + .ipsForm_meterAdvice { color: var(--i-meter_2);} .ipsForm_meter[data-adviceValue="3"] + .ipsForm_meterAdvice { color: var(--i-meter_3);} .ipsForm_meter[data-adviceValue="4"] + .ipsForm_meterAdvice { color: var(--i-meter_4);} .ipsForm_meter[data-adviceValue="5"] + .ipsForm_meterAdvice { color: var(--i-meter_5);} .ipsForm_meter::-webkit-meter-bar { border-radius: 4px; background: color-mix(in srgb, currentColor 30%, transparent); } /* Webkit based browsers */ .ipsForm_meter[data-adviceValue="1"]::-webkit-meter-optimum-value { background: var(--i-meter_1); } .ipsForm_meter[data-adviceValue="2"]::-webkit-meter-optimum-value { background: var(--i-meter_2); } .ipsForm_meter[data-adviceValue="3"]::-webkit-meter-optimum-value { background: var(--i-meter_3); } .ipsForm_meter[data-adviceValue="4"]::-webkit-meter-optimum-value { background: var(--i-meter_4); } .ipsForm_meter[data-adviceValue="5"]::-webkit-meter-optimum-value { background: var(--i-meter_5); } /* Gecko based browsers */ .ipsForm_meter[data-adviceValue="1"]::-moz-meter-bar { background: var(--i-meter_1); } .ipsForm_meter[data-adviceValue="2"]::-moz-meter-bar { background: var(--i-meter_2); } .ipsForm_meter[data-adviceValue="3"]::-moz-meter-bar { background: var(--i-meter_3); } .ipsForm_meter[data-adviceValue="4"]::-moz-meter-bar { background: var(--i-meter_4); } .ipsForm_meter[data-adviceValue="5"]::-moz-meter-bar { background: var(--i-meter_5); } /*! * Cropper.js v1.5.9 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2020-09-10T13:16:21.689Z */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed} /* This correctly centers the photo cropper: fixes #2372 */ [data-role="cropper"] { margin: 0 auto; max-width: 100%; position: relative; } .cropper-container{ position: absolute; left: 50%; transform: translateX(-50%); } /* Color input */]]> /* Lightbox: the image viewer used throughout the front-end */ .ipsLightbox { background: rgba(20,20,20,0.95); position: fixed; inset: 40px; box-shadow: var(--i-dialog--bo-sh); border-radius: min(var(--i-design-radius, 8px)); } .ipsLightbox_imagePanel { position: absolute !important; /* required to stop conflicts with ipsLoading */ top: 0px; bottom: 0px; overflow: hidden; } .ipsLightbox .ipsLightbox_toolsPanel { bottom: 0; align-items: flex-end; padding: 20px; position: absolute; width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; z-index: 9999; } .ipsLightbox .ipsLightbox_toolsPanel a.ipsButton.ipsButton--text { background: rgba(0,0,0,0.1) !important; color: #d0d0d0; border: 1px solid #d0d0d0 !important; margin: 0 5px; } .ipsLightbox_imagePanel { inset-inline-start: 0px; inset-inline-end: 0; margin-inline-start: 35px; margin-inline-end: 25px; } .ipsLightbox_imagePanel.ipsLightbox_withComments { inset-inline-end: 350px; } .ipsLightbox_imagePanel .ipsLightbox_image { max-width: 100%; max-height: 100%; position: absolute; z-index: 1000; } .ipsLightbox_commentsPanel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 350px; background-color: #fff; overflow-y: auto; } /* .ipsLoading adds position: relative; to the element which makes it float to the left behind the lightbox image, so we need to override that here even though we've already defined position: absolute; on ipsLightbox_commentsPanel above */ .ipsLightbox_commentsPanel.ipsLoading { position: absolute; min-height: 100px; } .ipsLightbox_next, .ipsLightbox_prev { font-size: 65px; line-height: 65px; color: #fff; position: absolute; top: 50%; margin-top: -32px; opacity: 0; cursor: pointer; z-index: 5000; transition: opacity 0.3s linear; text-shadow: 0px 0px 3px #000; } .ipsLightbox_fullSize { position: absolute; z-index: 4999; color: #fff; opacity: 0.4; text-align: center; display: none; font-size: 20px; cursor: zoom-in; } .ipsLightbox_fullSize i[class*=" fa-"] { font-size: 80px; } .ipsLightbox_fullSize:hover { color: #fff; } .ipsLightbox:hover .ipsLightbox_fullSize { /*display: block;*/ } .ipsLightbox_next { inset-inline-end: 20px; } .ipsLightbox_prev { inset-inline-start: 20px; } .ipsLightbox_imagePanel:hover .ipsLightbox_next, .ipsLightbox_imagePanel:hover .ipsLightbox_prev { opacity: 0.5; } .ipsLightbox_imagePanel .ipsLightbox_next:hover, .ipsLightbox_imagePanel .ipsLightbox_prev:hover { opacity: 1; color: #fff; } .ipsLightbox_meta { position: absolute; top: 0; left: 0; right: 0; background: #000; min-height: 50px; z-index: 10000; opacity: 0; padding: 15px; color: #fff; transition: all 0.2s linear; } .ipsLightbox_imagePanel.ipsLightbox_withComments + .ipsLightbox_meta { inset-inline-end: 350px; } .ipsLightbox_imagePanel:hover + .ipsLightbox_meta { opacity: 1; } .ipsLightbox_close { font-size: 38px; color: #fff; position: absolute; top: 10px; inset-inline-end: 10px; cursor: pointer; z-index: 5000; } .ipsLightbox_close:hover { color: #fff; } /* BOTH */ @media screen and (max-width: 979px) { .ipsLightbox { inset: 0; } .ipsLightbox_imagePanel { margin-left: 10px; margin-right: 10px; } .ipsLightbox_next, .ipsLightbox_prev { opacity: 0.4; } } li{ flex-grow: 1; } /* Bullets/numbers */ .ipsList--bullets{ padding-inline-start: 2em; list-style: revert; } /* Separators: This adds a middot between inline list items */ .ipsList--sep{ row-gap: var(--i-row-gap, .4em); column-gap: 0 !important; /* Allows .i-gap_ to set gap */ } .ipsList--sep > *:not(:last-child)::after{ content: "\00B7"; margin: 0 calc(var(--i-column-gap, 1.6em) / 2); } /* Border: Adds a bottom border to stacked lists */ .ipsList--border{ gap: 1px; overflow: hidden; } .ipsList--border > li{ padding: var(--i-list--pa, 1em); outline: 1px solid var(--i-background_4); } /* Icons */ :is(.ipsList--icons, .ipsList--stacked) > li > i:first-child{ opacity: 0.6; color: var(--i-color_soft); line-height: inherit; } /* Label */ .ipsList__label{ font-weight: 600; color: var(--i-color_hard); } /* Value */ .ipsList__value{ color: var(--i-color_soft); } /* List with icons */ .ipsList--icons{ --i-list-icon--wi: 2.4em; } .ipsList--icons:not(.ipsList--stacked) > li{ padding-inline-start: var(--i-list-icon--wi); } .ipsList--icons:not(.ipsList--stacked) > li > i:first-child{ line-height: inherit; position: absolute; margin-inline-start: calc(var(--i-list-icon--wi) * -1); width: var(--i-list-icon--wi); padding-inline-end: .5em; text-align: center; } .ipsList--label-value > li{ display: flex; flex-wrap: wrap; gap: 0 1em; } /* Move values to end of row */ .ipsList--label-value:not(.ipsList--inline) .ipsList__value{ margin-inline-start: auto; text-align: end; } /* Stacked list items, with larger icon on top */ .ipsList--stacked{ --i-row-gap: 2em; --i-column-gap: 4em; } .ipsList--stacked > li{ display: grid; place-content: center; text-align: center; } .ipsList--stacked > li > i:first-child{ font-size: 1.6em; line-height: 1; margin-bottom: .5em; } /* Reposition labels and values for stats, so the large number appears on top in a hard color */ .ipsList--stats.ipsList--stacked .ipsList__label{ color: var(--i-color_soft); font-weight: 500; order: 1; } .ipsList--stats.ipsList--stacked .ipsList__value{ font-size: 1.5em; font-weight: 600; color: var(--i-color_hard); } /* Comma separated */ .ipsList--csv{ display: block; } .ipsList--csv > li{ display: inline; } .ipsList--csv > li:not(:last-child)::after{ content: ', '; }]]> /* ======================================================== */ /* LOADING THROBBERS */ @keyframes ipsLoading { 0% { transform: rotate(0turn); } 100% { transform: rotate(1turn); } } .ipsLoading { position: relative; } .ipsLoadingIcon{ width: 1em; height: 1em; font-size: 16px; display: inline-block; } .ipsLoadingIcon::before, .ipsLoading::before { content: ''; border-radius: 50%; width: 1em; height: 1em; border: calc(2px + .03em) solid transparent; border-color: color-mix(in srgb, var(--i-color_root) 10%, transparent); border-top-color: currentColor; box-sizing: border-box; display: inline-block; animation: ipsLoading 0.65s infinite linear; } .ipsLoading::before { position: absolute; top: 50%; left: 50%; margin-top: -.5em; margin-left: -.5em; font-size: 50px; } /* If the progress spinner has a message, reposition the loading icon to allow space for the message */ .ipsLoading[data-loading-text]::before{ top: calc(50% - 14px); transition: all 0.3s ease-in-out; } /* Otherwise reset it to it's centered position */ .ipsLoading[data-loading-text=""]::before{ top: 50%; } /* Display the spinner loading text as a pseudo element */ .ipsLoading[data-loading-text]::after{ content: attr(data-loading-text); position: absolute; top: calc(50% + 23px); left: 0; width: 100%; opacity: 1; transform: translateY(0); transition: all 0.3s ease-in-out; } /* Hide the text if no message is needed */ .ipsLoading[data-loading-text=""]::after{ opacity: 0; transform: translateY(9px); } .ipsLoading--small::before { font-size: 24px; } .ipsLoading--tiny::before { font-size: 16px; } /* Redirector */ .ipsRedirect { text-align: center; } .ipsRedirect--loading { min-height: 100px; } .ipsRedirect_progress { } .ipsRedirect_progress[data-loading-text]::after{ content: attr(data-loading-text); display: block; margin-top: 15px; } /* Hide the message if it's empty */ .ipsRedirect_progress[data-loading-text=""]::after{ display: none; } .ipsRedirectMessage { margin: 50px; } .ipsRedirect_manualButton { margin-top: 20px; } :where(a, span, button) { display: block; /* Flex can't be used here since it breaks ellipsis overflow */ padding: .6em 1.4em; color: inherit; width: 100%; border-radius: 5px; /* Used to prevent .ipsMenu_auto items from becoming too wide */ overflow: hidden; text-overflow: ellipsis; } .ipsMenu_item > :where(a, span, button) > :is(.fa-solid, .fa-regular, .fa-brands):first-child{ opacity: .5; width: 1.2em; margin-inline-end: .7em; text-align: center; } .ipsMenu_itemDisabled { opacity: .7; font-style: italic; cursor: default; pointer-events: none; } /* The soft color is used in Activity Stream filter menus */ .ipsMenu_item .i-color_soft{ color: inherit; opacity: .6; } /* Hover styles - Only apply :hover to certain devices */ .ipsMenu_item[data-selected] :is(a, span), .ipsMenu_item.ipsMenu_hover { background: var(--i-primary); color: var(--i-primary-contrast); } @media (any-hover:hover){ .ipsMenu_item:not(.ipsMenu_itemClicked, .ipsMenu_itemDisabled) a:hover, .ipsMenu_item > button:hover { background: var(--i-primary); color: var(--i-primary-contrast); } } .ipsMenu_item.i-color_negative a { color: var(--i-color_negative); } .ipsMenu_sep hr { border-top: 1px solid color-mix(in srgb, var(--i-co) 15%, transparent); margin: 6px; } .ipsMenu_subItems > :is(a,span,button){ position: relative; padding-inline-end: 1.8em; } .ipsMenu_subItems > :is(a,span,button)::after { font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; position: absolute; top: .65em; inset-inline-end: .65em; content: "\f0da"; } [dir="rtl"] .ipsMenu_subItems > :is(a,span)::after{ transform: scale(-1); } .ipsMenu_subItems .ipsMenu { position: absolute; } /* ======================================================== */ /* OTHER MENU */ .ipsMenu_title { padding: 1em 1.5em; font-size: .9em; font-weight: 600; text-transform: uppercase; color: var(--i-color_hard); } .ipsMenu_item + .ipsMenu_title{ margin-top: 2em; } .ipsMenu_headerBar, .ipsMenu_footerBar { padding: 1em 1.3em; } .ipsMenu_headerBar { border-bottom: 1px solid var(--i-background_3); border-radius: var(--i-popup--bo-ra) var(--i-popup--bo-ra) 0px 0px; display: flex; align-items: center; justify-content: space-between; } .ipsMenu_footerBar { border-top: 1px solid var(--i-background_3); border-radius: 0px 0px var(--i-popup--bo-ra) var(--i-popup--bo-ra); background-color: var(--i-background_2); } .ipsMenu_footerBarLink{ --i-co: var(--i-color_soft); display: flex; align-items: center; justify-content: center; gap: .5em; padding: 1em; margin: -1em -1.3em; font-weight: 600; color: var(--i-co); border-radius: inherit; } .ipsMenu_footerBarLink:hover{ background-color: color-mix(in srgb, var(--i-co) 8%, transparent); } .ipsMenu_footerBarLink .fa-arrow-right-long{ transition: transform .2s linear; opacity: .6; } .ipsMenu_footerBarLink:hover .fa-arrow-right-long{ transform: translateX(calc(.4em * var(--i-lang-dir))); } /* Counts for menu items */ .ipsMenu_item > a:has(.ipsMenu_itemCount){ display: flex; align-items: center; } .ipsMenu_itemCount, .ipsSideMenu_itemCount { padding: 0 .6em; background: color-mix(in srgb, var(--i-co) 20%, transparent); font-weight: 600; font-size: max(11px,0.8em); border-radius: 3px; } :is(.ipsMenu_itemCount, .ipsSideMenu_itemCount):last-child{ margin-inline-start: auto; } .ipsMenu_itemCount:last-child{ margin-inline-end: -1em; } /* Notifications in menus, eg: Account Settings */ [data-ips-scheme="dark"] .ipsMenu .ipsData__item{ border-color: var(--i-background_5); } .ipsMenu_item .ipsNotification{ position: static; margin-inline-start: auto; } /* Selectable items for menus */ .ipsMenu_selectable .ipsMenu_item :is(a, button), .ipsMenu_selectable .ipsMenu_item > span{ padding-inline-start: 35px; } .ipsMenu_selectable .ipsMenu_item :is(a, button)::before, .ipsMenu_selectable .ipsMenu_item > span::before { content: "\f10c"; font-size: 13px; position: absolute; font-family: var(--i-font-awesome); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 400; opacity: .25; inset-inline-start: 0; padding-inline-start: 17px; } .ipsMenu_selectable .ipsMenu_itemChecked :is(a, button), .ipsMenu_selectable .ipsMenu_itemChecked > span { font-weight: bold; } .ipsMenu_selectable .ipsMenu_itemChecked :is(a, button)::before, .ipsMenu_selectable .ipsMenu_itemChecked > span::before { content: "\f00c"; opacity: 1; font-weight: 900; } .ipsMenu_selectable button { width: 100%; } .ipsMenu_selectable button:not( .ipsButton--wide ) { text-align: start; } .ipsMenu_selectable .ipsMenu_item:not( [data-noselect] ) :is(input[type="radio"],input[type="checkbox"]) { display: none; } /* Selectable check all/check none */ .ipsMenu_selectable .ipsMenu_item a[data-role="selectAll"] { margin-inline-end: 15px; } /* ======================================================== */ /* SIDE MENUS */ .ipsSideMenu + .ipsSideMenu{ margin-top: 1.7em; } .ipsSideMenu__list{ color: var(--i-color_soft); } .ipsSideMenu__title, .ipsSideMenu__subTitle { font-weight: 600; font-size: 1.2em; color: var(--i-color_hard); margin-bottom: .6em; } .ipsSideMenu__subTitle { font-size: 1.1em; } .ipsSideMenu__subTitle:not(:first-child) { margin-top: 2em; } .ipsSideMenu_item { color: inherit; display: flex; align-items: center; gap: 0 .8em; padding: .8em 1.4em; position: relative; cursor: pointer; font-weight: 500; border-radius: min(var(--i-design-radius), .45em); width: 100%; /*