div { max-width: 500px; 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; } .ipsShareLink--bluesky { background: #59baff; } /* 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; } #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_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 */ .grecaptcha-badge{ bottom: calc(var(--i-mobileFooter--he) + 10px) !important; } } @media (min-width: 980px){ .ipsLayout:has(#elGuestTerms) .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; } /* 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: relative; /* This ensures dropdown menus are positioned correctly. Redundant once [popover] is implemented */ } .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 { gap: 0; display: grid; grid-auto-flow: row; /* 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; overflow: hidden; } .cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap{ 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; } /* 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; } .cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap::-webkit-scrollbar { display: none; } .cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap > .cWidgetContainer { scroll-snap-align: start; grid-row: 1; } .cWidgetContainer--carousel > .cWidgetContainer__carousel-wrap > .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:dir(rtl) { transform: scaleX(-1); } .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__carousel-wrap > .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 */ .cWidgetsManaging .ipsWidget{ isolation: isolate; } .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-inline-start: calc(var(--i-block--transform-offset) * 1px); } :not(:dir(rtl)).cWidgetContainer--carousel.cWidgetContainer--dragAfterLast > .cWidgetContainer__carousel-wrap > .cWidgetContainer { transform-origin: left; transform: translateX(calc(var(--i-block--transform-offset) * -1px)); } :dir(rtl).cWidgetContainer--carousel.cWidgetContainer--dragAfterLast > .cWidgetContainer__carousel-wrap > .cWidgetContainer { transform-origin: right; 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); } /* This is an edge case. For the images widget, the dimentions are defined by the widget itself but we still want the carousel option, so we hide them */ .cWidgetContainer__menu[data-widget-base^="app_cms_pagebuilderupload"] :is([data-role="area-min_size"], [data-role="area-gaps"]) { display: none; } @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; } /* This used to be done using visibility:hidden in the style attribute directly but that caused issues */ .cRulesForm [data-role="toggleFilter"] input[type="checkbox"][data-filter] { display: none; } @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; } a, .ipsControlStrip_button > button{ display: flex; align-items: center; justify-content: center; color: inherit; min-width: 2.4em; min-height: 2.4em; border-radius: 5px; width: 100%; } .ipsControlStrip_disabled { background: transparent; pointer-events: none; } .ipsControlStrip_disabled .ipsControlStrip_icon { opacity: .5; } .ipsTree_row:hover :where(.ipsControlStrip_button > :is(a, button)) { background: var(--i-background_3); } @media (hover:none){ .ipsControlStrip_button > :is(a, button):not(:hover){ background: var(--i-background_3); } } .ipsControlStrip_button > :is(a, button):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 { 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: span 2; 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-preview > .ipsFieldRow__content { padding: 1em; } .ipsFieldRow--badge-creator-icon { grid-column: span 4; } .ipsBadgePicker--include-number-overlay .ipsFieldRow--badge-creator-icon { grid-column: span 2; } [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; } } [data-controller="ips.core.badgepreview"] svg { -webkit-filter: drop-shadow( 2px 2px 4px var(--i-color_root)); filter: drop-shadow( 2px 2px 4px var(--i-color_root)); } /* Remove redundant borders and improve spacing for tabbed content, ie. ACP > Settings */ .acpFormTabContent .ipsBox{ border-width: 0; border-radius: 0; } /* Sticky submit row */ .ipsSubmitRow{ position: -webkit-sticky; position: sticky; bottom: 0; z-index: 3; /* High enough to overlap editor */ } /* When an editor dropdown menu is open, increase the z-index of the toolbar to ensure the toolbar/dropdown sits above the sticky .ipsSubmitRow element */ .ipsEditor__toolbar--main:has(.ipsEditor__anchored-panel:not([hidden])){ z-index: 4; } /* Remove sticky footer when selectTree is active, otherwise the footer overlaps it */ .ipsForm:has(.ipsSelectTree_active) + .ipsSubmitRow{ position: static; }]]> 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; } @media (hover: none) and (max-width: 1024px) { #acpSearchKeyword{ font-size: max(16px, 1em); } } #acpSearchKeyword::-webkit-input-placeholder { color: var(--i-color_soft); opacity: 1; } #acpSearchKeyword::placeholder { color: var(--i-color_soft); opacity: 1; } .acpSearch__close{ /* display: grid; place-content: center; width: 2em; height: 2em; background-color: var(--i-background_1); border-radius: 5px; margin: 0 6px; */ display: none; } /* Hide close button if the search menu is hidden */ /* This causes laggy tooltips in Chrome, so lets hide the close icon for the mean time */ /* body:has(#acpLiveSearchResults:not([style*="block"])) .acpSearch__close{ display: none; } */ /* Admin controls */ #elAdminControls { display: flex; align-items: center; flex: 0 0 auto; font-size: 13px; font-weight: 600; margin-inline-start: auto; } #elAdminControls > li > a, #elAdminControls > li > button { color: inherit; display: flex; align-items: center; gap: .5em; padding: 0 15px; border-radius: 4px; min-height: 40px; } @media (hover){ #elAdminControls > li > a:hover, #elAdminControls > li > button:hover { background: var(--i-background_3); } } .acpHighlightLink_wrap{ position: relative; } #elAdminControls .acpHighlightLink { color: hsl(129 70% 40%); } [data-ips-scheme="dark"] #elAdminControls .acpHighlightLink { color: hsl(129 60% 70%); } #elAdminControls .acpHighlightLink_wrap:hover .acpHighlightLink{ background: color-mix(in srgb, currentColor 12%, transparent); } #elAdminControls .acpHighlightLink_close{ position: absolute; top: -6px; inset-inline-end: -6px; opacity: 0; } #elAdminControls .acpHighlightLink_close a{ font-size: 11px; width: 1.9em; height: 1.9em; display: flex; justify-content: center; align-items: center; border-radius: 20px; color: #fff; background: hsl(129 30% 50%); } [data-ips-scheme="dark"] #elAdminControls .acpHighlightLink_close a{ background: hsl(129 40% 30%); } #elAdminControls .acpHighlightLink_wrap:hover .acpHighlightLink_close{ opacity: 100%; } #elAdminControls .acpHighlightLink_close i{ opacity: 1; } /* Notifications icon */ #elAdminControls .ipsNotification{ top: 0; inset-inline-end: 0; } #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; } /* Page titles */ #acpPageHeader { padding: 25px 15px 10px 15px; position: relative; } #acpPageHeader .ipsType_pageTitle { color: inherit; font-weight: 500; font-size: 26px; min-width: 0; } .ipsBreadcrumb--acp { margin-bottom: 10px; } .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; } /* Prevent content areas from collapsing (Statistics overview) */ #acpContent > *{ flex: 0 0 auto; } .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[data-role="advicePopup"] { display: none; 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 { padding: 1em; padding-bottom: max(env(safe-area-inset-bottom), 1em); background: #000; } .cMobileNav_utilities a { color: #fff; } /* NOTIFICATIONS */ .cAcpNotifications { font-size: 20px; position: relative; } @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. Deprecated as of 5.0.10 */ /* 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; top: env(safe-area-inset-top); 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; top: calc(env(safe-area-inset-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); -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); -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_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: var(--i-z-index_headerPrimary); box-sizing: content-box; height: 61px; padding: 0 10px; padding-top: env(safe-area-inset-top); box-shadow: hsl(0 0% 0% / .1) 0px 1px 0px 0px; } /* Mobile */ @media (max-width: 979px){ #acpAppMenu{ display: none; } }]]> *{ overflow: auto; } }]]> .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); -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); -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); -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; } /* Sometimes .ipsTree_controls have different button amounts. This makes them all the same width */ .ipsTree:has(.ipsControlStrip > li:nth-child(2)) .ipsControlStrip{ min-width: calc((2.4em + 4px) * 2); } .ipsTree:has(.ipsControlStrip > li:nth-child(3)) .ipsControlStrip{ min-width: calc((2.4em + 4px) * 3); } .ipsTree:has(.ipsControlStrip > li:nth-child(4)) .ipsControlStrip{ min-width: calc((2.4em + 4px) * 4); } @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; } /* Reset form alignment in dropdowns */ .iDropdown .ipsFieldRow__label{ place-items: start !important; } } /* Increase gaps in forms */ .ipsFieldRow{ column-gap: 1.5em; padding: 1.5em; } /* Add background to form section headers */ .ipsFieldRow__section{ background-color: var(--i-background_3); border: 1px solid var(--i-background_5); border-width: 1px 0; margin-top: -1px; } .ipsFieldRow__section:first-child{ margin-top: 0; border-top-width: 0; } /* Add radius if it's the first element in a non-tab element */ .ipsFieldRow__section:not(.ipsTabs__panel *):first-child{ border-top-left-radius: var(--i-box--bo-ra); border-top-right-radius: var(--i-box--bo-ra); } /* 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; width: 100%; } #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; } /* ACP Off-canvas menus should occupy full height */ .ipsApp_admin .ipsOffCanvas__panel{ bottom: 0; } .ipsApp_admin .ipsOffCanvas__scroll{ padding-bottom: calc(env(safe-area-inset-bottom) + 1em); } .ipsApp_admin .ipsOffCanvas__nav-title:first-child{ padding-top: 1em; } .ipsApp_admin i-details-content a::before{ content: "-"; margin-inline-end: .3em; opacity: .3; }]]> /** * This file is for your custom CSS. * This file is not modified or overwritten during upgrades */ #emoticonsManagement [data-role="dragHandle"] { cursor: move; } .cEmoticons_box { background: var(--i-background_1); border-radius: 6px; box-shadow: color-mix(in srgb, var(--i-color_root) 10%, transparent) 0px 0px 0px 1px; position: relative; } .cEmoticons_box [data-delete] { position: absolute; top: 5px; inset-inline-end: 5px; } #emoticonsManagement img { height: 100px; width: 100%; object-fit: scale-down; } .cTranslateTable .ipsTable_wrap { max-width: 220px; } .cTranslateTable_field { position: relative; } .cTranslateTable_field [data-action] { display: none; position: absolute; bottom: 10px; z-index: 4000; line-height: 20px; } .cTranslateTable_field_focus textarea ~ [data-action] { display: block; } .cTranslateTable_field [data-action="saveWords"] { inset-inline-end: 10px; } .cTranslateTable_field [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[aria-selected="true"] { 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); -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__item{ display: flex; gap: 2em; padding: 2em 0; border-bottom: 1px solid var(--i-background_4); } .cOnboardBox__stepIcon { flex: 0 0 1em; text-align: center; font-size: 24px; opacity: .3; } .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 ---------------- */ /* Reset all elements to ideal format */ *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; min-width: 0; min-height: 0; } html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; accent-color: var(--i-primary); } hr{ color: inherit; } hr, iframe, fieldset{ border-width: 0; } iframe:where([src*="youtube."], [src*="youtube-nocookie."], [src*="vimeo."], [src*="dailymotion."]){ 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: 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: 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; font-weight: normal; /* Fix the serif font from appearing in Safari. Last tested in 18.3 */ } [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; } :where([popover]){ background: none; border-width: 0; /* Safari bug fix: popovers can fall under other elements during their closing transition without this */ z-index: 9999; } /* Ensure closed popovers are always hidden */ [popover]:not(#x):not(:popover-open) { display: none; } /* Polyfill */ @supports not selector(:popover-open) { :where([popover]){ display: block; } [popover]:not(#x):not(.\:popover-open) { display: none; } } :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_6); --dark__i-link--co: var(--i-base-contrast_6); --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); } /* ---------------- - Structure: Everything like spacing, dimensions, z-index and fonts is defined below. ---------------- */ :root{ --i-range: clamp(0rem, (100vw - 30 * var(--i-rem)) / (70 - 30), var(--i-rem)); --i-rem: calc(1rem / 16 * var(--set__i-font-size)); --i-link--te-de: none; --i-link-hover--te-de: none; /* ---------------- - Focus ---------------- */ --i-outline-width: 2px; --i-outline-style: solid; --i-outline-color: currentColor; --i-outline-offset: 2px; /* ---------------- - Typography ---------------- */ --i-font-size: var(--i-font-size_1); --i-font-size_-3: calc(var(--i-font-size_1) * .8); --i-font-size_-2: calc(var(--i-font-size_1) * .87); --i-font-size_-1: calc(var(--i-font-size_1) * .95); --i-font-size_1: var(--i-rem); --i-font-size_2: calc(var(--i-font-size_1) * 1.08); --i-font-size_3: calc(var(--i-font-size_1) * 1.3); --i-font-size_4: calc(var(--i-font-size_1) * 1.45 + .15 * var(--i-range)); --i-font-size_5: calc(var(--i-font-size_1) * 1.6 + .2 * var(--i-range)); --i-font-size_6: calc(var(--i-font-size_1) * 1.9 + .3 * var(--i-range)); --i-font-size_7: calc(var(--i-font-size_1) * 2.2 + .5 * var(--i-range)); --i-font-size_user-content: calc(var(--i-font-size_1) * 1.1); --i-font-family_system-ui: system-ui; --i-font-family_arial: "Arial"; --i-font-family_bitter: "Bitter"; --i-font-family_classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif; --i-font-family_geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif; --i-font-family_georgia: Georgia, Times, "Times New Roman", serif; --i-font-family_humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif; --i-font-family_helvetica: "Helvetica Neue", "Helvetica", Arial; --i-font-family_instrument-sans: "Instrument Sans"; --i-font-family_inter: "Inter"; --i-font-family_manrope: "Manrope"; --i-font-family_merriweather-sans: "Merriweather Sans"; --i-font-family_monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --i-font-family_old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif; --i-font-family_open-sans: "Open Sans"; --i-font-family_pathway-extreme: "Pathway Extreme"; --i-font-family_roboto-flex: "Roboto Flex"; --i-font-family_roboto-serif: "Roboto Serif"; --i-font-family_roboto-slab: "Roboto Slab"; --i-font-family_rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif; --i-font-family_source-sans-3: "Source Sans 3"; --i-font-family_tahoma: Tahoma, Verdana, Segoe, sans-serif; --i-font-family_transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; --i-font-family_trebuchet-ms: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; --i-font-family_verdana: Verdana, Segoe, sans-serif; --i-font-awesome: "Font Awesome 6 Free"; --i-font-family: var(--set__i-font-family, system-ui), system-ui, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --i-font-weight: 400; /* ---------------- - Spacing ---------------- */ --i-sp_1: calc(var(--i-rem) * .5); --i-sp_2: calc(var(--i-rem) * 1); --i-sp_3: calc(var(--i-rem) * 2); --i-sp_4: calc(var(--i-rem) * 3.5); --i-sp_5: calc(var(--i-rem) * 5); --i-sp_6: calc(var(--i-rem) * 6.5); --i-sp_7: calc(var(--i-rem) * 8); --i-sp_8: calc(var(--i-rem) * 9.5); --i-sp_9: calc(var(--i-rem) * 11); --i-sp_block: calc(var(--i-rem) * 1.5); /* ---------------- - z-index ---------------- */ --i-z-index_sticky: 4; --i-z-index_headerPrimary: 5; --i-z-index_offCanvas: 8; --i-z-index_mobileFooter: 10; /* ---------------- - Layout ---------------- */ --i-layout-width: calc(var(--set__i-layout-width) * 1px); --i-layout-gutter: clamp(15px, 3vw, 40px); --i-header-row--he: 2em; --i-headerTop--he: calc(var(--set__i-header-top--he) * 1px); --i-headerPrimary--he: calc(var(--set__i-header-primary--he) * 1px); --i-headerSecondary--he: calc(var(--set__i-header-secondary--he) * 1px); --i-mobileHeader--he: calc(var(--set__i-mobile-header--he) * 1px); /* Define an offset for sticky headers */ --i-sticky-offset--large: 0px; --i-sticky-offset--small: 0px; --i-sticky-offset: calc(env(safe-area-inset-top) + var(--i-sticky-offset--large) + var(--i-sticky-offset--extra, 0px)); --i-search--wi: 280px; --i-search--he: 36px; --i-mobileFooter--he: calc(55px + env(safe-area-inset-bottom)); /* ---------------- - Navigation bar ---------------- */ --i-nav--fo-we: 700; --i-nav--te-tr: uppercase; --i-nav--fo-si: max(12px, .8em); --i-nav--bo-ra: 5px; --i-nav--pa: .8em 1.8em; --i-nav--ba-co: transparent; --i-nav--co: currentColor; --i-nav-hover--co: currentColor; --i-nav-hover--ba-co: color-mix(in srgb, currentColor 8%, transparent); --i-nav-active--co: currentColor; --i-nav-active--ba-co: color-mix(in srgb, currentColor 14%, transparent); --i-nav-dropdown-arrow: 6px; --i-nav-dropdown-offset: 8px; --i-nav-dropdown--co: var(--i-color_root); --i-nav-dropdown-hover--co: var(--i-color_hard); --i-nav-dropdown-hover--ba-co: color-mix(in srgb, var(--i-nav-dropdown-hover--co) 6%, transparent); --i-nav-dropdown-active--ba-co: var(--i-primary); --i-nav-dropdown-active--co: var(--i-primary-contrast); /* ---------------- - Boxes ---------------- */ --i-design-radius: calc(var(--set__i-design-radius) * 1px); --i-box--bo-ra: var(--i-design-radius); --i-box--bo-wi: calc(var(--set__i-design-border) * 1px); --i-box--bo-st: solid; --i-box--pa-bl: var(--i-sp_3); --i-box--pa-in: var(--i-sp_3); --i-widget--bo-ra: var(--i-box--bo-ra); --i-widget--bo-wi: var(--i-box--bo-wi); --i-widget--bo-st: var(--i-box--bo-st); --i-widget--bo-sh: var(--i-box--bo-sh); --i-widget--ba-co: var(--i-box--ba-co); --i-widget--bo-co: var(--i-box--bo-co); --i-data--bo-co: var(--i-background_4); /* ---------------- - Buttons ---------------- */ --i-button--bo-wi: 1px; --i-button--bo-st: solid; --i-button--bo-sh: none; --i-button--fo-we: 600; --i-button--pa-bl: .7em; --i-button--pa-in: 1.2em; /* ---------------- - Inputs ---------------- */ --i-input--pa-bl: .7em; --i-input--pa-in: 1em; --i-input--bo-wi: 1px; --i-input--bo-ra: min(var(--i-design-radius), .4em); --i-input--bo-co: color-mix(in srgb, currentColor 35%, transparent); --i-input--bo-sh: hsl(0 0% 0% / .08) 0px 2px 1px; --i-input-hover--bo-co: color-mix(in srgb, currentColor 70%, transparent); --i-input-active--bo-co: var(--i-primary); --i-placeholder--op: .75; /* ---------------- - Other ---------------- */ --i-avatar--bo-ra: calc(50% * var(--set__i-avatar-radius) + min(3px, 15%)); --i-thumb--bo-ra: min(var(--i-design-radius), 6px); --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); /* ---------------- - Style queries: Enable/disable certain features using CSS variables ---------------- */ --i-inherited-footer-widgets: true; } [data-ips-scheme="dark"]{ --i-popup--bo-sh: 0 20px 80px hsl(0 0% 0% / 80%), 0px 10px 20px hsl(0 0% 0% / 10%); } [data-ips-theme-setting-mobile-icons-location="header"]{ --i-mobileFooter--he: 0px; } @media (max-width: 979px){ :root{ --i-box--pa-bl: var(--i-sp_2); --i-box--pa-in: var(--i-sp_2); --i-sticky-offset: calc(env(safe-area-inset-top) + var(--i-sticky-offset--small) + var(--i-sticky-offset--extra, 0px)); } } [dir="ltr"]{ --i-lang-dir: 1; } [dir="rtl"]{ --i-lang-dir: -1; } /* color-mix fallback */ @supports not (color: color-mix(in srgb, red, red)){ :root{ --i-input--bo-co: var(--i-background_6); --i-input--bo-sh: hsl(0 0% 0% / .08) 0px 2px 1px; --i-input-hover--bo-co: currentColor; } } :popover-open{ --i-sticky-offset: 0px; } .\:popover-open{ --i-sticky-offset: 0px; } "; 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; } @property --i-badge { syntax: ""; inherits: true; initial-value: black; } @property --i-co { syntax: ""; inherits: true; initial-value: black; } :root{ color-scheme: light dark; --i-co: var(--i-color_root); /* 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(.1, (.60 - l) * 1000, .95) min(c, .04) 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; --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); } [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%); /* Rich text colors */ --i-color_red: hsl(0 100% 45%); --i-color_orange: hsl(30 100% 45%); --i-color_yellow: hsl(50 100% 45%); --i-color_green: hsl(100 85% 45%); --i-color_blue: hsl(210 100% 45%); --i-color_indigo: hsl(260 100% 40%); --i-color_violet: hsl(300 100% 40%); /* ---------------- - Assign colors to elements ---------------- */ /* Header */ --i-nav-dropdown--ba-co: var(--i-background_1); /* 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: hsl(0 0% 0% / 12%) 0px 0px 0px 1px, hsl(0 0% 0% / 0.25) 0px 20px 50px, hsl(0 0% 0% / .2) 0px 13px 13px -13px; --i-dropdown-arrow--bo-co: color-mix(in srgb, var(--i-color_hard) 10%, transparent); /* Inputs */ --i-input--ba-co: var(--i-background_1); --i-select--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"); /* 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%); /* Rich text colors */ --i-color_red: hsl(0 70% 60%); --i-color_orange: hsl(30 70% 60%); --i-color_yellow: hsl(50 70% 60%); --i-color_green: hsl(100 70% 50%); --i-color_blue: hsl(210 90% 60%); --i-color_indigo: hsl(260 90% 70%); --i-color_violet: hsl(300 70% 60%); /* ---------------- - Assign colors to elements ---------------- */ /* Header */ --i-nav-dropdown--ba-co: var(--i-background_2); /* 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: inset hsl(0 0% 100% / 10%) 0px 0px 0px 1px, hsl(0 0% 0% / 90%) 0px 0px 0px 1px, hsl(0 0% 0% / 60%) 0px 20px 100px; --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%); --i-select--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"); } /* 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); --i-nav-dropdown--bo-sh: hsl(0 0% 0% / .1) 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: hsl(0 0% 0% / .1); --i-dropdown--bo-sh: hsl(0 0% 0% / .1) 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: hsl(0 0% 0% / .1); } } /* 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 ---------------- */ /* 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)); overflow-x: hidden; overflow-y: scroll; } 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: 1em; text-align: center; } .fa-ips{ display: inline-block; min-width: 1.2em; text-align: center; flex: 0 0 auto; font-family: var(--i-font-awesome); -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"; } /* Resize classic emoticons since they're 2x */ .ipsRichText .ipsEmoji:is( [title="classic_angry"], [title="classic_biggrin"], [title="classic_blink"], [title="classic_blush"], [title="classic_cool"], [title="classic_dry"], [title="classic_happy"], [title="classic_huh"], [title="classic_laugh"], [title="classic_love"], [title="classic_mellow"], [title="classic_ohmy"], [title="classic_ninja"], [title="classic_rolleyes"], [title="classic_sad"], [title="classic_sleep"], [title="classic_smile"], [title="classic_tongue"], [title="classic_unsure"], [title="classic_wacko"], [title="classic_wink"], [title="classic_love"] ) img{ width: 24px; vertical-align: middle; } /* Flip the arrow direction in RTL */ [dir="rtl"] .fa-angles-left{ --fa: "\f101"; } [dir="rtl"] .fa-angles-right{ --fa: "\f100"; } [dir="rtl"] .fa-angle-left{ --fa: "\f105"; } [dir="rtl"] .fa-angle-right{ --fa: "\f104"; } [dir="rtl"] .fa-arrow-left-long{ --fa: "\f178"; } [dir="rtl"] .fa-arrow-right-long{ --fa: "\f177"; } [dir="rtl"] .fa-arrow-left{ --fa: "\f061"; } [dir="rtl"] .fa-arrow-right{ --fa: "\f060"; } /* ---------------- - 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); } /* ---------------- - PWA sticky fix ---------------- */ /* This element improves the display of sticky elements in PWAs. It sits under the status bar when sticky elements are stuck */ .ipsPwaStickyFix{ display: none; } @media (display-mode: standalone){ .ipsPwaStickyFix{ display: block; position: sticky; background-color: var(--i-background_1); top: 0; height: 0; z-index: var(--i-z-index_sticky, 4); border-top-left-radius: inherit; border-top-right-radius: inherit; } .ipsPwaStickyFix::after{ content: ""; height: env(safe-area-inset-top); top: 0; left: 0; right: 0; position: absolute; background: inherit; border-top-left-radius: inherit; border-top-right-radius: inherit; } } /* PWA Loading indicator */ i-pwa-loading{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } i-pwa-loading::before{ content: ""; height: 6px; display: block; width: 50vw; border-radius: 10px; background: var(--i-primary); animation-name: ipsPwaLoader; animation-duration: 1s; animation-iteration-count: infinite; transform-origin: 0 0; } @keyframes ipsPwaLoader{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(100vw); } } /* This fixes the following iOS PWA bug, last tested on 18.6: - Focus tiptap - Press Done to dismiss keyboard - Scroll to top via status bar - Open off-canvas menu - Mobile footer disappears */ @supports (-webkit-hyphens: auto){ @media (display-mode: standalone){ html:has(.ipsOffCanvas:not([hidden])){ padding-bottom: 1px; } } } li{ display: contents; } /* Hide badge container if it doesn't contain a badge */ .ipsBadges:not(:has(.ipsBadge)){ 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; overflow-wrap: anywhere; /* Necessary for custom fields in Pages */ 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: 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"; -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)); white-space: nowrap; /* Prevent "RARE" from breaking with translations or Windows fonts */ padding: 0 .3em; pointer-events: none; /* Prevents the badge tooltip from working */ } /* 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; color: #fff; background-color: var(--i-color_negative); font-weight: bold; width: 2em; height: 2em; border-radius: 50%; font-size: 1.12em; } .ipsWarningPoints--removed { background: var(--i-color_soft); background-color: color-mix(in hsl, var(--i-color_soft) 10%, transparent); } .ipsWarningPoints--small { font-size: .85em; vertical-align: middle; } /* Container titles, with featured colors */ .ipsContainerTitle{ font-weight: 600; color: var(--i-color_featured, var(--i-featured, var(--i-color_hard))); }]]> 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; } .ipsWidget__nav a[aria-current="page"]{ background-color: var(--i-background_3); color: var(--i-color_hard); } /* ---------------- - 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, .ipsPull .ipsButtonBar{ 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(.ipsButton)){ 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 */ .ipsButtons .ipsButton--primary{ flex-grow: 3; } /* 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%; } .ipsButtons:has(.ipsButtonGroup) .ipsButton--primary{ flex: 999 1 auto; } .ipsButtons .ipsButton--text{ --i-button--pa-in: 1em; } } /* Button groups */ .ipsButtonGroup{ --i-co: var(--i-color_soft); --i-outline-color: currentColor; align-items: stretch; background-clip: padding-box; background-color: var(--i-background_1); border: 1px solid color-mix(in srgb, var(--i-co) 20%, transparent); border-radius: calc(var(--i-button--bo-ra) * 1px); box-shadow: hsl(0 0% 0% / .06) 0px 2px 3px; color: var(--i-co); display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; vertical-align: baseline; } .ipsButtonGroup--small{ --i-button--pa-bl: .8em; --i-button--pa-in: 1.2em; --i-button--fo-si: .85em; } .ipsPageHeader .ipsButtonGroup{ display: flex; } .ipsButtonGroup .ipsButton{ flex: 1 1 auto; } .ipsButton{ --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); align-items: center; 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); color: var(--i-button--co); cursor: pointer; display: inline-flex; font-size: var(--i-button--fo-si, inherit); font-weight: var(--i-button--fo-we); gap: 0 .6em; justify-content: center; 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; vertical-align: baseline; } /* Fallback */ @supports not (color: color-mix(in srgb, red, red)){ .ipsButton{ --i-button-hover--ba-co: var(--i-button--ba-co); } } /* Flex gap fallback for < iOS 14.1 */ @supports (-webkit-touch-callout: none) and (not(translate: none)){ .ipsButton > :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{ height: 1em; width: auto; } .ipsButton:active{ transform: translateY(1px); } @media (any-hover:hover){ .ipsButton:hover{ background-color: var(--i-button-hover--ba-co); } } .ipsButtonGroup > li{ display: contents; } .ipsButtonGroup .ipsButton{ border-radius: max(0px, var(--i-button--bo-ra) * 1px - 3px); flex: 1 1 auto; padding-top: calc(var(--i-button--pa-bl) - 3px); padding-bottom: calc(var(--i-button--pa-bl) - 3px); } .ipsButtonGroup .ipsButton:where(:hover){ background-color: var(--i-background_3); color: var(--i-color_hard); } .ipsButtonGroup .ipsButton--active{ --i-outline-color: var(--i-secondary); background-color: var(--i-secondary); color: var(--i-secondary-contrast); } .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-button--ba-co); --i-button--co: var(--i-secondary-button--co); } .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); } .ipsButton--follow-active{ --i-button--ba-co: var(--i-secondary); --i-button--co: var(--i-secondary-contrast); } .ipsButton[disabled], .ipsButton[aria-disabled="true"], .ipsButton--disabled{ filter: grayscale(1) opacity(60%); pointer-events: none; cursor: not-allowed; } /* Follow buttons */ [data-controller="core.front.core.followButton"]{ display: contents; } .ipsButton--follow{ padding: 0; gap: 0; } .ipsButton--follow > a, .ipsButton--follow > span{ 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; } } /* Automatic contrast for inherited buttons in ipsButtons--main */ :where(.ipsButtons--main:not(.ipsBox *)){ --i-co: var(--i-color_contrast, currentColor); color: var(--i-co); } .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); -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"; } /* 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) * 1px); 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: #000000; } .ipsSocial--linkedIn { background: #007eb3; } .ipsSocial--google { background-color: #4285F4; } .ipsSocial--internal { background-color: #008b00; }]]> "; inherits: true; initial-value: 0; } @property --_card-backdrop-transition{ syntax: ""; inherits: true; initial-value: 0; } i-card{ --i-card--ba-co: var(--i-box--ba-co); --i-card--bo-sh: hsl(0 0% 0% / .4) 0px 20px 60px; --_card-backdrop-transition: 0; --_card-backdrop-scroll: 100; --i-card--tr-du: .3s; --i-card--bo-ra: 10px; display: flex; flex-direction: column; scrollbar-width: none; width: 100%; height: 100%; transition-property: display, overlay, --_card-backdrop-transition; transition-behavior: allow-discrete; transition-timing-function: ease-in; transition-duration: var(--i-card--tr-du); } /* Prevents Chrome 133 from crashing when closing the popover */ @supports (-webkit-app-region: drag) and (not (appearance: base-select)) { i-card{ transition-behavior: normal; } } [data-ips-scheme="dark"] i-card{ --i-card--bo-sh: inset hsl(0 0% 100% / .1) 0px 1px 0px, hsl(0 0% 0% / 0.9) 0px 30px 60px, hsl(0 0% 0% / .3) 0px 0px 0px 1px; } html:has(i-card:popover-open){ overflow: hidden; } html:has(i-card.\:popover-open){ overflow: hidden; } i-card:popover-open{ --_card-backdrop-transition: 100; } i-card.\:popover-open{ --_card-backdrop-transition: 100; } @starting-style{ i-card:popover-open{ --_card-backdrop-transition: 0; } } /* We need to use a pseudo element here since Safari instantly deletes the ::backdrop from the DOM on close. Last checked in 18.6 */ i-card::before{ content: ""; position: fixed; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background: hsl(0 0% 0% / .6); opacity: calc(var(--_card-backdrop-transition) * 1%); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } i-card::-webkit-scrollbar{ -webkit-appearance: none; display: none; width: 0px; } /* Prevent outside styles from leaking in */ .iCard:not(#x){ font-size: var(--i-rem); font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-shadow: none; text-transform: none; } /* Card */ .iCard{ background: var(--i-card--ba-co); color: var(--i-color_root); border-radius: var(--i-card--bo-ra, 8px); box-shadow: var(--i-card--bo-sh); display: flex; flex-direction: column; /* Sit on top of fixed background */ position: relative; min-height: min(15em, 100% - 50px); max-height: calc(100% - env(safe-area-inset-top) - 50px); transition-timing-function: ease-in-out; transition-duration: var(--i-card--tr-du); } /* Light dismiss button */ .iCardDismiss{ /* Ensure this element is hidden but still usable, since parent styles can leak in (background colors, etc) */ opacity: 0; -webkit-tap-highlight-color: transparent; width: 100%; height: 100%; flex: 0 0 auto; } /* Large screens: Centered card */ @media (min-width: 601px){ .iCard{ margin: auto; width: min(800px, 100% - 40px); transition-property: opacity, translate; opacity: 0; translate: 0 100px; } :popover-open > .iCard{ opacity: 1; translate: 0 0; } .\:popover-open > .iCard{ opacity: 1; translate: 0 0; } @starting-style{ :popover-open > .iCard{ opacity: 0; translate: 0 100px; } } /* This element is only needed on small devices for swipe-to-dismiss */ .iCardSwipe{ display: none; } /* Full-screen dismiss button */ .iCardDismiss{ position: fixed; } } /* Small screens: Card is attached to bottom of screen */ @media (max-width: 600px){ i-card{ overflow-y: scroll; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; } /* When the card is swiped away, instantly allow scroll events to take place instead of waiting for the transition to finish */ i-card:not(:popover-open){ pointer-events: none; } /* Fading backdrop */ i-card::before{ opacity: min(var(--_card-backdrop-scroll, 1) / var(--_card-backdrop-height, 1) * 100%, var(--_card-backdrop-transition) * 1%); } @supports ((animation-timeline: scroll()) and (animation-range: 0 100%)){ i-card::before{ opacity: min(var(--_card-backdrop-scroll) * 1%, var(--_card-backdrop-transition) * 1%); } } /* Swipe to dismiss */ .iCardSwipe{ flex: 0 0 auto; display: block; height: 25px; margin-bottom: 20px; scroll-snap-align: start; } .iCard{ flex: 0 0 auto; /* Full width, touching bottom of screen */ width: 100%; margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: env(safe-area-inset-bottom); /* Height + drag handle */ translate: 0 calc(100% + 20px); transition-property: translate; } :popover-open > .iCard{ translate: 0 0; } @starting-style{ :popover-open > .iCard{ translate: 0 calc(100% + 20px); } } .\:popover-open > .iCard{ translate: 0 0; } /* Touch enhancements */ @media (hover:none){ /* Drag handle */ i-card:defined .iCard::before{ content: ""; display: block; background: hsl(0 0% 100% / .6); box-shadow: inset 0px 1px 0px hsl(0 0% 100% / .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 6px; width: 50px; height: 6px; position: absolute; top: -14px; left: calc(50% - 25px); pointer-events: none; } /* Elastic background */ .iCard::after{ content: ""; display: block; height: 1px; box-shadow: 0px 220px 0px 220px var(--i-card--ba-co); } } /* Scroll snapping */ i-card::after{ content: ""; display: block; height: 1px; margin-top: -1px; scroll-snap-align: end; } /* Zero-JS fallback: Prevent the dismiss button from causing a scrollbar since swipe-to-dismiss isn't available */ i-card:not(:defined) .iCardDismiss{ flex: 1 1 auto; } } .iCard__header{ flex: 0 0 auto; padding: 1.2em 1.5em; color: var(--i-color_hard); border-bottom: 1px solid var(--i-background_5); display: flex; align-items: center; font-size: 1.2em; font-weight: 500; } :where(.iCard__header) a{ color: inherit; } :where(.iCard__header a):hover{ text-decoration: underline; } .iCard__close{ width: 2em; height: 2em; display: grid; place-content: center; border-radius: min(var(--i-design-radius), 5px); opacity: .6; margin: -.8em; margin-inline-start: auto; } .iCard__close:hover{ background: color-mix(in hsl, currentColor 10%, transparent); } .iCard__close::before{ content: "\f00d"; font-family: var(--i-font-awesome); -webkit-font-smoothing: antialiased; text-rendering: auto; font-weight: 900; } .iCard__content{ overflow: auto; scrollbar-width: thin; flex: 1 1 auto; } .iCard__footer{ flex: 0 0 auto; padding: 1em; color: var(--i-color_soft); border-top: 1px solid var(--i-background_5); font-weight: 500; } a.iCard__footer{ display: block; text-align: center; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } a.iCard__footer:hover{ background: color-mix(in srgb, currentColor 6%, transparent); } /* Fade out the backdrop when scrolling to dismiss */ @supports ((animation-timeline: scroll()) and (animation-range: 0 100%)){ @keyframes iCardScroll{ from{ --_card-backdrop-scroll: 0; } } i-card:defined{ animation: iCardScroll linear forwards; animation-timeline: scroll(self); animation-range: 0 100%; } }]]> *{ 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)){ padding-top: 2em; } /* If the carousel needs padding, the bottom navigation probably needs a space too */ :where(.ipsCarousel--padding + .ipsCarouselNav){ padding-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); touch-action: manipulation; } @media (any-hover:hover){ .ipsCarouselNav__button:hover{ background: color-mix(in srgb, currentColor 4%, transparent); } } [dir="ltr"] [data-carousel-arrow="prev"] .fa-ips::before, [dir="rtl"] [data-carousel-arrow="next"] .fa-ips::before{ content: "\f104"; } [dir="rtl"] [data-carousel-arrow="prev"] .fa-ips::before, [dir="ltr"] [data-carousel-arrow="next"] .fa-ips::before{ content: "\f105"; } /* ---------------- - 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 .ipsThumb{ display: block; } .ipsCarousel--images :is(.ipsThumb, .ipsFigure){ aspect-ratio: var(--i-ratio, auto); height: var(--_height); width: auto; } .ipsCarousel--images .ipsThumb 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; } .ipsComposeAreaWrapper{ background: var(--i-background_2); padding: 1.4em; } /* Add a border and inherit the border-radius when necessary (eg. database reviews/comments) */ .ipsBox .ipsComposeAreaWrapper{ border-radius: 0 0 var(--i-box--bo-ra) var(--i-box--bo-ra); border-top: 1px solid var(--i-background_4); } /* Join the conversation */ .cGuestTeaser{ padding: 2em; } .ipsComposeAreaWrapper .cGuestTeaser{ padding: 0; margin-bottom: 2em; } /* Editor ipsBox */ .ipsComposeArea{ display: flex; gap: 1.2em; } .ipsComposeArea__photo{ flex: 0 0 50px; } @media (max-width: 767px){ .ipsComposeArea__photo{ display: none; } } .ipsComposeArea_editor{ flex: 1 1 100%; } @media (min-width: 768px){ .ipsComposeArea__photo + .ipsComposeArea_editor .ipsEditor::before{ content: ''; width: 10px; height: 10px; position: absolute; border: inherit; border-inline-end-width: 0 !important; border-bottom-width: 0 !important; top: 19px; inset-inline-end: calc(100% - 5px); transform: rotate(calc(-45deg * var(--i-lang-dir))); background: var(--i-background_1); box-sizing: content-box; } .ipsComposeArea__photo + .ipsComposeArea_editor .ipsEditor:focus-within::before{ border-color: var(--i-input-active--bo-co); } } .ipsComposeArea_editor .ipsNotification { top: 0; } .ipsComposeArea_dummy { padding: 1em; color: var(--i-color_soft); cursor: pointer; } .ipsComposeArea_dummy i{ margin-inline-end: .3em; } .ipsComposeArea_dummy .i-color_warning{ display: block; font-weight: 500; } /* Post preview */ .ipsComposeArea_editor [data-role="previewContainer"] iframe{ --i-compose-frame-width: 100%; width: min(100%, var(--i-compose-frame-width)); } [data-preview-size="tablet"] [data-role="previewContainer"] iframe {--i-compose-frame-width: 780px;} [data-preview-size="phone"] [data-role="previewContainer"] iframe {--i-compose-frame-width: 375px;} .ipsComposeArea_smallPreview { box-shadow: hsl(0 0% 0% / .1) 0px 5px 16px -5px; margin: 10px 0; } .ipsComposeArea_editor [data-action="closePreview"], .ipsComposeArea_editorPaste .ipsComposeArea_editorPasteSwitch { font-family: arial, sans-serif; width: 1.5em; height: 1.5em; border-radius: 50%; font-size: 20px; background: #000; color: #fff; display: grid; place-content: center; text-decoration: none !important; flex: 0 0 auto; cursor: pointer; margin-inline-start: auto; } /* Paste bar */ .ipsComposeArea_editorPaste { background: var(--i-background_dark); color: var(--i-color_background-dark-contrast); display: flex; align-items: center; gap: 1em; font-size: .9em; border-radius: 5px; padding-inline-start: 1em; padding-inline-end: .5em; min-height: 3.5em; } .ipsComposeArea_editorPaste[style*="block"]{ display: flex !important; } .ipsComposeArea_editorPaste .fa-solid{ margin-inline-end: .6em; } .ipsComposeArea_editorPaste a { color: inherit; text-decoration: underline; } .ipsComposeArea--textarea { position: relative; } /* Ensure notice bars are hidden whenever editor is minimized */ .ipsComposeArea_minimized .ipsComposeArea_editorPaste { display: none !important; } /* SIDEBAR */ .ipsComposeArea_sidebar { --i-basis: 300px !important; display: flex; flex-direction: column; background: var(--i-background_2); border: 1px solid var(--i-background_4); border-radius: var(--i-box--bo-ra); } .ipsComposeArea_sidebar [data-role="tagsList"] { overflow-y: auto; flex: 1 0 360px; } .ipsComposeArea_sidebar [data-tagKey] { width: 100%; padding: 1.5em; cursor: pointer; word-break: break-word; border-bottom: 1px solid var(--i-background_4); } .ipsComposeArea_sidebar [data-tagKey]:hover{ background-color: var(--i-background_1);; } .ipsComposeArea_sidebar [data-tagkey] code { display: block; padding: 0 !important; font-size: 0.9em; background-color: transparent; } /* Drag files here to attach */ .ipsComposeArea_dropZone { padding: 0.8em 1em; padding-inline-end: .3em; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .7em; margin: .5em; background-color: var(--i-background_3); border-radius: 5px; } /* Existing attachment/stock photo */ .ipsComposeArea__media-other{ margin: -.6em 0; } .ipsComposeArea__media-other a { font-size: max(1em, 16px); padding: .4em .8em; display: block; color: var(--i-color_soft); border-radius: min(var(--i-design-radius), 5px); } .ipsComposeArea__media-other a:hover{ color: var(--i-color_root); background: var(--i-background_1); } /* Compose warnings */ .ipsComposeArea_warning { color: var(--i-color_warning); margin-bottom: 1.4em; font-weight: 500; } @media (min-width: 768px){ .ipsComposeArea_warning{ margin-inline-start: 75px; } } .ipsComposeArea--unavailable { pointer-events: none; } /* ATTACHMENTS */ .ipsUploader{ font-size: var(--i-font-size); font-weight: normal; } .ipsUploader__buttons{ display: flex; flex-wrap: wrap; gap: .5em; } .ipsAttachment_dropZoneSmall_info{ flex: 999 1 50%; display: grid; } .ipsUploader__container { margin-top: .4em; display: grid; gap: 1em; } /* Hide empty file list if files have been uploaded and then deleted */ .ipsUploader__container:not(:has(*)){ display: none; } .ipsUploader__container--files { grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); } .ipsUploader__container--images { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); } .ipsUploader__row { --_ba-co: var(--if-light,var(--i-background_1)) var(--if-dark, var(--i-background_5)); background: var(--_ba-co); border-radius: min(var(--i-design-radius), 6px); padding: .7em; position: relative; display: flex; align-items: center; box-shadow: hsl(0 0% 5% / 7%) 0px 1px 1px, hsl(0 0% 5% / 7%) 0px 5px 16px; gap: 1em; } .ipsUploader__row.ipsAttach_error { border-color: var(--i-color_negative) !important; background: var(--i-background_negative-soft); } .ipsUploader__row.ipsAttach_error .ipsUploader__rowPreview__generic { background: var(--i-background_1); } .ipsUploader__row.ipsAttach_error .ipsUploader__rowPreview__generic i[class*=" fa-"]:before { content: "\f071"; } .ipsUploader--insertable .ipsUploader__row { cursor: pointer; } .ipsUploader__container--files .ipsUploader__row { height: 110px; } .ipsUploader__container--images .ipsUploader__row { display: block; } .ipsUploader__rowPreview { text-align: center; align-self: stretch; flex: 0 0 100px; background-image: none !important; /* Uploader sets the background image, but in this scenario we don't want to use it */ } .ipsUploader__container--images .ipsUploader__rowPreview, .ipsUploader__row[data-filetype="video"] .ipsUploader__rowPreview__generic { height: 140px; } .ipsUploader__row :is(img, video) { width: 100%; height: 100%; object-fit: scale-down; border-radius: min(var(--i-design-radius), 5px); pointer-events: none; } .ipsUploader__rowPreview__generic { background: var(--i-background_3); height: 100%; display: grid; place-content: center; } .ipsUploader__rowPreview__generic [class*="fa-"] { font-size: 22px; color: var(--i-color_soft); } .ipsUploader_rowMeta { flex: 1 1 100%; position: relative; max-width: 100%; } .ipsUploader__container--images .ipsUploader_rowMeta { padding: .6em .3em .3em; } .ipsUploader_rowTitle { font-weight: 550; color: var(--i-color_hard); white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; } .ipsUploader_rowDesc{ color: var(--i-color_soft); } .ipsUploader__rowDelete { font-family: Arial, sans-serif; width: 1.38em; height: 1.38em; background: var(--i-base-contrast_5); color: var(--i-base_2); display: grid; place-content: center; border-radius: 50%; position: absolute; top: -4px; font-size: 16px; text-decoration: none; inset-inline-end: -4px; } .ipsUploader .ipsMeter { margin-top: 8px; } .ipsUploader__rowInsert { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; background: var(--i-background_1); background: linear-gradient( to right, color-mix(in srgb, var(--_ba-co) 0%, transparent), var(--_ba-co) 2em ); display: flex; align-items: center; padding-inline-start: 3em; } .ipsUploader__rowInsert a { font-size: .9em; color: var(--i-color_primary); text-decoration: none; font-weight: 500; } @media (min-width: 980px){ .ipsUploader--insertable .ipsUploader__row:not(:hover) .ipsUploader__rowInsert { opacity: 0; } } @media screen and (max-width: 979px) { .ipsUploader__container--files .ipsUploader__row { height: auto; } .ipsUploader__container--images .ipsUploader__rowPreview{ max-height: 100px; } } .ipsAttachment_dropZone { background-color: var(--if-light, var(--i-background_3)) var(--if-dark, var(--i-background_2)); padding: 1.4em; transition: background-color 0.2s; display: flex; align-items: center; flex-wrap: wrap; gap: 1em 1.4em; border-radius: min(var(--i-design-radius), 5px); } :is(.ipsAttachment_dropZone, .ipsComposeArea_dropZone).ipsDragging { background-color: var(--i-background_4); } .ipsUploader__icon{ font-size: 1.1em; color: var(--i-color_soft); opacity: .5; } .ipsAttachment_fileList{ flex: 1 1 100%; } /* Hide empty file lists */ .ipsAttachment_fileList:has(.ipsUploader__container:empty), .ipsAttachment_fileList:has([data-role="fileList"]:empty){ display: none; } .ipsAttachment_dropZone * { /*pointer-events: none; This prevents dragleave from firing when dragging over elements in the drop zone */ } .ipsAttachment_dropZone a, .ipsAttachment_dropZone .moxie-shim, .ipsAttachment_dropZone .moxie-shim * { pointer-events: auto; /* Reinstate default events for button */ } .ipsAttachment__desc{ color: var(--i-color_hard); font-weight: 550; font-size: 1em; } .ipsAttachment__desc span{ cursor: pointer; position: relative; z-index: 1; text-decoration: underline; } .ipsAttachment_supportDrag:is([data-supports-drag="false"] *), .ipsAttachment_nonDrag:not([data-supports-drag="false"] *) { display: none; } .ipsAttach { position: relative; } .ipsAttach.ipsAttach_selected { outline: 2px solid var(--i-primary); outline-offset: -2px; } .ipsAttach:has(:checked) { outline: 2px solid var(--i-primary); outline-offset: -2px; } /* Insert existing attachment / Select featured image */ .ipsAttach_selection { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-content: center; color: #fff; background: var(--i-background_dark); background: color-mix(in srgb, var(--i-background_dark) 40%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ipsAttach_selectionOn .ipsAttach_selection { background: var(--i-primary); color: var(--i-primary-contrast); outline: 2px solid hsl(0 0% 100%); } /* IMAGE ATTACHMENTS */ /* Used for Insert Existing Attachment */ .ipsAttachment_fileList--grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5em; padding: .5em; background: var(--i-background_3); } /* Used for screenshot selection (Downloads) */ .ipsAttachment_fileList--radios{ display: flex; overflow: auto; gap: 1em; padding: 1em; background: var(--i-background_3); text-align: center; border-radius: min(var(--i-design-radius), 5px); } .ipsAttachment_fileList--radios .ipsImageAttach{ flex: 0 0 auto; padding: 8px; } .ipsAttachment_fileList--radios .ipsImageAttach_thumb{ aspect-ratio: auto; } .ipsAttachment_fileList--radios .ipsImageAttach_thumb :is(img, video){ width: auto; height: 170px; border-radius: min(var(--i-design-radius), 5px); object-fit: scale-down; } .ipsAttachment_fileList--radios input{ margin: calc(5px + 8px) 0 5px; } .ipsImageAttach { position: relative; padding: 1em; background: var(--i-background_1); border-radius: min(var(--i-design-radius), 5px); isolation: isolate; } .ipsImageAttach_thumb { aspect-ratio: 16/9; } .ipsImageAttach_thumb :is(img, video) { width: 100%; height: 100%; object-fit: contain; cursor: pointer; } .ipsImageAttach_thumb .ipsThumb{ height: 100%; aspect-ratio: auto; border-radius: 0; } .ipsImageAttach_status { display: block; line-height: 125px; opacity: 0.5; } /* Feature content: image selection */ /* Convert ipsThumbs into their natural ratio so thumbs aren't cropped via 'cover' or 'contain' */ .cPromote_attachList{ display: flex; flex-wrap: wrap; gap: 15px; } .cPromote_attachList [data-role="preview"] img{ height: 100px; border-radius: var(--i-thumb--bo-ra); object-fit: scale-down; background-color: var(--i-box--ba-co); } .cPromote_attachImage { position: relative; } .cPromote_attachImage { border-radius: var(--i-thumb--bo-ra); outline: 2px solid transparent; outline-offset: 2px; } .cPromote_attachImage:where(:has(.cPromote_attachImage__checkbox)):hover{ outline-color: var(--i-background_6); } .cPromote_attachImage:has([type="checkbox"]:checked){ outline-color: var(--i-primary); } .cPromote_attachImage .ipsMeter { width: auto; position: absolute; left: 5px; right: 5px; bottom: 10px; } .ipsImageAttach_controls{ position: absolute; top: 0; inset-inline-end: 0; display: flex; justify-content: end; gap: 10px; padding: 10px; } .cPromote_attachImage__checkbox { position: absolute; inset: 0; padding: 8px; display: grid; justify-content: end; cursor: pointer; } /* SERVICE FIELDS */ #eOriginalText textarea { height: 200px !important; } .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 */ .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 .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-property: aspect-ratio; transition-duration: .3s; transition-timing-function: 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; } /* Shorter cover photos */ .ipsCoverPhoto--minimal .ipsCoverPhoto__container { aspect-ratio: 10; } /* 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% calc(clamp(0, var(--offset), 100) * 1%); user-select: none; } /* 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: 600; color: var(--i-color_hard); } /* 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: 500; } .ipsCoverPhoto__statValue a{ color: inherit; } /* Always show long dates */ .ipsCoverPhoto__statValue .ipsTime__long{ display: revert; } .ipsCoverPhoto__statValue .ipsTime__short{ display: none; } .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{ width: 100%; 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; } /* Remove border-radius if the buttonBar isn't the first element */ :where(.ipsColumns, .ipsTabs__panels, .ipsBox:has(.ipsBox__header), .ipsProfile__main) .ipsButtonBar--top{ border-radius: 0; } /* Tweak the button bar so it can be used between elements */ :where(.ipsProfile__main, .ipsColumns--followed-content) .ipsButtonBar--top{ border-radius: 0; } /* Hide empty pagination. This prevents an empty gap when the bars wrap on mobiles */ .ipsButtonBar__pagination:not(:has(a)){ 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; flex-wrap: wrap; } .ipsDataFilters + .ipsDataFilters{ margin-inline-start: .4em; } .ipsDataFilters > li{ 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%; width: 100%; /* Full-width