/* * RasslCMS UI stylesheet * Scope: CMS only (#RC-GUI and rc-* classes) * Theme: navy / cyan, based on the supplied layout */ @layer rc-cms { :where(#RC-GUI, .rc-config-box-wrapper, .rc-login-copyright) { --rc-color-primary: #18aab3; --rc-color-primary-hover: #22bcc5; --rc-color-primary-active: #128b93; --rc-color-primary-soft: rgba(24, 170, 179, 0.12); --rc-color-primary-border: rgba(24, 170, 179, 0.48); --rc-color-bg: #0d1d31; --rc-color-bg-elevated: #122741; --rc-color-header: #0c1a2d; --rc-color-panel: #ffffff; --rc-color-surface: #f8fafc; --rc-color-surface-muted: #eef2f6; --rc-color-text: #10233c; --rc-color-text-muted: #637083; --rc-color-text-inverse: #ffffff; --rc-color-border: #d4dbe4; --rc-color-border-strong: #aeb9c7; --rc-color-success: #22a06b; --rc-color-warning: #d99219; --rc-color-danger: #d92d20; --rc-color-info: #2563eb; --rc-radius-xs: 4px; --rc-radius-sm: 7px; --rc-radius-md: 12px; --rc-radius-lg: 18px; --rc-radius-pill: 999px; --rc-space-1: 4px; --rc-space-2: 8px; --rc-space-3: 12px; --rc-space-4: 16px; --rc-space-5: 20px; --rc-space-6: 24px; --rc-space-8: 32px; --rc-menu-height: 74px; --rc-panel-width: 475px; --rc-font-family: "Geist", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --rc-transition-fast: 150ms ease; --rc-transition: 220ms ease; --rc-shadow-sm: 0 2px 8px rgba(5, 20, 38, 0.08); --rc-shadow-md: 0 12px 30px rgba(5, 20, 38, 0.16); --rc-shadow-panel: 0 0 22px rgba(24, 170, 179, 0.22); --rc-shadow-glow: 0 0 14px rgba(24, 170, 179, 0.35); --rc-shadow-glow-strong: 0 0 18px rgba(24, 170, 179, 0.55); } /* FOR DEBUGGING */ #RC-Debug { position: fixed; right: 50px; bottom: 50px; z-index: 10000; background-color: white; } /******** GENERAL *******/ body:has(#RC-GUI) { margin: 0; } body:has(#RC-Menu) { margin-top: 40px; } /* #RC-MenuSidebarInner > div, #RC-MenuContent { font-family: 'Geist', sans-serif; font-size: 15px; } */ #RC-GUI ::selection { background: color-mix(in srgb, var(--rc-color-primary) 28%, transparent); color: #1f2937; } #RC-GUI ::-moz-selection { background: color-mix(in srgb, var(--rc-color-primary) 28%, transparent); color: #1f2937; } #RC-GUI input::selection, #RC-GUI textarea::selection, #RC-GUI [contenteditable="true"]::selection { background: var(--rc-color-primary); color: #ffffff; } #RC-GUI input::-moz-selection, #RC-GUI textarea::-moz-selection, #RC-GUI [contenteditable="true"]::-moz-selection { background: var(--rc-color-primary); color: #ffffff; } #RC-GUI h1, #RC-Message h1, #RC-GUI .rc-headline-1 { margin-top: 0; margin-bottom: clamp(0.75rem, 1.5vw, 1rem); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 700; line-height: 1.2; text-align: center; } #RC-GUI h1::after, #RC-Message h1::after, #RC-GUI .rc-headline-1::after { content: ""; display: block; width: 100%; height: 1px; margin-top: clamp(0.75rem, 1.5vw, 1rem); background: var(--rc-border); box-shadow: var(--rc-shadow-xs); } #RC-GUI h2, #RC-Message h2, #RC-GUI .rc-headline-2 { margin-top: 0; margin-bottom: clamp(0.75rem, 1.5vw, 1rem); font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 700; line-height: 1.25; } #RC-GUI h3, #RC-Message h3, #RC-GUI .rc-headline-3 { margin-top: 0; margin-bottom: clamp(0.6rem, 1.2vw, 0.8rem); color: var(--rc-color-primary); font-size: clamp(1rem, 1.6vw, 1.1rem); font-weight: 700; line-height: 1.3; } #RC-GUI h4, #RC-Message h4, #RC-GUI .rc-headline-4 { margin-top: 0; margin-bottom: clamp(0.5rem, 1vw, 0.7rem); color: var(--rc-color-primary); font-size: clamp(0.95rem, 1.4vw, 1rem); font-weight: 700; line-height: 1.35; } #RC-GUI h5, #RC-Message h5, #RC-GUI .rc-headline-5 { margin-top: 0; margin-bottom: clamp(0.5rem, 1vw, 0.7rem); color: var(--rc-color-primary); font-size: clamp(0.9rem, 1.2vw, 1rem); font-weight: 400; line-height: 1.4; } #RC-GUI p { margin-top: 0; margin-bottom: clamp(0.75rem, 1.5vw, 1rem); line-height: normal; } #RC-GUI p:last-child { margin-bottom: 0; } #RC-GUI .rc-title-box { background-color: var(--rc-color-text); color: white; text-align: center; margin-bottom: 10px; user-select: none; } #RC-GUI .rc-title-box.rc-headline-3 { background-color: transparent; margin-top: 15px; color: var(--rc-color-text); text-align: left; margin-top: 10px; border-top: 1px solid var(--rc-color-surface-muted); padding-top: 5px; } #RC-GUI .rc-headline-2.rc-title-box { padding: 4px; } #RC-GUI .rc-settings-title { margin-bottom: 10px; user-select: none; background: transparent; color: black; text-align: left; border-top: 1px solid var(--rc-color-surface-muted); padding-top: 5px; } #RC-GUI a { color: var(--rc-color-primary); } /* loading */ #RC-Loading { color: var(--rc-color-primary); font-size: 18px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; opacity: 0; } #RC-GUI .rc-button>span.rc-loading-spinner, #RC-GUI .rc-message-icon.rc-message-icon-loading, #RC-Loading.rc-state-is-loading { -webkit-animation: rotating 1s linear infinite; -moz-animation: rotating 1s linear infinite; -ms-animation: rotating 1s linear infinite; -o-animation: rotating 1s linear infinite; animation: rotating 1s linear infinite; opacity: 1; } @-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /********** FONTS **********/ #RC-GUI { font-family: "Geist", Arial, Helvetica, sans-serif; font-size: 17px; color: var(--rc-color-text); line-height: normal; font-style: normal; text-transform: normal; } /********** ICONS **********/ #RC-GUI .rc-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: currentColor; font-size: 1em; font-style: normal; font-weight: 400; line-height: 1; speak: never; } /************ CONFIG & INSTALL */ .rc-config-box-wrapper { height: 100vh; background-color: var(--rc-color-bg); background: linear-gradient(to bottom, var(--rc-color-bg) 0%, var(--rc-color-bg-elevated) 100%); padding: 50px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-direction: column; } .rc-config-box { max-width: 550px; margin: 0 auto; padding: 20px; box-shadow: 0 0 12px 7px var(--rc-shadow-glow); border-radius: 20px; background-color: white; font-family: "Geist", Arial, Helvetica, sans-serif; text-align: left; box-shadow: 2px 2px 2px #757575; max-height: calc(100vh - 230px); max-height: calc(100svh - 230px); overflow-y: auto; } .rc-config-box__logo { max-width: 100%; height: auto; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; } .rc-config-box-wrapper .rc-copyright { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; } .rc-config-box-wrapper .rc-config-box a { color: var(--rc-color-primary); text-decoration: underline; } .rc-login-copyright { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; font-family: "Geist", Arial, Helvetica, sans-serif; } .rc-list-style-success { color: var(--rc-color-primary); } .rc-list-style-warning { color: #ff9800; } .rc-list-style-error { color: #ef4444; } .rc-message { display: block; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.4; overflow-x: hidden; background: #ffffff; color: #1f2937; border: 1px solid #e5e7eb; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); overflow-y: auto; } .rc-message pre, .rc-message code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } .rc-message ul { margin: 0; padding-left: 18px; } .rc-message:has(.rc-upload-msg-list):not(:has(li)), .rc-message:empty { display: none !important; } .rc-pages-list-page .rc-message { padding: 6px 10px; display: inline-block; } span.rc-message { margin-bottom: 0; } /* Varianten nur über Accent */ .rc-message.rc-message-error { border-left: 4px solid #ef4444; } .rc-message.rc-message-success { border-left: 4px solid var(--rc-color-primary); } .rc-message.rc-message-info { border-left: 4px solid #3b82f6; } .rc-message.rc-message-warning { border-left: 4px solid #f59e0b; } /* Titel */ .rc-message .rc-message-title { font-weight: 600; margin-bottom: 4px; } /* Content */ .rc-message .rc-message-content { opacity: 0.9; } /* Icon */ .rc-message .rc-message-icon { margin-right: 6px; opacity: 0.8; } /*********** LOGOUT FORM ***********/ #RC-LogoutForm { margin: 0; position: relative; } #RC-GUI #RC-LogoutForm .rc-button { border-radius: 0; height: 40px; width: 40px; color: white; user-select: none; outline: 0; } #RC-GUI #RC-LogoutForm:before { content: "\ea14"; font-family: "IcoMoon-Free" !important; display: block; color: white; pointer-events: none; position: absolute; right: 0; top: 50%; transform: translate(-50%, -50%); font-size: 21px; } #RC-GUI #RC-UserInfobox { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; padding: 5px 12px 5px 6px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.05); } #RC-GUI #RC-UserInfobox>.user-image { flex: 0 0 36px; width: 36px; height: 36px; margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background-color: #ffffff; background-size: cover; background-repeat: no-repeat; background-position: center; color: var(--rc-color-text, #10233c); font-size: 22px; } #RC-GUI .rc-user-meta { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.1; } #RC-GUI .rc-user-name { display: block; max-width: 180px; overflow: hidden; color: #ffffff; font-size: 13px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } #RC-GUI .rc-user-role { display: block; max-width: 180px; overflow: hidden; color: rgba(255, 255, 255, 0.62); font-size: 11px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } /******* scrollbar *******/ #RC-GUI ::-webkit-scrollbar { width: 10px; } #RC-GUI ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 1px; } #RC-GUI ::-webkit-scrollbar-thumb { background: var(--rc-color-primary); } /******** AJAX ERROR POPUP ***********/ #RC-AjaxError { background: white; background: white; padding: 20px; border-radius: 10px; border: 5px solid #ea0000; text-align: center; position: relative; max-width: 500px; } #RC-AjaxError .ajax-error-title { text-transform: uppercase; font-size: 20px; text-align: center; background: #ea0000; color: white; margin-bottom: 10px; } #RC-AjaxError .ajax-error-response { margin-bottom: 10px; } #RC-AjaxError .ajax-error-info { font-style: italic; } #RC-AjaxError .rc-popup-close { cursor: pointer; position: absolute; width: 40px; height: 40px; top: -20px; right: -20px; background: #ea0000; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; } /******* TABS ********/ .rc-menu-tabs-inner { display: flex; padding-bottom: 20px; flex-wrap: wrap; } .rc-menu-tabs-inner>.rc-menu-tab { flex: 1; padding: 5px; background-color: var(--rc-color-surface-muted); color: var(--rc-color-text); box-sizing: border-box; text-align: center; user-select: none; transition: all 0.3s; display: flex; justify-content: center; align-items: center; font-size: inherit; border: 1px solid white; min-width: 130px; cursor: pointer; flex: 1; border-radius: 7px 7px 0px 0px; } #RC-GUI .rc-tabs { border: 1px solid var(--rc-color-surface-muted); padding: 5px; box-sizing: border-box; border-radius: 10px; margin-bottom: 10px; } .rc-menu-tabs-inner>.rc-menu-tab.rc-tabs-toggler-active { background: white; background-color: color-mix(in srgb, var(--rc-color-primary) 19%, transparent); color: var(--rc-color-primary); border: 1px solid var(--rc-color-primary); z-index: 50; font-size: inherit; border-color: color-mix(in srgb, var(--rc-color-primary) 41%, transparent); cursor: default; border-radius: 7px 7px 0px 0px; font-weight: normal; } /************ OPTIONS ****************/ .rc-options { position: absolute; top: 3px; display: flex; right: 5px; } .rc-options>.rc-option:hover { cursor: pointer; } .rc-options>.rc-option a { text-decoration: none; } .rc-options>.rc-option-select { overflow: hidden; position: relative; } .rc-options>.rc-option-select:hover { overflow: visible; } .rc-options>.rc-option-select:hover .rc-option-select-wrapper { display: block; } .rc-options>.rc-option-select .rc-option-select-wrapper { position: absolute; display: none; display: flex; flex-direction: column; right: -7px; } .rc-options>.rc-option-select .rc-option-select-wrapper .rc-option { margin: 2px 2px; background-color: var(--rc-color-text); padding: 2px; } .rc-options>.rc-option-select .rc-option-select-wrapper .rc-option.rc-active { background-color: var(--rc-color-primary); color: white; } /* multiselect options */ .rc-multiselect-options { position: relative; padding: 5px; box-sizing: border-box; background: var(--rc-color-primary); } .rc-multiselect-options .rc-options { position: relative; } /********* text editable ******/ .rc-text-options { height: 20px; top: 2px; position: absolute; right: 5px; padding: 5px; display: none; } .rc-text-options>.rc-option { color: white; cursor: pointer; width: 30px; height: 30px; background-color: var(--rc-color-primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: box-shadow 0.3s; margin: 0 5px; } .rc-text-options>.rc-option:hover { box-shadow: 0px 0px 11px 4px var(--rc-color-primary); } .rc-state-editing>.rc-text-options { display: flex; top: -25px; background-color: var(--rc-color-primary); width: 100%; justify-content: flex-end; right: 0; height: 25px; padding: 2px; box-sizing: border-box; z-index: 4500; border-radius: 10px 10px 0px 0px; padding-left: 10px; } .rc-state-editing>.rc-text-options>.rc-option { font-size: 14px; width: auto; height: auto; } .rc-state-editing>.rc-text-options>.rc-option-title { display: block; } .rc-state-hidden { display: none !important; } /* table */ #RC-GUI div[contenteditable="true"] table { width: 100%; } #RC-GUI #RC-GUI div[contenteditable="true"] table td { outline: 1px dotted var(--rc-color-primary); min-width: 40px; } #RC-GUI #RC-GUI #RC-GUI div[contenteditable="true"] table td:empty::before { content: "\00a0"; } .rc-c-options .rc-option-title { color: white; display: none; } /********* dropzones *********/ .rc-dropzone { height: 0; transition: height 0.2s; z-index: 450; position: relative; cursor: pointer; &:hover .rc-dropzone__add { box-shadow: 0px 0px 11px 4px var(--rc-color-primary); } } .rc-dropzone__line { content: ""; width: 100%; height: 0px; position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; transition: height 0.2s, width 0.2s; transform-origin: center; border-radius: 10px; overflow: hidden; &::before { content: ""; position: absolute; width: 100%; height: 400%; top: 50%; transform: translateY(-50%); } } /* body:not(.rc-is-editing):not(.rc-isdragging) .rc-dropzone:not(:has(+ .rc-element)) { height: auto; margin: 10px 0px; }*/ .rc-dropzone:first-child:not(:has(+ .rc-element)), *:not(.rc-element)+.rc-dropzone:not(:has(+ .rc-element)) { height: 45px !important; background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, var(--rc-color-surface-muted) 10px, var(--rc-color-surface-muted) 20px), radial-gradient(circle at center, rgba(0, 0, 0, 0.03), transparent 70%); border: 2px dashed #c9c9c9; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); z-index: 0; min-width: 15px; min-height: 15px; .rc-dropzone__add { width: 100%; height: 100%; opacity: 0; } .rc-dropzone__line { height: 100% !important; } &:not(:hover) .rc-dropzone__add { transform: scale(0) translate(-50%, -50%) !important; } &:hover { opacity: 1; } } .rc-dropzone:first-child:not(:has(+ .rc-element)):hover, *:not(.rc-element)+.rc-dropzone:not(:has(+ .rc-element)):hover { border-color: var(--rc-color-primary); background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, var(--rc-color-primary) 10px, var(--rc-color-primary) 20px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc-color-primary) 35%, transparent), 0 0 6px var(--rc-color-primary); } .rc-dropzone--inherit:first-child:not(:has(+ .rc-element)):hover, *:not(.rc-element)+.rc-dropzone--inherit:not(:has(+ .rc-element)):hover { border-color: #d19a00; background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #d19a00 10px, #d19a00 20px); box-shadow: inset 0 0 0 1px rgba(209, 154, 0, 0.35), 0 0 6px #d19a00; } .rc-dropzone--global:first-child:not(:has(+ .rc-element)):hover, *:not(.rc-element)+.rc-dropzone--global:not(:has(+ .rc-element)):hover { border-color: #2563eb; background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #2563eb 10px, #2563eb 20px); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.35), 0 0 6px #2563eb; } .rc-dropzone.rc-dropzone--disabled { opacity: 0 !important; pointer-events: none !important; } body.rc-isdragging-element .rc-dropzone.rc-dropzone--inherit { background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #d19a00 10px, #d19a00 20px); } body.rc-isdragging-element .rc-dropzone.rc-dropzone--inherit-replace { background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #d19a00 10px, #d19a00 20px) !important; } body.rc-isdragging-element .rc-dropzone.rc-dropzone--global { background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #2563eb 10px, #2563eb 20px); } body.rc-isdragging-element .rc-dropzone.rc-dropzone--inherit-replace>span { padding: 3px; border-radius: 10px; background-color: white; box-sizing: border-box; font-size: 18px; } body.rc-isdragging-element .rc-dropzone .rc-dropzone__line { height: 4px; background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #919191 10px, #919191 20px); transition: all 0.2s ease; } .rc-dropzone:has(.rc-dropzone__add:hover) .rc-dropzone__line, body.rc-isdragging-element .rc-dropzone:hover .rc-dropzone__line { height: 4px; background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, var(--rc-color-primary) 10px, var(--rc-color-primary) 20px); box-shadow: 0 0 6px var(--rc-color-primary), 0 0 12px var(--rc-color-primary), 0 0 20px var(--rc-color-primary); } .rc-dropzone--inherit:has(.rc-dropzone__add:hover) .rc-dropzone__line, body.rc-isdragging-element .rc-dropzone--inherit:hover .rc-dropzone__line { background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #d19a00 10px, #d19a00 20px); box-shadow: 0 0 6px #d19a00, 0 0 12px #d19a00, 0 0 20px #d19a00; } .rc-dropzone--global:has(.rc-dropzone__add:hover) .rc-dropzone__line, body.rc-isdragging-element .rc-dropzone--global:hover .rc-dropzone__line { background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #2563eb 10px, #2563eb 20px); box-shadow: 0 0 6px #2563eb, 0 0 12px #2563eb, 0 0 20px #2563eb; } body.rc-isdragging-element { user-select: none; } body.rc-isdragging-element .rc-dropzone.rc-dropzone--max, body.rc-isdragging-element .rc-dropzone.rc-dropzone--not-allowed { opacity: 0 !important; pointer-events: none !important; } .rc-dropzone.rc-dropzone--max, .rc-dropzone.rc-dropzone--not-allowed { cursor: not-allowed !important; } .rc-dropzone.rc-dropzone--max { display: none !important; } .rc-dropzone__add { position: absolute; top: 50%; left: 50%; border-radius: 50%; width: 25px; height: 25px; color: white; outline: 0; border: 0; -webkit-appearance: none; appearance: none; box-shadow: 0px 0px 3px grey; background-color: var(--rc-color-primary-hover); cursor: pointer; transform: scale(0) translate(-50%, -50%); transform-origin: center; border-radius: 5px; cursor: pointer; border: 1px solid white; font-size: 0.9em; display: flex; justify-content: center; align-items: center; transition: box-shadow 0.4s; -webkit-user-select: none; user-select: none; } .rc-element .rc-dropzone__add { background-color: black; } .rc-dropzone--inherit .rc-dropzone__add { background: #d19a00; } .rc-dropzone--global .rc-dropzone__add { background: #2563eb; } .rc-dropzone--inherit:hover .rc-dropzone__add, .rc-dropzone--inherit .rc-dropzone__add:hover { box-shadow: 0px 0px 11px 4px #d19a00; } .rc-dropzone--global:hover .rc-dropzone__add, .rc-dropzone--global .rc-dropzone__add:hover { box-shadow: 0px 0px 11px 4px #2563eb; } body:not(.rc-is-editing):not(.rc-isdragging) .rc-dropzone:hover .rc-dropzone__add, body:not(.rc-is-editing):not(.rc-isdragging) .rc-element:hover+.rc-dropzone .rc-dropzone__add, body:not(.rc-is-editing):not(.rc-isdragging) .rc-dropzone:has(+ .rc-element:hover) .rc-dropzone__add { transform: scale(1) translate(-50%, -50%); &:hover { box-shadow: 0px 0px 11px 4px var(--rc-color-primary); } } /* , body:not(.rc-is-editing):not(.rc-isdragging) .rc-dropzone:has(+ .rc-element.rc-dropzone__add:hover) .rc-dropzone__add:not(:hover), body:not(.rc-is-editing):not(.rc-isdragging) .rc-element:has(.rc-dropzone__add:hover)+.rc-dropzone .rc-dropzone__add:not(:hover), body:not(.rc-is-editing):not(.rc-isdragging) .rc-element:not(:hover):not(:has(.rc-element)) .rc-dropzone .rc-dropzone__add */ body:has(.rc-option:hover, .rc-options:hover, .rc-dropzone__add:hover) .rc-dropzone__add { transform: scale(0) translate(-50%, -50%) !important; } body:has(.rc-option:hover, .rc-options:hover, .rc-dropzone__add:hover) .rc-dropzone__add:hover { transform: scale(1) translate(-50%, -50%) !important; } body:has(.rc-option:hover, .rc-options:hover) .rc-dropzone__add { transform: scale(0) translate(-50%, -50%) !important; } body:has(.rc-dropzone__add:hover) .rc-element .rc-options { display: none !important; } #RC-GUI .rc-is-editable { cursor: text; position: relative; margin-right: 15px; } #RC-GUI :is(.rc-tree-item, .rc-listitem):hover:not(:has(:is(.rc-tree-item, .rc-listitem):hover))>.rc-is-editable:not(.rcjs-editable-editing)::after, #RC-GUI :is(.rc-tree-item, .rc-listitem):hover:not(:has(:is(.rc-tree-item, .rc-listitem):hover))>.rc-listitem-name-wrapper>.rc-is-editable:not(.rcjs-editable-editing)::after { content: "✎"; right: -15px; opacity: 1; font-size: 11px; position: absolute; top: 50%; transform: translateY(-50%); } .rc-picker-popup .rc-is-editable:not(.rcjs-editable-editing)::after { display: none !important; } /************ INPUTS & BUTTONS *********/ #RC-GUI .rc-button { background-color: var(--rc-color-primary); box-shadow: 0 0 10px var(--rc-shadow-glow-strong); color: white; text-align: center; padding: 10px 15px; box-sizing: border-box; transition: all 0.3s; border: 0; text-transform: uppercase; transition: all 0.2s; border-radius: 5px; user-select: none; display: flex; gap: 0.5ch; justify-content: center; flex-wrap: wrap; align-items: center; appearance: none; -webkit-appearance: none; border: 0; font: inherit; line-height: normal; cursor: pointer; text-decoration: none; width: 100%; letter-spacing: 0.2em; font-weight: 600; } #RC-GUI .rc-button>span.rc-loading-spinner { font-family: "IcoMoon-Free" !important; content: "\e97c"; font-size: 16px; color: white; margin-left: 5px; } /* rc-state-loading */ #RC-GUI .rc-submit.rc-submit-disabled:hover, #RC-GUI .rc-submit.rc-submit-disabled { background-color: gray !important; border: 0; box-shadow: none; cursor: default !important; } #RC-GUI .rc-radios>.rc-radio-label { width: 100%; display: block; } #RC-GUI .rc-button:hover { background-color: var(--rc-color-primary-hover); box-shadow: 0 0 16px var(--rc-shadow-glow-strong); transform: translateY(-1px); } #RC-GUI .rc-button:active { transform: translateY(0); box-shadow: 0 0 10px var(--rc-shadow-glow-strong); } #RC-GUI .rc-button.rc-button-disabled { background-color: gray; } #RC-GUI .rc-button-back, #RC-GUI .rc-button-new { color: white; background: var(--rc-color-primary); width: 30px; height: 30px; margin-bottom: 5px; display: flex; justify-content: center; align-items: center; border-radius: 5px; cursor: pointer; border: 1px solid white; -webkit-user-select: none; user-select: none; } #RC-GUI .rc-button-back:hover, #RC-GUI .rc-button-new:hover { box-shadow: 2px 1px 0px grey; background-color: var(--rc-color-primary-hover); } #RC-GUI .rc-button.rc-button-warning { background-color: #da0e0e; } #RC-GUI .rc-button.rc-button-warning:hover { background-color: #b91010; box-shadow: 0px 0px 3px #b91010; } a.rc-link { color: var(--rc-color-primary); } input.rc-input[type="number"], input.rc-input[type="password"], input.rc-input[type="text"], textarea.rc-input { box-sizing: border-box; -webkit-appearance: none; appearance: none; max-width: 100%; min-width: 100%; width: 100%; outline: 0; width: 100%; padding: 10px 15px; font-size: 14px; line-height: 1.42857143; color: inherit; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); font-size: inherit; color: inherit; font-family: inherit !important; background-color: #FAFBFB; } textarea.rc-input { min-height: 100px; } input.rc-input[type="text"]::placeholder { font-style: italic; } input.rc-input[data-type="date"]:hover, input.rc-input[data-type="datetime"]:hover { cursor: pointer; } .rc-input-state-hidden { display: none; } .rc-range-wrapper { display: flex; align-items: center; gap: 10px; width: 100%; } .rc-input-range { flex: 1; width: 100%; min-width: 0; cursor: pointer; accent-color: var(--rc-color-primary); } .rc-range-value { min-width: 42px; padding: 4px 6px; border-radius: 4px; background: var(--rc-color-primary); color: white; font-weight: bold; text-align: center; font-size: 13px; user-select: none; } .rc-settings-heading { margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 1px solid #ddd; font-size: 16px; font-weight: 600; } .rc-settings-separator { margin: 20px 0; border-top: 1px solid #e5e5e5; } .rc-settings-notice { margin: 10px 0; padding: 10px 12px; border-radius: 4px; font-size: 13px; } .rc-settings-notice-info { background: #f5f5f5; border-left: 4px solid var(--rc-color-primary); } .rc-settings-notice-warning { background: #fff8e6; border-left: 4px solid #f0ad4e; } .rc-settings-notice-error { background: #fff0f0; border-left: 4px solid #d9534f; } .rc-settings-notice-success { background: #f1faed; border-left: 4px solid #5cb85c; } .rc-divider { margin: 20px 0; background: var(--rc-border); height: 1px; box-shadow: var(--rc-shadow-xs); } .rc-required { color: #c00; margin-left: 0px; font-weight: normal; } /* ---------- NOT TRANSLATED --------- */ .rc-multi-inputs-wrapper .rc-multi-inputs-item.rc-not-translated>input[type="text"], .rc-picker.rc-not-translated>input[type="text"], textarea.rc-input.rc-not-translated, input.rc-input.rc-not-translated[type="number"], input.rc-input.rc-not-translated[type="password"], input.rc-input.rc-not-translated[type="text"] { background-color: rgba(188, 186, 30, 0.1); border-color: #d19a00; } input.rc-checkbox.rc-not-translated[type="checkbox"] { border-color: #d19a00; background-color: rgba(188, 186, 30, 0.1); } input.rc-checkbox.rc-not-translated[type="checkbox"]:checked { background-color: #d19a00; } .rc-picker.rc-not-translated[data-type="pagepicker"]:after { color: #d19a00; } .rc-picker.rc-not-translated>.rc-picker-icon { background-color: #d19a00; } .rc-picker.rc-not-translated .rc-picker-item-sortable, .rc-picker.rc-not-translated .rc-picker-item-remove, .rc-picker.rc-not-translated .rc-button.rc-picker-button { background-color: #d19a00 !important; } .rc-picker.rc-not-translated .rc-picker-item-sortable:hover, .rc-picker.rc-not-translated .rc-picker-item-remove:hover, .rc-picker.rc-not-translated .rc-button.rc-picker-button:hover { background-color: #a2a11c !important; } div#RC-GUI .rc-draggable-list .rc-draggable-item.rc-not-translated, div#RC-GUI li.rc-listitem.rc-not-translated { background-color: #d19a00; border-color: #d19a00; } #RC-GUI li.rc-listitem.rc-not-translated.rc-selected { border: 1px solid #d19a00 !important; color: #d19a00 !important; background-color: white; } #RC-GUI li.rc-listitem.rc-not-translated:hover { background-color: #a2a11c; } #RC-Media-Files .rc-media-file.rc-not-translated { background-color: #d19a00; } #RC-GUI .rc-tree-item.rc-not-translated:hover { background-color: #a2a11c; } #RC-GUI .rc-listitem.rc-not-translated { background-color: #d19a00; } #RC-GUI .rc-listitem.rc-not-translated:hover { background-color: #a2a11c; } /* =========== NOT TRANSLAATED END ========== */ .rc-input-field { margin-bottom: 10px; } .rc-input-wrapper .rc-input-field:last-child { margin-bottom: 0; } .rc-input-wrapper { position: relative; text-align: left; label { font-weight: 500; margin-bottom: 0.3em; display: inline-block; } } .rc-input-wrapper:not(:last-child) { margin-bottom: 15px; } .rc-input-parent { position: relative; } .rc-input-parent:hover .rc-input-clear-button { display: block; } .rc-input-parent .rc-input-clear-button { position: absolute; font-size: 9px; top: 10px; right: 7px; display: none; cursor: pointer; } #RC-PageMenus .rc-pages-list-page.rc-not-translated, #RC-GUI .rc-tree-list .rc-tree-item.rc-not-translated, #RC-GUI .rc-tree-item.rc-not-translated { border-color: white; background-color: #d19a00; color: white; } #RC-GUI .rc-tree-list .rc-tree-item.rc-not-translated:not(.rc-tree-item-current):hover, #RC-GUI .rc-tree-list .rc-tree-item.rc-not-translated:not(.rc-tree-item-current):hover, #RC-GUI .rc-tree-item.rc-not-translated:not(.rc-tree-item-current):hover { background-color: #a2a11c; } #RC-GUI .rc-tree-item.rc-not-translated.rc-tree-item-current { color: #d19a00 !important; background-color: white; border-color: #d19a00; } #RC-GUI .rc-listitem .rc-not-translated.rc-selected>.rc-draggable-openchilds::after, #RC-GUI .rc-tree-item.rc-not-translated.rc-tree-item-current>.rc-draggable-openchilds::after { color: #d19a00 !important; } #RC-GUI .rc-tree-list .rc-tree-item.rc-not-translated.rc-tree-item-current>.rc-options>.rc-option>a, #RC-GUI .rc-tree-list .rc-tree-item.rc-not-translated.rc-tree-item-current>.rc-options>.rc-option { color: #d19a00 !important; } #RC-GUI .rc-tree-item-checkbox.rc-not-translated>input.rc-checkbox[type="checkbox"]:checked { background-color: #d19a00; } #RC-GUI .rc-tree-item.rc-not-translated>.rc-options>.rc-option { color: white; } /* input number */ .rc-multi-inputs-inner { display: flex; position: relative; } .rc-multi-inputs-wrapper input.rc-multi-inputs { border: 1px solid var(--rc-color-primary); padding: 5px 5px; box-sizing: border-box; border: 1px solid var(--rc-color-primary); width: 100%; margin: 0 27px; } .rc-multi-inputs-wrapper .rc-multi-inputs-add, .rc-multi-inputs-wrapper .rc-multi-inputs-remove { background-color: var(--rc-color-primary); color: white; height: 100%; cursor: pointer; position: absolute; width: 27px; display: flex; justify-content: center; align-items: center; top: 0; } .rc-multi-inputs-wrapper .rc-multi-inputs-add { right: 0; } .rc-multi-inputs-wrapper .rc-multi-inputs-remove { left: 0; } .rc-multi-inputs-wrapper .rc-multi-inputs-item { position: relative; } .rc-multi-inputs-wrapper .rc-multi-inputs-button-move, .rc-multi-inputs-wrapper .rc-multi-inputs-button-remove { position: absolute; top: 0; right: 0; height: 27px; width: 27px; background-color: var(--rc-color-primary); color: white; display: flex; justify-content: center; align-items: center; cursor: pointer; } .rc-multi-inputs-wrapper .rc-multi-inputs-button-move { right: 29px; } .rc-multi-inputs-wrapper.rc-multi-inputs-button-wrapper .rc-multi-inputs-item>input { margin-right: 50px; } .rc-multi-inputs-wrapper .rc-button.rc-multi-inputs-button { width: 100%; } /* CHECKBOX */ .rc-checkbox-wrapper { display: flex; align-items: center; } .rc-checkbox-array .rc-checkbox-label { margin-left: 10px; } .rc-checkbox-array input.rc-checkbox[type="checkbox"] { margin: 5px; } input.rc-checkbox[type="checkbox"] { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: rgb(255, 255, 255, 1); height: 25px; width: 25px; min-width: 25px; border: 1px solid var(--rc-color-primary); margin: 0; transition: all 0.5s; outline: 0; border-radius: 3px; border-color: #cccccc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } input.rc-checkbox[type="checkbox"]:checked { background: var(--rc-color-primary); border: 1px solid white; } input.rc-checkbox[type="checkbox"]:disabled { background: white; pointer-events: none; } input.rc-checkbox[type="checkbox"]:after { content: ""; position: relative; left: 40%; top: 20%; width: 0; height: 0; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.3s; display: block; } input.rc-checkbox[type="checkbox"]:checked:after { width: 15%; height: 40%; } /* ===== radios === */ .rc-radio-wrapper { display: block; position: relative; padding-left: 30px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .rc-radio-wrapper input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom radio button */ .rc-radio-wrapper .rc-radio-checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: #eee; border-radius: 50%; } /* On mouse-over, add a grey background color */ .rc-radio-wrapper:hover input~.rc-radio-checkmark { background-color: #ccc; } /* When the radio button is checked, add a blue background */ .rc-radio-wrapper input:checked~.rc-radio-checkmark { background-color: var(--rc-color-primary); } /* Create the indicator (the dot/circle - hidden when not checked) */ .rc-radio-checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .rc-radio-wrapper input:checked~.rc-radio-checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .rc-radio-wrapper .rc-radio-checkmark:after { top: 6px; left: 6px; width: 7px; height: 7px; border-radius: 50%; background: white; } /* picker input */ .rc-picker { /* display: flex;*/ position: relative; } .rc-picker>input.rc-input { width: calc(100% - 25px); min-width: unset; padding-left: 25px; } .rc-picker>.rc-picker-icon { width: 25px; display: flex; justify-content: center; align-items: center; background-color: var(--rc-color-primary); color: white; cursor: pointer; } /* .rc-picker[data-type="mediapicker"]:after { content: "\e927"; } .rc-picker[data-type="pagepicker"]:after { content: "\e925"; } .rc-picker:after {color: var(--rc-color-primary); display: block; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-family: 'IcoMoon-Free' !important; } */ .rc-picker .rc-picker-item-content { padding: 0 5px; box-sizing: border-box; display: flex; align-items: center; width: calc(100% - 60px); } .rc-picker .rc-picker-content { overflow-y: auto; max-height: 300px; overflow-x: hidden; } .rc-picker-item-picture { width: 60px; height: 60px; background-color: var(--rc-color-text); font-size: 22px; display: flex; justify-content: center; align-items: center; color: white; box-sizing: border-box; } .rc-picker-item-picture.rc-message { font-size: 16px; } .rc-picker .rc-picker-item-content>.rc-message { margin-bottom: 0; } .rc-picker .rc-picker-item { margin: 5px; background-color: var(--rc-color-surface-muted); border-radius: 5px; padding: 3px; } .rc-picker .rc-picker-item-content-wrapper { display: flex; position: relative; /* justify-content: space-between;*/ } .rc-picker .rc-picker-item-sortable, .rc-picker .rc-picker-item-remove { color: white; width: 35px; background-color: var(--rc-color-primary); justify-content: center; align-items: center; display: flex; cursor: pointer; border-radius: 5px; position: absolute; top: 0; right: 0; height: 100%; display: none; } .rc-picker .rc-picker-item:hover .rc-picker-item-remove, .rc-picker .rc-picker-item:hover .rc-picker-item-sortable { display: flex; } .rc-picker .rc-picker-item-sortable { right: 46px; } .rc-picker:hover>.rc-picker-reset { display: flex; } #RC-GUI .rc-picker-popup { background-color: white; border-radius: 5px; padding: 10px; } .rc-picker-popup .rc-input-search { margin-bottom: 20px; } .rc-picker-list-items { display: flex; flex-direction: column; gap: 10px; } .rc-picker-list-item { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; background-color: var(--rc-color-surface-muted); color: white; border-radius: 5px; color: black; box-sizing: border-box; transition: box-shadow 0.4s; gap: 5px; padding: 10px; cursor: pointer; &:hover { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); background: var(--rc-color-primary); color: white; } } .rc-search-active .rc-menu-tabs-inner { display: none; } .rc-search-active .rc-menu-tab-content { display: block !important; } /***** ERRORS *******/ .rc-input.rc-field-has-errors { border-color: #ff3000 !important; box-shadow: 0px 0px 2px #ff3000; } .rc-input-error-message { padding: 2px; color: red; display: flex; align-items: center; } .rc-input-error-message>.rc-icon { font-size: 15px; margin-right: 3px; } /* SEARCH INPUT */ .rc-search-categories { display: flex; flex-wrap: wrap; } .rc-search-categories>.rc-search-category { color: var(--rc-color-primary); background-color: white; border: 1px solid var(--rc-color-primary); padding: 5px; box-sizing: border-box; margin: 3px; border-radius: 4px; cursor: pointer; user-select: none; transition: all 0.4s; } .rc-search-categories>.rc-search-category.rc-active { cursor: auto; color: white; background-color: var(--rc-color-primary); } .rc-toggle { display: flex; align-items: center; justify-content: flex-start; min-width: 100%; &:not(:last-child) { margin-bottom: 10px; } } .rc-toggle-btn { color: var(--rc-color-primary); background-color: white; border: 1px solid var(--rc-color-primary); padding: 5px; box-sizing: border-box; margin: 3px; border-radius: 4px; cursor: pointer; user-select: none; transition: all 0.4s; -webkit-appearance: none; appearance: none; outline: 0; &:is(.rc-active) { background-color: var(--rc-color-primary); color: white; cursor: default; } } .rc-toggle-label { font-size: 0.8em; margin-right: 5px; } /**** Language Switch ***/ #RC-Logo { width: 218px; height: var(--rc-menu-height); margin-left: 0; display: flex; align-items: center; } #RC-Logo img { display: block; width: 100%; max-width: 218px; height: auto; object-fit: contain; } #RC-Menu .rc-menu-select { position: relative; } #RC-Menu .rc-menu-select-item { width: 40px; height: 40px; display: block; display: flex; justify-content: center; align-items: center; color: white; cursor: pointer; text-decoration: none; transition: all 0.3s; } #RC-Menu .rc-menu-select-wrapper .rc-menu-select-item { background-color: rgba(0, 0, 0, 0.82); } #RC-Menu .rc-menu-select-wrapper { display: none; position: absolute; position: absolute; left: 50%; transform: translateX(-50%); } #RC-Menu .rc-menu-select:hover .rc-menu-select-wrapper { display: block; position: absolute; } #RC-MenuLangSwitch .rc-menu-select-item { font-weight: bold; text-transform: uppercase; padding: 0 10px; width: auto; min-width: 40px; box-sizing: border-box; } #RC-MenuLangSwitch .rc-menu-select-item:hover { background-color: white; color: var(--rc-color-primary); } /********** MENU **********/ #RC-Menu { width: 100%; position: fixed; height: 40px; top: 0; left: 0; background-color: var(--rc-color-text); display: flex; align-items: center; justify-content: space-between; z-index: 9999; } #RC-MenuCenter, #RC-MenuRight, #RC-MenuLeft { display: flex; } #RC-MenuCenter { margin-right: auto; } #RC-GUI .rc-table .rc-table-row { display: flex; } #RC-GUI .rc-table .rc-table-col { width: 150px; min-width: 150px; margin: 2px; display: flex; align-items: center; } #RC-GUI table .rc-table .rc-table-col .rc-options .rc-option { color: var(--rc-color-primary); } #RC-GUI table .rc-table .rc-table-col .rc-options { display: flex; position: relative; } #RC-GUI .rc-table-head .rc-table-col { font-weight: bold; } #RC-GUI .rc-table-head { background-color: var(--rc-color-text); color: white; margin-bottom: 10px; } #RC-GUI .rc-menu-button, #RC-GUI .rc-menu-point { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; color: white; box-sizing: border-box; } #RC-GUI .rc-menu-button:hover, #RC-Menu .rc-menu-point:hover { background: black; cursor: pointer; } #RC-GUI .rc-menu-button.rc-active { background-color: var(--rc-color-primary); } #RC-Menu .rc-menu-point.rc-active { background-color: var(--rc-color-primary); box-shadow: 0px 0px 3px var(--rc-color-primary); } body.rc-is-editing { margin-top: var(--rc-topbar-height) !important; } /*** switch to mobile **/ #RC-ResponsiveSwitch .rc-responsive-switch { position: fixed; z-index: 5100; background-color: var(--rc-color-primary); color: white; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid white; top: 0; right: 0; left: unset; } /******** MENU WRAPPER ********/ #RC-MenuContentWrapper { display: flex; position: fixed; top: 40px; left: 0; z-index: 9998; } #RC-CurrentPageBadges { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; } .rc-current-page-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; } .rc-current-page-badge-info { color: var(--rc-color-primary); border: 1px solid color-mix(in srgb, var(--rc-color-primary) 75%, transparent); background: color-mix(in srgb, var(--rc-color-primary) 12%, transparent); } .rc-current-page-badge-danger { color: #ff8a80; border: 1px solid rgba(239, 68, 68, 0.75); background: rgba(239, 68, 68, 0.12); } /********* MENU CONTENT ********/ #RC-MenuContent { position: relative; background-color: rgb(255, 255, 255); border: 5px solid rgba(0, 0, 0, 0.82); box-sizing: border-box; height: calc(100vh - 40px); transition: all 0.4s; width: 350px; overflow: hidden; overflow-y: auto; overflow-x: hidden; box-shadow: 4px 0px 2px 0px #2e2e2e73; max-width: 50vw; background-color: rgb(236, 236, 236); } body.rc-isdragging #RC-MenuContent { min-width: unset; } #RC-MenuContent.rc-closed { min-width: 0; border: 0; width: 0; } #RC-MenuSidebar:not(.rc-closed), #RC-MenuContent:not(.rc-closed) { min-width: 350px; } body.rc-isdragging-element #RC-MenuContent:not(:hover), body.rc-isdragging-media #RC-MenuContent:not(:hover) { width: 0 !important; border: 0; overflow: hidden; } #RC-MenuContentInner { position: relative; padding: 10px; box-sizing: border-box; /* border: 5px solid rgba(0, 0, 0, 0.82);*/ margin: 10px; border-radius: 5px; box-shadow: 1px -1px 2px 1px #00000014; background-color: white; height: auto; min-height: calc(100% - 20px); transition: opacity 0.5s; } #RC-GUI .rc-loading-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 100px; } #RC-GUI .rc-loading-banner>span { display: inline-block; } #RC-MenuContentInner .rc-title-box.rc-headline-2, #RC-MenuSidebarInner .rc-title-box.rc-headline-2 { border-radius: 0px 20px 20px 0; } .rc-menu-size-toggler-h { position: absolute; width: 10px; height: 40px; background: var(--rc-color-text); top: 50%; right: 0; transform: translateY(-50%); cursor: pointer; border-radius: 5px 0px 0px 5px; user-select: none; -webkit-user-drag: none; user-drag: none; } /*menu content animation */ /**** Tooltip ******/ .rc-tooltip-gui { background: rgba(0, 0, 0, 0.82); border-radius: 5px; padding: 5px; z-index: 10001; color: white; font-family: "Geist", Arial, Helvetica, sans-serif; pointer-events: none; user-select: none; max-width: 400px; } #RC-GUI .rc-questionmark { margin-left: 4px; color: var(--rc-color-primary); cursor: pointer; opacity: 0.7; } #RC-GUI .rc-questionmark:hover { opacity: 1; } #RC-GUI .rc-listitem .rc-questionmark { color: white; } /******** MENU SIDEBR *******/ #RC-MenuSidebar { position: relative; width: 350px; background-color: white; z-index: 10000; height: calc(100vh - 40px); border: 5px solid rgba(0, 0, 0, 0.82); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; transition: all 0.4s; box-shadow: 4px 0px 2px 0px #2e2e2e73; max-width: 50vw; background: var(--rc-color-surface-muted); transition: all 0.4s; } body.rc-isdragging #RC-MenuSidebar { min-width: unset; } /* #RC-MenuSidebar .rc-tooltip { display: none; } */ #RC-MenuSidebar.rc-closed { width: 0 !important; border: 0; overflow: hidden; min-width: 0; } #RC-MenuSidebarInner { margin: 10px; padding: 10px; background: white; box-sizing: border-box; border-radius: 5px; padding: 10px; transition: margin 0.3s, padding 0.3s; min-height: calc(100% - 20px); } #RC-MenuSidebar.rc-closed #RC-MenuSidebarInner { margin: 0; padding: 0; } #RC-CopyElement.rc-menu-point:hover { cursor: move; } #RC-GUI .rc-btn-close { width: 30px; height: 30px; position: absolute; right: 19px; top: 20px; background-color: var(--rc-color-primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; transition: all 0.4s; z-index: 100; border: 1px solid var(--rc-color-primary); } #RC-GUI .rc-btn-close:hover { box-shadow: 1px 2px 3px 0px #00000061; cursor: pointer; border-color: white; } /************ TREE ITEM *********/ #RC-GUI .rc-tree-item, #RC-GUI .rc-tree-item *, #RC-GUI .rc-draggable-drag, #RC-GUI .rc-draggable-newdrag { -webkit-user-select: none; user-select: none; } #RC-GUI .rc-tree-item { touch-action: none; } ul.rc-tree-list { padding: 0; } #RC-GUI .rc-draggable-item-name { cursor: text; min-width: 100%; } #RC-GUI .rc-draggable-list .rc-draggable-item.rc-listitem, #RC-GUI .rc-draggable-list .rc-draggable-item, #RC-GUI .rc-tree-list .rc-tree-item { position: relative; padding: 3px 5px; background-color: var(--rc-color-primary); color: white; cursor: default; border-radius: 3px; padding-right: 5px; padding-left: 30px; border: 1px solid white; } #RC-GUI .rc-draggable-list .rc-draggable-item.rc-draggable-item-selecgted, .rc-tree-item.rc-selected { background-color: #e49e00; } .rc-tree-list .rc-tree-item.rc-selected:hover:not(.rc-tree-item-current), .rc-tree-item.rc-selected:hover { background-color: #c78b01; } #RC-GUI .rc-draggable-tree .rc-listitem, #RC-GUI .rc-tree-list .rc-tree-item { min-width: 200px; width: 100%; } #RC-PageTreeList>.rc-tree-list { overflow-x: auto; } #RC-GUI .rc-draggable-list .rc-draggable-item.rc-selected, #RC-GUI .rc-tree-list .rc-tree-item.rc-tree-item-current { border-color: var(--rc-color-primary); color: var(--rc-color-primary); background-color: white; } #RC-GUI .rc-tree-list .rc-tree-item.rc-tree-item-current>.rc-tree-item-name { font-weight: bold; } #RC-GUI .rc-tree-list .rc-tree-item.rc-tree-item-current:hover { box-shadow: 2px 1px 0px gray; } #RC-GUI .rc-draggable-list .rc-draggable-item.rc-selected>.rc-options>.rc-option, #RC-GUI .rc-draggable-list .rc-draggable-item.rc-selected>.rc-options>.rc-option>a, #RC-GUI .rc-draggable-list .rc-draggable-item.rc-selected>.rc-draggable-openchilds:after, #RC-GUI .rc-tree-list .rc-tree-item.rc-tree-item-current>.rc-draggable-openchilds:after, #RC-GUI .rc-listitem.rc-selected>.rc-draggable-openchilds:after, #RC-GUI .rc-tree-list .rc-tree-item.rc-tree-item-current>.rc-options>.rc-option>a, #RC-GUI .rc-tree-list .rc-tree-item.rc-tree-item-current>.rc-options>.rc-option { color: var(--rc-color-primary) !important; font-weight: normal; } #RC-GUI .rc-draggable-list .rc-draggable-list .rc-draggable-item, #RC-GUI .rc-tree-list .rc-tree-list .rc-tree-item { margin-right: -55px; } #RC-GUI .rc-tree-list .rc-tree-item:hover:not(.rc-tree-item-current) { box-shadow: 2px 1px 0px gray; background-color: var(--rc-color-primary-hover); } #RC-GUI .rc-draggable-openchilds { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; cursor: pointer; -webkit-user-select: none; user-select: none; } #RC-GUI .rc-draggable-openchilds::before { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); background: transparent; border-radius: 50%; } #RC-GUI .rc-draggable-openchilds::after { font-family: "IcoMoon-Free" !important; content: "\ea43"; color: white; font-size: 12px; line-height: 1; display: block; transition: transform 0.2s ease; transform: rotate(-90deg); } #RC-GUI .rc-draggable-openchilds.rc-closed::after { transform: rotate(0deg); } #RC-GUI .rc-tree-item-current>.rc-draggable-openchilds::after { color: var(--rc-color-primary) !important; } #RC-GUI .rc-tree-item-name.rcjs-editable-editing { background-color: white; color: var(--rc-color-primary); border: 1px dashed; outline: 0; } .rc-draggable-newdrag, .rc-draggable-drag { padding: 2px 5px; background-color: var(--rc-color-primary); color: white; cursor: move; border-radius: 3px; padding-right: 60px; padding-left: 22px; border: 1px solid white; box-shadow: 2px 5px 2px 0px #2e2e2e73; list-style: none; } .rc-draggable-dropzone { min-height: 3px; position: relative; transition: background 0.15s, min-height 0.15s; } .rc-draggable-dropzone.rc-state-hover { width: 100%; background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #d19a00 10px, #d19a00 20px); } /********** MENU POINTS ************/ /** pages **/ .rc-pages-btn-new.rc-button:hover { cursor: move; } #RC-PageTreeList, #RC-PageTreeList ul { list-style: none; } #RC-PageTreeList ul:first-child { padding: 0; } #RC-PageTreeList { padding: 0; } #RC-GUI .rc-pages-list-page { position: relative; } #RC-GUI .rc-pages-list-page .rc-option { color: var(--rc-color-primary); } #RC-PageTreeList .rc-pages-list-page .rc-option, #RC-PageTreeList .rc-pages-list-page .rc-option a { color: white; } #RC-PageTreeList .rc-pages-list-page .rc-pages-name { cursor: text !important; min-width: 10px; min-height: 10px; padding-right: 70px; line-height: 1; } #RC-MenuContent .rc-pages-list-homepage { position: relative; padding: 2px; background-color: var(--rc-color-primary); color: white; list-style: none; box-sizing: border-box; } #RC-MenuContent .rc-pages-list-homepage .rc-option a { color: white; } .rc-listitem:has(> ul .rc-listitem)>.rc-options>.rc-option-delete, .rc-tree-item:has(> ul .rc-tree-item)>.rc-options>.rc-option-delete { opacity: 0.35; pointer-events: none; cursor: not-allowed; } /**** elements ********/ #RC-GUI .rc-listitem { position: relative; background-color: var(--rc-color-primary); color: white; list-style: none; min-height: 15px; margin-bottom: 5px; transition: background-color 0.2s; border: 1px solid white; border-radius: 3px; display: flex; align-items: center; flex-wrap: wrap; display: flex; padding: 3px 15px; } #RC-GUI .rc-listitem .rc-input-wrapper { margin-bottom: 0; } #RC-GUI .rc-listitem:hover { box-shadow: 2px 1px 0px grey; background-color: var(--rc-color-primary-hover); } #RC-GUI li.rc-listitem { margin-bottom: 4px; -webkit-user-select: none; user-select: none; } #RC-GUI .rc-draggable-tree li.rc-listitem { margin-bottom: 0; } #RC-GUI .rc-listitem .rc-options { position: absolute; right: 5px; top: 5px; -webkit-user-select: none; user-select: none; } #RC-GUI .rc-listitem .rc-option, #RC-GUI .rc-listitem .rc-options a { color: white; text-decoration: none; } #RC-GUI .rc-listitem .rc-listitem-name { display: inline-block; cursor: text; margin-right: 78px; line-height: normal; } /* #RC-GUI .rc-listitem .rc-listitem-name:not([contenteditable="true"]) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }*/ #RC-GUI .rc-listitem .rc-listitem-name.rcjs-editable-editing { background-color: white; color: var(--rc-color-primary); border: 1px dashed; outline: 0; cursor: text; user-select: all; } #RC-GUI .rc-options-color-list .rc-listitem { box-shadow: 2px 1px 0px grey; } #RC-GUI .rc-options-color-list .rc-listitem .rc-listitem-name { text-shadow: 1px 1px 0px black; } #RC-GUI .rc-listitem.rc-selected { background-color: white; color: var(--rc-color-primary); border: 1px solid var(--rc-color-primary) !important; } #RC-GUI .rc-listitem.rc-selected>.rc-options>.rc-option { color: var(--rc-color-primary); } #RC-GUI .rc-listitem.rc-listitem-disabled { opacity: 0.7; } #RC-GUI .rc-listitem .rc-listitem-picture { width: 50px; height: 50px; margin-right: 20px; overflow: hidden; position: relative; margin-top: 3px; margin-bottom: 3px; display: flex; justify-content: center; align-items: center; font-size: 30px; } #RC-GUI .rc-listitem .rc-listitem-picture>.user-image { width: 100%; height: 100%; display: block; display: flex; justify-content: center; align-items: center; } #RC-GUI .rc-draggable-tree .rc-listitem { display: inline-block; width: 100%; box-sizing: border-box; padding-left: 27px; } #RC-GUI .rc-listitem .rc-listitem-picture img { width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; } #RC-GUI .rc-listitem-children { padding-left: 0px; width: 100%; } #RC-GUI .rc-listitem-children .rc-listitem-picture { width: 20px; height: 20px; font-size: 18px; } #RC-GUI .rc-listitem-label { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 6px; border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; background: rgba(255, 255, 255, 0.08); } #RC-GUI .rc-listitem-label-default { opacity: 0.9; } #RC-GUI .rc-listitem-label-warning { opacity: 0.9; } #RC-GUI .rc-listitem-name-wrapper { display: inline-flex; align-items: center; min-width: 0; } #RC-Media-Files .rc-media-file .rc-sub-listitems, #RC-GUI .rc-listitem .rc-sub-listitems { display: flex; font-size: 12px; flex-wrap: wrap; width: 100%; align-items: flex-end; } #RC-Media-Files .rc-media-file .rc-sub-listitems>div, #RC-GUI .rc-listitem .rc-sub-listitems>div { margin: 3px; padding: 2px; border: 1px solid #ffffff; } #RC-Media-Files .rc-media-file .rc-sub-listitems>div .rc-icon { cursor: pointer; &:hover { transform: scale(1.1); text-shadow: 2px 2px 2px #00000094; } } #RC-Media-Files .rc-media-file .rc-sub-listitems>div { border: 1px solid var(--rc-color-text); } #RC-Media-Files .rc-media-file.rc-selected .rc-sub-listitems>div { border: 1px solid #ffffff; } #RC-Media-Files[data-view="grid"] .rc-scrollbox-wrapper { display: grid; grid-template-columns: 1fr 1fr; .rc-media-file-thumbnail img, .rc-media-file-thumbnail { width: 100%; height: auto; } .rc-media-file-name { width: 100%; text-align: center; } .rc-options { background: var(--rc-color-primary); top: 3px; right: 3px; } .rc-option { color: white; } } #RC-Media-Files[data-view="grid"] .rc-media-file { flex-direction: column; height: 100%; } #RC-Media-Files[data-view="grid"] .rc-media-file-thumbnail { height: 150px !important; img { object-fit: cover; height: 100% !important; } } /**** pagemenus *******/ #RC-PageMenuTreePages, #RC-PageMenuTree { list-style: none; padding: 0; } #RC-PageMenuTreePages ul, #RC-PageMenuTree ul { list-style: none; } #RC-PageMenus .rc-pages-list-page .rc-pages-name { cursor: move; color: var(--rc-color-text); } #RC-PageMenus .rc-pages-list-page .rc-option { color: var(--rc-color-text); } #RC-PageMenus .rc-pages-list-page input[type="checkbox"] { display: inline-flex; align-items: center; margin-right: 5px; } #RC-PageMenus .rc-pages-list-page input.rc-checkbox[type="checkbox"]:after { top: -5%; } #RC-PageMenus .rc-pages-list-page { padding: 2px; color: var(--rc-color-text); background: #dcdcdc; margin-bottom: 5px; align-items: center; border-radius: 5px; } /**** template ***/ #RC-Template .rc-options-color-list .rc-option-item .rc-option-color { width: 20px; height: 20px; width: 100%; } #RC-Template .rc-template-item .rc-option { text-shadow: 2px 2px #2e2e2ebd; } #RC-Template .rc-options-headlines-list h1, #RC-Template .rc-options-headlines-list h2, #RC-Template .rc-options-headlines-list h3, #RC-Template .rc-options-headlines-list h4, #RC-Template .rc-options-headlines-list h5, #RC-Template .rc-options-headlines-list h6 { margin: 0; } /*********** OTHER (old) *********/ /************* MEDIA **********/ /*** categories *******/ #RC-MediaCatTree .rc-mediacat-list { margin: 0; padding: 0; } #RC-MenuContent .rc-listitem.rc-media-btn-allmedia, #RC-MenuContent .rc-listitem.rc-mediacat-listitem { border: 1px solid white; cursor: pointer; } #RC-Media-Files .rc-media-file { position: relative; display: flex; align-items: center; flex-wrap: wrap; background-color: var(--rc-color-surface-muted); color: white; border-radius: 5px; color: black; padding: 3px; box-sizing: border-box; transition: box-shadow 0.4s; } #RC-Media-Files .rc-media-file:hover { box-shadow: 2px 2px 2px #c1c1c1; } #RC-Media-Files .rc-media-file .rc-option { color: var(--rc-color-text); transition: none; } #RC-Media-Files .rc-media-file .rc-sub-listitems { flex: 1; width: 100%; } /**** Filedrop ****/ #RC-GUI .rc-filedrop, #RC-Menu-Media .rc-media-filedrop { padding: 15px 0px; text-align: center; box-sizing: border-box; margin-bottom: 10px; width: 100%; border: 2px dotted var(--rc-color-primary); background-color: #e4f9a4; cursor: pointer; input { visibility: hidden; cursor: pointer; position: absolute; } } #RC-Menu-Media .rc-media-file .rc-media-file-name { padding: 5px; box-sizing: border-box; word-break: break-all; width: calc(100% - 60px); font-size: 0.9em; } #RC-Menu-Media .rc-media-file img { height: 100%; width: auto; } #RC-Menu-Media>.rc-button { margin-bottom: 15px; } /* progress bar */ .rc-upload-progress { width: 100%; height: 6px; background: #e9ecd9; margin-top: 10px; border-radius: 4px; overflow: hidden; display: none; } .rc-upload-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--rc-color-primary) 0%, #a9d62f 50%, #6f9400 100%); transition: width 0.25s ease; border-radius: 4px; } /*media options */ #RC-Menu-Media .rc-media-file .rc-options { top: 0; position: absolute; right: 0; } #RC-Menu-Media .rc-media-file .rc-options .rc-option { border-radius: 50%; padding: 4px; } #RC-Menu-Media .rc-media-file:hover .rc-options { display: flex; } #RC-Menu-Media .rc-media-file-thumbnail { width: 60px; height: 60px; background-color: var(--rc-color-text); font-size: 20px; display: flex; justify-content: center; align-items: center; color: #ffffff; } /**** MEDIA Focus ***/ #RC-GUI .rc-media-background-focus { position: relative; cursor: pointer; -webkit-user-select: none; user-select: none; } #RC-GUI .rc-media-background-focus .rc-focus-circle { width: 10px; height: 10px; background-color: var(--rc-color-primary); border-radius: 50%; position: absolute; border: 1px solid white; box-shadow: rgb(255, 255, 255) 0px 0px 8px; } .rc-media-settings-preview img, .rc-media-settings-preview video { max-width: 100%; height: auto; width: 100%; height: auto; } .rc-media-settings-preview-pdf { width: 100%; overflow: hidden; } .rc-media-settings-preview-pdf iframe { width: 100%; height: 360px; border: 1px solid var(--rc-border-color, #ddd); border-radius: 4px; display: block; } .rc-media-settings-preview-audio audio { width: 100%; } /******* Element Setttings Popup *****/ #RC-CE-Settings { background: white; padding: 10px; border-radius: 10px; width: 400px; } #RC-Popup-System { padding: 10px; } /******* SCROLLBOX ****/ #RC-GUI .rc-scrollbox-wrapper { overflow-y: auto; overflow-x: hidden; max-height: 400px; } #RC-GUI .rc-scrollbox-wrapper-v { overflow-x: auto; overflow-y: hidden; max-width: 100%; } #RC-PickerElements .rc-scrollbox-wrapper { display: flex; flex-direction: column; gap: 10px; } .rc-content-box { padding: 10px 0px; box-sizing: border-box; max-height: 190px; } .rc-tabs .rc-content-box { padding: 0; } #RC-GUI .rc-overflow-y-auto { overflow-y: hidden; overflow-x: auto; } #RC-GUI .rc-overflow-y-auto.rc-scrollbox-wrapper { overflow-x: auto; overflow-y: auto; } /* ------------ RC BOX --------- **/ #RC-GUI .rc-box { border: 2px solid var(--rc-color-primary); box-sizing: border-box; border-radius: 10px; margin-bottom: 30px; position: relative; display: flex; padding: 10px; box-sizing: border-box; box-shadow: 1px 3px 5px 1px #00000026; } #RC-GUI .rc-box .rc-box-content { padding: 10px; box-sizing: border-box; width: 70%; } #RC-Popup-System .rc-button { display: inline-block; padding: 10px; min-width: 100px; } #RC-GUI .rc-box>.rc-box-picture { width: 30%; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; } #RC-GUI .rc-box>.rc-box-picture img { width: 50px; height: 50px; box-shadow: 2px 2px 4px 0px #00000080; background: var(--rc-color-primary); border-radius: 5px; padding: 10px; box-sizing: border-box; } /******* GENERAL POPUP *******/ #RC-GUI .rc-popup .rc-popup-close { cursor: pointer; position: absolute; width: 40px; height: 40px; top: -20px; right: -20px; background: var(--rc-color-primary); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 5px 4px #00000078; } #RC-GUI .rc-popup-wrapper-inner { box-shadow: 5px 4px #00000078; padding: 10px; background-color: rgb(236, 236, 236); border-radius: 10px; } #RC-GUI .rc-popup-wrapper-inner>div:not(.rc-popup-close) { overflow-y: auto; max-height: 85vh; box-shadow: 0px 0px 2px 3px #00000014; position: static; } .rc-popup.state--click-outside { cursor: pointer; .rc-popup-wrapper-inner { cursor: initial; } } /****** HTML CODE POPUP *********/ #RC-TextEditor, #RC-HTMLCode { background: white; width: 1024px; max-width: 90vw; } #RC-TextEditor .rc-popup-content-inner, #RC-HTMLCode .rc-popup-content-inner { min-height: 400px; max-height: calc(100vh - 200px); overflow-y: scroll; padding: 10px; box-sizing: border-box; outline: 0; } #RC-HTMLCode textarea { width: 100%; max-width: 100%; min-width: 100%; max-height: 100%; min-height: 100%; } #RC-TextEditor .rc-popup-content-inner { padding-top: 40px; } #RC-TextEditor .rc-wysiwyg-editor.rc-state-texteditor { width: calc(100% - 20px); top: 42px; } /******* LINKBOX POPUP ******/ #RC-GUI .rc-popup-warpper-inner .rc-scrollbox-wrapper { overflow-y: auto; overflow-x: hidden; max-height: 60vh; box-sizing: border-box; } #RC-Popup-Linkbox { position: relative; width: 400px; } #RC-PopupClose { position: absolute; top: -20px; right: -20px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: white; background-color: green; } #RC-Popup-Linkbox .rc-popup-close:hover { cursor: pointer; } #RC-Popup-Linkbox { background: white; padding: 10px; } #RC-Popup-Linkbox .rc-tree-item.rc-tree-item-selected { background-color: #f4a900; } #RC-Popup-Linkbox .rc-pages-list-page:hover>.rc-pages-list-page-wrapper { cursor: pointer; } #RC-Popup-Linkbox .rc-media-file.rc-media-file-selected { background-color: #eee; } #RC-Popup-Linkbox .rc-media-file:hover { cursor: pointer; } #RC-Popup-Linkbox .rc-media-file { position: relative; } /* mail backups */ .rc-popup #RC-FormMailsDetails { background-color: white; padding: 20px; border-radius: 10px; max-height: 90vh; overflow-y: auto; } /*** message popup ***/ #RC-GUI .rc-popup #RC-Message { background: white; padding: 10px; box-sizing: border-box; max-width: 500px; } #RC-GUI .rc-popup #RC-Message .rc-message-icon { width: 40px; height: 40px; border-radius: 50%; background-color: #ff4700; display: flex; margin-right: 10px; float: left; justify-content: center; align-items: center; color: white; } #RC-GUI .rc-popup #RC-Message .rc-message-icon-question { background-color: #ff9900; } #RC-GUI .rc-popup #RC-Message .rc-message-icon-loading { background-color: var(--rc-color-primary); } #RC-GUI .rc-popup #RC-MessageInner { margin-bottom: 10px; } #RC-GUI .rc-buttons { display: flex; } #RC-GUI .rc-buttons>.rc-button { flex: 1; margin: 0 5px; } #RC-GUI .rc-popup-message-logo { width: 130px; height: 45px; margin: 0 auto; background-image: url(../../images/logo.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } /****************** ACCORDION **************/ .rc-accordion .rc-accordion-name { border-radius: 5px; position: relative; cursor: pointer; border: 1px solid #c7c7c7; background: var(--rc-color-surface-muted); color: #0f0f0f; padding: 10px 15px; font-size: 18px; margin-bottom: 5px; } .rc-accordion .rc-accordion-item.rc-accordion-item-active .rc-accordion-name { font-weight: bold; cursor: auto; } .rc-accordion .rc-accordion-name:hover { box-shadow: 2px 1px 0px grey; background-color: #dad7d7; } .rc-accordion .rc-accordion-name::before { font-family: "IcoMoon-Free" !important; display: block; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); content: "\ea3c"; transition: transform 0.4s; } .rc-accordion .rc-accordion-item.rc-accordion-item-active .rc-accordion-name::before { transform: translateY(-50%) rotate(90deg); } .rc-accordion .rc-accordion-name:hover { cursor: pointer; } .rc-accordion .rc-accordion-content { padding: 10px; box-sizing: border-box; } /************ POPUP ******************/ .rc-popup { position: fixed; top: 0; left: 0; z-index: 11000; } .rc-popup-layer { width: 100vw; height: 100vh; background-image: linear-gradient(rgba(16, 16, 15, 0.3), rgba(56, 56, 56, 0.58)); position: absolute; top: 0; left: 0; } .rc-popup-wrapper-inner { position: absolute; left: 50%; transform: translateX(-50%); /* top: 50%;*/ top: 10vh; } .rc-popup-wrapper { position: relative; position: relative; width: 100vw; height: 100vh; } #RC-HideElement { background-color: white; padding: 10px; border-radius: 10px; } /********** CMS OPTIONS ****************/ #RC-CMS-Options .rc-options-color-list { display: flex; } #RC-CMS-Options .rc-options-color-list .rc-option-item { position: relative; } #RC-CMS-Options .rc-options-color-list .rc-option-item .rc-option-color { width: 40px; height: 40px; margin: 5px; border: 1px solid black; } #RC-CMS-Options .rc-options-color-list .rc-option-item .rc-option-delete { position: absolute; top: 0; right: 0; font-size: 12px; background: white; width: 15px; height: 15px; border-radius: 50%; color: #4a844f; border: 1px solid #4a844f; text-align: center; } #RC-CMS-Options .rc-options-color-list .rc-option-item .rc-option-delete:hover { cursor: pointer; } #RC-OptionsSettings .rc-settings-block .rc-options-color.rc-selected { border-radius: 50%; } #RC-OptionsSettings .rc-settings-block.rc-options-color-block { display: flex; } /********* ITEMBOX *******/ .rc-itembox .rc-itembox-items-wrapper { margin-top: 10px; border: 1px solid var(--rc-color-primary); padding: 5px; border-radius: 5px; } .rc-itembox .rc-itembox-item { display: inline-block; background-color: var(--rc-color-primary); color: white; padding: 5px; border-radius: 5px; display: inline-flex; align-items: center; margin: 5px; } .rc-itembox .rc-itembox-item>.rc-itembox-item-remove { margin-left: 5px; cursor: pointer; } /************* MEDIA GUI RESIZE ****************/ #RC-GUI .rc-mediacat-btn-new { cursor: move !important; } .rc-picture-dropzone { width: 100%; box-sizing: border-box; min-height: 100px; border: 1px solid var(--rc-color-primary); color: var(--rc-color-primary); display: flex; justify-content: center; align-items: center; font-size: 40px; background-color: var(--rc-color-surface-muted); -webkit-user-select: none; user-select: none; &:hover { background: color-mix(in srgb, var(--rc-color-primary) 11%, transparent); cursor: pointer; span { transform: scale(1.05); } } } .rc-picture-dropzone span { text-decoration: none; } .rc-picture-dropzone.rc-state-disabled { opacity: 0.5; } .rc-media-gui-resize-toggler { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: var(--rc-color-primary); width: 35px; height: 35px; border-radius: 50%; color: white; display: flex; justify-content: center; align-items: center; font-size: 25px; z-index: 10050; user-select: none; cursor: pointer; } /* PAGE PICKER */ #RC-GUI #RC-PickerPages .rc-tree-list .rc-tree-item { background-color: var(--rc-color-surface-muted); color: var(--rc-color-text); cursor: pointer; } #RC-GUI #RC-PickerPages .rc-tree-item.rc-selected { background-color: var(--rc-color-primary); color: white; } /* MEDIA PICKER */ .rc-content-media-picker.rc-content-media-picker-single { display: flex; } .rc-content-media-picker.rc-content-media-picker-single .rc-content-media-picker-select { flex: 1; } .rc-content-media-picker .rc-content-media-picker-select { border: 1px dashed var(--rc-color-primary); display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 10px; cursor: pointer; color: var(--rc-color-primary); } .rc-content-media-picker .rc-content-media-picker-container { display: flex; flex-wrap: wrap; } .rc-content-media-picker .rc-media-file { position: relative; cursor: move; padding: 3px; } .rc-content-media-picker .rc-media-file .rc-media-file-remove { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background-color: var(--rc-color-primary); color: white; display: flex; justify-content: center; align-items: center; cursor: pointer; } #RC-MediaPickerInner { display: flex; flex-wrap: wrap; } #RC-MediaPickerInner .rc-media-list { display: flex; flex-wrap: wrap; width: 55%; box-sizing: border-box; align-items: flex-start; flex-direction: column; } #RC-MediaPickerInner .rc-media-categories { width: 45%; padding: 0 10px; box-sizing: border-box; } #RC-MediaPickerInner .rc-media-categories .rc-mediacat-listitem { cursor: pointer; } #RC-MediaPickerInner .rc-media-file { position: relative; cursor: pointer; transition: box-shadow 0.4s; } #RC-MediaPickerInner .rc-media-file:hover { box-shadow: 2px 2px 2px #c1c1c1; } #RC-MediaPickerInner .rc-media-file.rc-selected { background-color: var(--rc-color-primary); color: white; } #RC-MediaPickerInner .rc-media-file.rc-selected .rc-option { color: white; } #RC-MediaPickerInner .rc-media-file .rc-media-file-content { position: absolute; bottom: 0; background-color: white; padding: 0px; box-sizing: border-box; left: 0; max-height: 0; overflow: hidden; transition: padding 0.4s, max-height 0.4s; width: 100%; text-align: center; } #RC-MediaPickerInner .rc-media-file:hover .rc-media-file-content { max-height: 100%; padding: 5px; } #RC-MediaPickerInner .rc-media-file .rc-media-file-checked { position: absolute; top: 10px; left: 10px; color: white; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background-color: var(--rc-color-primary); border-radius: 50%; } #RC-MediaPickerInner .rc-mediacat-list { padding: 0; margin: 0; margin-top: 4px; } /* PALETTE */ #RC-GUI .rc-palette { display: flex; } #RC-GUI .rc-palette .rc-palette-item { border-radius: 50%; margin: 1px; display: flex; justify-content: center; align-items: center; min-width: 30px; min-height: 30px; cursor: pointer; border: 1px solid white; box-sizing: border-box; } #RC-GUI .rc-palette .rc-palette-item:hover { box-shadow: 2px 1px 0px grey; } #RC-GUI .rc-palette .rc-palette-item.rc-palette-item-active::before { content: "\ea0f"; font-family: "IcoMoon-Free" !important; display: block; font-size: 17px; color: white; text-shadow: 2px 2px #2e2e2ebd; } /* slidetool */ .rc-media-gui-resize-zoomtool { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 250px; height: 5px; max-width: 60%; height: 7px; border-radius: 10px; background-color: white; border: 1px solid var(--rc-color-primary); z-index: 10050; } .rc-media-gui-resize-zoomtool .rc-media-gui-resize-zoomtool-circle { width: 15px; height: 15px; position: absolute; top: 50%; border: 1px solid white; transform: translateY(-50%); border-radius: 50%; background-color: white; background-color: var(--rc-color-primary); z-index: 10100; cursor: pointer; transition: box-shadow 0.3s; } .rc-media-gui-resize-zoomtool .rc-media-gui-resize-zoomtool-circle:hover { box-shadow: 0px 0px 11px 4px white; } .rc-media-gui-resize-pixelheight { position: absolute; bottom: 10px; left: 10px; z-index: 9999; } .rc-media-gui-resize-pixelheight>input { border: 1px solid #4a844f; z-index: 10000; padding-right: 20px; text-align: right; width: 100px; } .rc-media-gui-resize-pixelheight>span { position: absolute; right: 5px; top: 0; } .rc-media-gui-resize-buttons { position: absolute; top: 20px; left: 20px; z-index: 10000; border-radius: 5px; } .rc-media-gui-resize-buttons .rc-button { font-family: "Geist", Arial, Helvetica, sans-serif; text-transform: uppercase; } ul.rc-draggable-list-wrapper { padding: 0; } /** media dropzone ***/ .rc-dragdrop-element.rc-option { background: var(--rc-color-primary); border-radius: 5px; color: white; font-size: 17px; box-shadow: 2px 2px 2px #00000061; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; } /********* SELECT BOX **********/ #RC-GUI .rc-select-options-wrap { background: var(--rc-color-primary); color: white; padding: 5px; box-sizing: border-box; z-index: 98000; position: absolute; width: 100%; left: 0; border-radius: 0px 0px 5px 5px; box-shadow: grey 2px 1px 0px; position: absolute; max-height: 200px; overflow: hidden; overflow-y: auto; } #RC-GUI select.rc-select { width: 100%; padding: 9px 12px; box-sizing: border-box; border: 1px solid var(--rc-border); border-radius: 8px; outline: 0; background: var(--rc-surface); color: var(--rc-color-text); font: inherit; line-height: 1.45; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--rc-color-text-muted) 50%), linear-gradient(135deg, var(--rc-color-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; box-shadow: none; transition: border-color var(--rc-transition-fast), box-shadow var(--rc-transition-fast); } #RC-GUI select.rc-select:hover { border-color: var(--rc-color-primary-border); border-color: var(--rc-border-strong); background: var(--rc-white); } #RC-GUI select.rc-select:focus { border-color: var(--rc-color-primary); box-shadow: 0 0 0 3px var(--rc-color-primary-soft); } #RC-GUI select.rc-select:disabled { background-color: var(--rc-color-surface-muted); color: var(--rc-color-text-muted); cursor: not-allowed; opacity: 0.75; } #RC-GUI .rc-select.rc-select-icons { display: inline-block; } #RC-GUI .rc-select.rc-select-icons .rc-select-options-wrap { padding: 0; } #RC-GUI .rc-select .rc-option:not(.rc-select-firstoption):hover, #RC-GUI .rc-select .rc-select-option:not(.rc-select-firstoption):hover { background: white; color: var(--rc-color-primary); box-shadow: 2px 2px 2px #6d6d6d; transform: scale(1.03); } #RC-GUI .rc-select .rc-option, #RC-GUI .rc-select-option { border-top: 1px solid white; padding: 5px; box-sizing: border-box; transition: all 0.2s; user-select: none; cursor: pointer; } #RC-GUI .rc-select .rc-select-options-wrap>.rc-selected:not(.rc-option-color):hover, #RC-GUI .rc-select .rc-select-options-wrap>.rc-selected:not(.rc-option-color) { background-color: #ffffff !important; color: var(--rc-color-text) !important; } /* multiselect */ #RC-GUI .rc-select[data-multiselect="1"] .rc-select-option { background-color: var(--rc-color-surface-muted); color: black; user-select: none; } #RC-GUI .rc-select[data-multiselect="1"] .rc-select-option.rc-selected { background-color: var(--rc-color-primary); color: white; } #RC-GUI .rc-select.rc-select-multirow .rc-select-options-wrap { display: flex; flex-wrap: wrap; background-color: white; padding: 1px; } #RC-GUI .rc-select.rc-select-multirow .rc-select-options-wrap .rc-select-option { border: 0; background-color: var(--rc-color-primary); margin: 1px; } #RC-GUI .rc-select.rc-select-multirow .rc-select-options-wrap .rc-select-option:hover { color: white; } #RC-GUI .rc-select .rc-select-option>.select-icon-box { min-width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; } .rc-text__inner { border: 1px dashed transparent; box-sizing: border-box; min-height: 20px; min-width: 20px; } body:not(.rc-isdragging) .rc-text__inner.rc-text__inner--editable:hover { border: 1px dashed var(--rc-color-primary); } .rc-text:hover .rc-text-options { display: flex; } .rc-text { position: relative; } .rc-text__inner.rc-text__inner--editable { outline-color: var(--rc-color-primary); user-select: text; cursor: text; } #RC-GUI .rc-text__inner.rc-text__inner--editable { min-height: 46px; } .rc-text__inner.rc-not-translated {} .rc-text.rc-not-translated .rc-text__inner.rc-text__inner--editable:hover { border: 1px dashed #d19a00; } .rc-text.rc-not-translated .rc-text-options>.rc-option { background-color: #d19a00; } .rc-text.rc-not-translated .rc-text-options>.rc-option:hover { box-shadow: 0px 0px 11px 4px #d19a00; } .rc-text.rc-not-translated .rc-text-options>.rc-c-option-delete-trans { display: none; } .rc-text.rc-not-translated .rc-text__inner.rc-text__inner--editable { outline-color: #d19a00; } .rc-text__inner.rc-not-translated { background-color: rgba(188, 186, 30, 0.1) !important; border-color: #d19a00 !important; } body:not(.rc-state-editing) .rc-text__inner.rc-text__inner--editable:hover { border-color: transparent; } /************ IMAGE *****/ .rc-picture.rc-not-translated .rc-c-option { background-color: #d19a00; } .rc-picture.rc-not-translated .rc-c-option:hover { box-shadow: 0px 0px 11px 4px #d19a00; } body.rc-isdragging-media-img:not(.rc-isdragging-element) .rc-picture:hover .rc-picture-dropzone { cursor: pointer; background-color: #f7ffde; box-shadow: 1px 1px 2px #50505063; } .rc-picture:hover .rc-c-options { display: flex; } .rc-picture .rc-c-options { position: absolute; top: 20px; right: 20px; color: white; justify-content: flex-end; display: flex; z-index: 99999; -webkit-user-select: none; user-select: none; } body.rc-isdragging .rc-picture .rc-c-options { display: none; } body.rc-isdragging .rc-text-options { display: none !important; } .rc-picture .rc-c-option { margin-left: 10px; width: 30px; height: 30px; border-radius: 50%; background-color: var(--rc-color-primary); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s; border-radius: 5px; cursor: pointer; border: 1px solid white; font-size: 0.9em; display: flex; justify-content: center; align-items: center; box-shadow: 0px 0px 3px grey; -webkit-user-select: none; user-select: none; } .rc-picture .rc-c-option:hover { box-shadow: 0px 0px 11px 4px var(--rc-color-primary); } .rc-media-gui-resize-buttons .rc-picture .rc-tooltip { display: none; } .rc-picture .rc-picture__background { min-height: 60px; } .rc-picture .rc-picture-dropzone { position: absolute; top: 0; left: 0; opacity: 0.5; width: 100%; height: 100%; } .rc-picture:has(picture):not(:hover) .rc-picture-dropzone { opacity: 0; } .rc-picture.rc-is-editing img { cursor: move; } body.rc-isdragging-media-img .rc-element:not([data-scope="inherited"]):hover { pointer-events: none; } body.rc-isdragging-media-img .rc-element:not([data-scope="inherited"]):hover .rc-picture-dropzone { pointer-events: all; } body.rc-isdragging-media-img:not(.rc-isdragging-element) .rc-element:not([data-scope="inherited"]) .rc-picture .rc-picture-dropzone { display: flex; } body.rc-isdragging .rc-tooltip-box, body.rc-isdragging .rc-tooltip-content { display: none !important; } .rc-picture.rc-is-editing img, .rc-picture.rc-is-editing img { webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; user-drag: none; -webkit-user-drag: none; } /* -------------------------------------------------- Inherited Replace UI -------------------------------------------------- */ /* Die echte Replace-Dropzone bleibt im HTML, wird aber nicht als normale Dropzone angezeigt. */ .rc-dropzone--inherit-replace { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; position: relative; } /* Linie und Plus der technischen Dropzone ausblenden. Das sichtbare UI kommt über das geerbte Element. */ .rc-dropzone--inherit-replace .rc-dropzone__line, .rc-dropzone--inherit-replace .rc-dropzone__add { display: none !important; } /* -------------------------------------------------- Hover-Overlay auf geerbten Elementen -------------------------------------------------- */ .rc-element[data-scope="inherited"] { position: relative; } .rc-element[data-scope="inherited"]::before { content: ""; position: absolute; inset: 0; z-index: 15; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 2px dashed #d19a00; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; box-sizing: border-box; } .rc-element[data-scope="inherited"]::after { content: attr(data-replace-label); position: absolute; left: 50%; top: 50%; z-index: 16; transform: translate(-50%, -50%); background: #d19a00; color: #fff; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .rc-element[data-scope="inherited"]:hover::before, .rc-element[data-scope="inherited"]:hover::after { opacity: 1; } .rc-element[data-scope="inherited"]:hover { cursor: pointer; } /********** Content elements **********/ body.rc-isdragging-element .rc-element[data-scope="inherited"] { display: none; } .rc-element .rc-options>.rc-option.rc-option-active { color: #b1da33; } .rc-element .rc-options .rc-icon, .rc-options .rc-icon { font-size: 14px; transition: all 0.2s; } .rc-element .rc-options .rc-icon:hover, .rc-options .rc-icon:hover { font-size: 17px; text-shadow: 2px 2px 2px #00000094; } .rc-element .rc-option, .rc-options>.rc-option { margin-left: 5px; text-decoration: none; transition: 0.2s all; color: white; cursor: pointer; margin-top: -2px; &:is(.rc-option-drag) { cursor: grabbing; } } .rc-options.rc-options-overflow:hover .rc-option-title { max-width: 200px; opacity: 1; } .rc-isdragging { cursor: grabbing; } .rc-element.rc-state-editing :not(.rc-state-editing)>.rc-c-options, .rc-element.rc-state-editing .rc-options { display: none !important; } body.rc-state-editing a.rc-element { webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; user-drag: none; -webkit-user-drag: none; } .rc-element .rc-options { border-radius: 5px 5px 0px 0px; width: 100%; color: white; justify-content: flex-end; background-color: var(--rc-color-text); z-index: 98000; top: -20px; height: 20px; padding: 0px 10px; display: none; align-items: center; border: 1px dashed black; box-sizing: border-box; overflow: visible; -webkit-user-select: none; user-select: none; } .rc-element .rc-options .rc-option-select-wrapper .rc-option { margin: 0; padding: 6px; box-sizing: border-box; } .rc-element .rc-options .rc-option-select-wrapper { border: 1px dashed black; top: calc(100% - 0px); border-radius: 5px; } .rc-element.rc-state-img-editing { pointer-events: none; } .rc-element.rc-state-img-editing .rc-picture.rc-state-img-editing { pointer-events: all; } .rc-element.rc-state-img-editing .rc-c-text-options { display: none; } .rc-element.rc-element-swiper>.rc-options { z-index: auto; } .rc-element .rc-options { min-height: 25px; } .rc-element .rc-options .rc-option a { color: white; } .rc-element .rc-options .rc-option.rc-hidden { display: none; } .rc-element { position: relative; min-height: 20px; box-sizing: border-box; } .rc-element.rc-element--hidden>*:not(.rc-options):not(.rc-c-options) { opacity: 0.5; } body:not(.rc-isdragging) .rc-element:not(:has(.rc-dropzone:hover)):hover { outline: 1px dashed rgba(0, 0, 0, 0.18); } body:not(.rc-isdragging) .rc-element:not(:has(.rc-dropzone:hover)):hover:not(:has(.rc-element:hover)) { outline: 1px solid color-mix(in srgb, var(--rc-color-primary) 75%, transparent); } .rc-element:hover>.rc-options { display: flex; align-items: flex-start; justify-content: flex-end; right: 0; min-width: 100%; width: auto; box-sizing: border-box; padding-top: 4px; } .rc-element:hover:has(.rc-element:hover)>.rc-options { opacity: 0.55; pointer-events: none; } .rc-element:has(.rcjs-editable-editing) { outline: 0 !important; .rc-element { outline: 0 !important; } } .rc-element:has(.rcjs-editable-editing) .rc-options { display: none; } .rc-element .rc-option-title { font-family: "Geist", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; white-space: nowrap; margin-right: 15px; flex: 1; text-align: left; } body.rc-isdragging-element .rc-element:hover .rc-options, body.rc-isdragging-media .rc-element:hover .rc-options { display: none !important; } body.rc-isdragging-media #RC-MediaCatTree .rc-mediacat-listitem { background: repeating-linear-gradient(45deg, var(--rc-color-primary), var(--rc-color-primary) 10px, #709209 10px, #709209 20px); } body.rc-isdragging-media #RC-MediaCatTree .rc-mediacat-listitem .rc-mediacat-name { color: white; } body.rc-isdragging-media #RC-MediaCatTree .rc-mediacat-listitem:hover { background: repeating-linear-gradient(45deg, var(--rc-color-primary), var(--rc-color-primary) 10px, #d19a00 10px, #d19a00 20px); } .rc-element[data-scope="inherited"] .rc-options { background-color: #d19a00; } .rc-element[data-scope="global"] .rc-options { background-color: #2563eb; } body.rc-state-editing .swiper-container:hover { overflow: visible; } body.rc-state-editing .rc-element-swiper .rc-element-swiper-slide>.rc-options, .rc-element-swiper .rc-options { z-index: 9700 !important; } body.rc-state-editing .rc-element-swiper-slide>.rc-options { z-index: 9699 !important; } body.rc-state-editing .swiper-container:hover .swiper-wrapper { z-index: 9700; } body.rc-state-editing .swiper-container { z-index: inherit; } body.rc-state-editing .rc-element-swiper:hover .swiper-button-prev, body.rc-state-editing .rc-element-swiper:hover .swiper-button-next { z-index: 9900; } /* responsive */ /* ======================================================= MODERN LAYOUT OVERRIDES ======================================================= */ #RC-GUI { color: var(--rc-color-text); font-family: var(--rc-font-family); font-size: clamp(14px, 0.25vw + 13px, 15px); line-height: 1.45; } body:has(#RC-Menu) { margin-top: var(--rc-menu-height); background: var(--rc-color-bg); } #RC-Menu { height: var(--rc-menu-height); padding: 0 16px; box-sizing: border-box; background: var(--rc-color-header); border-bottom: 1px solid rgba(255, 255, 255, .18); box-shadow: none; } #RC-Logo { width: 218px; height: var(--rc-menu-height); margin-left: 0; background-size: contain; } #RC-MenuLeft, #RC-MenuCenter, #RC-MenuRight { align-items: center; gap: 10px; } #RC-GUI .rc-menu-button, #RC-GUI .rc-menu-point, #RC-Menu .rc-menu-select-item, #RC-GUI #RC-LogoutForm .rc-button { width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 10px; background: transparent; color: var(--rc-color-text-inverse); box-shadow: none; } #RC-GUI .rc-menu-button:hover, #RC-Menu .rc-menu-point:hover, #RC-Menu .rc-menu-select-item:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .72); } #RC-GUI .rc-menu-button.rc-active, #RC-Menu .rc-menu-point.rc-active { background: var(--rc-color-primary); border-color: var(--rc-color-primary); box-shadow: var(--rc-shadow-glow); } #RC-MenuContentWrapper { top: var(--rc-menu-height); height: calc(100vh - var(--rc-menu-height)); gap: 0; } #RC-MenuContent, #RC-MenuSidebar { width: var(--rc-panel-width); min-width: var(--rc-panel-width); max-width: min(50vw, 620px); height: calc(100vh - var(--rc-menu-height)); padding: 48px 16px 16px; border: 0; border-right: 1px solid rgba(255, 255, 255, .12); background: var(--rc-color-bg-elevated); box-shadow: none; } #RC-MenuContentInner, #RC-MenuSidebarInner { min-height: calc(100% - 8px); margin: 0; padding: 18px; border-radius: var(--rc-radius-lg); background: var(--rc-color-panel); box-shadow: var(--rc-shadow-panel); } #RC-MenuContent::before, #RC-MenuSidebar::before { position: absolute; top: 16px; left: 18px; color: var(--rc-color-text-inverse); font-size: 18px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } #RC-MenuContent::before { content: "Seiten"; } #RC-MenuSidebar::before { content: "Seiteneinstellungen"; } #RC-GUI .rc-btn-close { top: 10px; right: 16px; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 9px; background: transparent; color: white; } #RC-GUI .rc-btn-close:hover { background: rgba(255, 255, 255, .1); box-shadow: none; } #RC-MenuContentInner .rc-title-box.rc-headline-2, #RC-MenuSidebarInner .rc-title-box.rc-headline-2, #RC-GUI .rc-title-box { display: inline-flex; min-width: 170px; align-items: center; justify-content: center; margin: 0 0 18px -18px; padding: 7px 24px; border-radius: 0 var(--rc-radius-pill) var(--rc-radius-pill) 0; background: var(--rc-color-text); color: white; font-size: 16px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } #RC-GUI .rc-input-wrapper { margin-bottom: 18px; } #RC-GUI .rc-input-wrapper label { margin-bottom: 7px; color: var(--rc-color-text); font-weight: 620; } #RC-GUI input.rc-input, #RC-GUI textarea.rc-input, #RC-GUI select.rc-input { min-height: 46px; padding: 10px 13px; border: 1px solid var(--rc-color-border-strong); border-radius: 8px; background: #fff; box-shadow: none; transition: border-color var(--rc-transition-fast), box-shadow var(--rc-transition-fast); } #RC-GUI input.rc-input:focus, #RC-GUI textarea.rc-input:focus, #RC-GUI select.rc-input:focus { border-color: var(--rc-color-primary); box-shadow: 0 0 0 3px var(--rc-color-primary-soft); } #RC-GUI .rc-button { min-height: 42px; padding: 10px 16px; border-radius: 7px; background: var(--rc-color-primary); box-shadow: 0 4px 12px rgba(24, 170, 179, .28); letter-spacing: .14em; } #RC-GUI .rc-button:hover { background: var(--rc-color-primary-hover); box-shadow: 0 6px 16px rgba(24, 170, 179, .38); } #RC-GUI .rc-tree-list .rc-tree-item, #RC-GUI .rc-draggable-list .rc-draggable-item, #RC-GUI .rc-listitem { min-height: 44px; margin-bottom: 9px; padding: 10px 92px 10px 30px; border: 1px solid var(--rc-color-border); border-radius: 8px; background: #f4f5f7; color: var(--rc-color-text); box-shadow: none; } #RC-GUI .rc-tree-list .rc-tree-item:hover:not(.rc-tree-item-current), #RC-GUI .rc-listitem:hover { border-color: var(--rc-color-primary-border); background: var(--rc-color-primary-soft); color: var(--rc-color-text); box-shadow: none; } #RC-GUI .rc-draggable-list .rc-draggable-item.rc-selected, #RC-GUI .rc-tree-list .rc-tree-item.rc-tree-item-current, #RC-GUI .rc-listitem.rc-selected { border-color: var(--rc-color-primary); background: #fff; color: var(--rc-color-primary); box-shadow: 0 0 0 2px var(--rc-color-primary-soft); } #RC-GUI .rc-tree-item>.rc-options>.rc-option, #RC-GUI .rc-tree-item>.rc-options>.rc-option a, #RC-GUI .rc-listitem>.rc-options>.rc-option, #RC-GUI .rc-listitem>.rc-options>.rc-option a { color: var(--rc-color-primary); } #RC-GUI .rc-draggable-openchilds::after { color: var(--rc-color-primary); } #RC-GUI input.rc-checkbox[type="checkbox"] { width: 42px; min-width: 42px; height: 22px; border: 0; border-radius: var(--rc-radius-pill); background: #cbd3dc; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); position: relative; } #RC-GUI input.rc-checkbox[type="checkbox"]::after { width: 16px; height: 16px; left: 3px; top: 3px; border: 0; border-radius: 50%; background: #fff; transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } #RC-GUI input.rc-checkbox[type="checkbox"]:checked { background: var(--rc-color-primary); } #RC-GUI input.rc-checkbox[type="checkbox"]:checked::after { width: 16px; height: 16px; left: 23px; } #RC-GUI .rc-checkbox-wrapper { justify-content: space-between; gap: 16px; padding: 8px 0; } #RC-GUI ::-webkit-scrollbar { width: 8px; height: 8px; } #RC-GUI ::-webkit-scrollbar-track { background: transparent; box-shadow: none; } #RC-GUI ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--rc-radius-pill); background: #fff; background-clip: padding-box; } #RC-GUI :focus-visible { outline: 3px solid color-mix(in srgb, var(--rc-color-primary) 42%, transparent); outline-offset: 2px; } @media (max-width: 1100px) { :where(#RC-GUI, .rc-config-box-wrapper) { --rc-panel-width: min(440px, 50vw); } } @media (max-width: 760px) { :where(#RC-GUI, .rc-config-box-wrapper) { --rc-menu-height: 60px; } #RC-Logo { width: 145px; } #RC-GUI .rc-menu-button, #RC-GUI .rc-menu-point, #RC-Menu .rc-menu-select-item { width: 40px; height: 40px; } #RC-MenuContentWrapper { width: 100vw; overflow-x: auto; } #RC-MenuContent, #RC-MenuSidebar { width: 88vw; min-width: 88vw; max-width: 88vw; } } } :root { --rc-topbar-height: 50px; } @layer rc-final { :where(#RC-GUI, #RC-GUI) { --rc-primary: #19a9b3; --rc-primary-hover: #23bac4; --rc-primary-active: #11858d; --rc-primary-soft: rgba(25, 169, 179, 0.12); --rc-primary-border: rgba(25, 169, 179, 0.42); --rc-navy-950: #081524; --rc-navy-900: #0d1d31; --rc-navy-850: #10243c; --rc-navy-800: #142a45; --rc-white: #ffffff; --rc-surface: #f7f9fc; --rc-surface-2: #eef3f7; --rc-surface-3: #e5ebf1; --rc-text: #12243c; --rc-text-muted: #657388; --rc-border: #d6dee8; --rc-border-strong: #b8c4d1; --rc-success: #159a69; --rc-warning: #d99116; --rc-danger: #d92d20; --rc-info: #2563eb; --rc-radius-xs: 5px; --rc-radius-sm: 8px; --rc-radius-md: 12px; --rc-radius-lg: 18px; --rc-radius-pill: 999px; --rc-shadow-xs: 0 1px 2px rgba(8, 21, 36, 0.06); --rc-shadow-sm: 0 4px 14px rgba(8, 21, 36, 0.09); --rc-shadow-md: 0 14px 34px rgba(8, 21, 36, 0.16); --rc-shadow-panel: 0 18px 50px rgba(8, 21, 36, 0.2); --rc-focus: 0 0 0 3px rgba(25, 169, 179, 0.2); --rc-control-height: 42px; --rc-transition: 160ms ease; font-family: "Geist", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--rc-text); } /* CMS isolation */ #RC-GUI, #RC-GUI *, #RC-GUI, #RC-GUI * { box-sizing: border-box; } #RC-GUI p { margin-top: 0; &:is(:last-child) { margin-bottom: 0; } } #RC-GUI button, #RC-GUI input, #RC-GUI select, #RC-GUI textarea, #RC-GUI button, #RC-GUI input, #RC-GUI select, #RC-GUI textarea { font: inherit; } body:has(#RC-Menu) { margin-top: var(--rc-topbar-height); } /* Login / configuration screens, using existing classes */ body:has(#RC-GUI) { min-width: 320px; min-height: 100vh; margin: 0; background: var(--rc-navy-900); } #RC-GUI { min-height: 100vh; } #RC-GUI .rc-config-box-wrapper { min-height: 100vh; height: auto; padding: clamp(20px, 5vw, 64px); background: radial-gradient(circle at 50% 10%, rgba(25, 169, 179, 0.18), transparent 38%), linear-gradient(145deg, var(--rc-navy-950), var(--rc-navy-800)); display: flex; flex-direction: column; justify-content: flex-start; } #RC-GUI .rc-config-box { width: min(100%, 430px); max-width: 430px; margin: 0; padding: clamp(26px, 5vw, 42px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--rc-radius-lg); background: rgba(255, 255, 255, 0.98); box-shadow: var(--rc-shadow-panel), 0 0 34px rgba(25, 169, 179, 0.2); backdrop-filter: blur(12px); } #RC-GUI .rc-config-box__logo { display: block; width: min(220px, 70%); height: auto; margin: 0 auto 28px; } #RC-GUI .rc-input-wrapper { margin-bottom: 18px; } #RC-GUI .rc-input-wrapper label { display: block; margin: 0 0 7px; color: var(--rc-text); font-size: 14px; font-weight: 650; } #RC-GUI input.rc-input { min-width: 0; min-height: 46px; padding: 11px 13px; border: 1px solid var(--rc-border); border-radius: var(--rc-radius-sm); background: var(--rc-surface); color: var(--rc-text); box-shadow: var(--rc-shadow-xs); transition: border-color var(--rc-transition), box-shadow var(--rc-transition), background var(--rc-transition); } #RC-GUI input.rc-input:hover { border-color: var(--rc-border-strong); background: var(--rc-white); } #RC-GUI input.rc-input:focus { border-color: var(--rc-primary); background: var(--rc-white); box-shadow: var(--rc-focus); outline: 0; } #RC-GUI .rc-button:hover { background: var(--rc-primary-hover); box-shadow: 0 9px 22px rgba(25, 169, 179, 0.32); transform: translateY(-1px); } #RC-GUI .rc-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #RC-GUI .rc-buttons>.rc-button { min-width: 0; margin: 0; } #RC-GUI .rc-button-secondary { border-color: var(--rc-border); background: var(--rc-white); color: var(--rc-text); box-shadow: var(--rc-shadow-xs); } #RC-GUI .rc-button-secondary:hover { border-color: var(--rc-primary-border); background: var(--rc-primary-soft); color: var(--rc-primary-active); box-shadow: var(--rc-shadow-sm); } /* Top navigation */ #RC-Menu { height: var(--rc-topbar-height); padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(90deg, var(--rc-navy-950), var(--rc-navy-850)); box-shadow: 0 8px 24px rgba(8, 21, 36, 0.2); } #RC-MenuLeft, #RC-MenuCenter, #RC-MenuRight { min-width: 0; align-items: center; gap: 4px; } #RC-Logo { width: 138px; height: var(--rc-topbar-height); margin: 0 10px 0 0; background-size: contain; } #RC-GUI .rc-menu-point, #RC-GUI .rc-menu-button, #RC-Menu .rc-menu-select-item { width: 42px; height: 42px; border: 1px solid transparent; border-radius: var(--rc-radius-sm); color: rgba(255, 255, 255, 0.82); transition: color var(--rc-transition), background var(--rc-transition), border-color var(--rc-transition), transform var(--rc-transition); } #RC-GUI .rc-menu-point:hover, #RC-GUI .rc-menu-button:hover, #RC-Menu .rc-menu-select-item:hover { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08); color: var(--rc-white); transform: translateY(-1px); } #RC-GUI .rc-menu-point.rc-active, #RC-GUI .rc-menu-button.rc-active, #RC-Menu .rc-menu-point.rc-active { border-color: rgba(25, 169, 179, 0.46); background: var(--rc-primary); color: var(--rc-white); box-shadow: 0 5px 16px rgba(25, 169, 179, 0.32); } #RC-CurrentPageBadges { height: var(--rc-topbar-height); } .rc-current-page-badge { height: 26px; padding: 0 10px; border-radius: var(--rc-radius-pill); font-size: 11px; font-weight: 700; } #RC-UserInfobox { min-width: 0; gap: 8px; align-items: center; padding: 0 8px; } #RC-UserInfobox>.user-image { width: 34px; height: 34px; margin: 0; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.96); } #RC-UserInfobox>span { max-width: 180px; padding: 0; overflow: hidden; font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } /* Existing HTML sometimes contains a leading space in the logout id. */ #RC-MenuRight form:has(.rc-button-logout) { position: relative; margin: 0; } #RC-GUI .rc-button-logout { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: var(--rc-radius-sm); background: transparent; box-shadow: none; letter-spacing: normal; } /* Panels */ #RC-MenuContentWrapper { top: var(--rc-topbar-height); height: calc(100vh - var(--rc-topbar-height)); align-items: stretch; } #RC-MenuContent, #RC-MenuSidebar { height: calc(100vh - var(--rc-topbar-height)); border: 0; border-right: 1px solid var(--rc-border); background: var(--rc-surface-2); box-shadow: 8px 0 28px rgba(8, 21, 36, 0.12); } #RC-MenuContentInner, #RC-MenuSidebarInner { min-height: calc(100% - 24px); margin: 12px; padding: 16px; border: 1px solid rgba(214, 222, 232, 0.85); border-radius: var(--rc-radius-md); background: var(--rc-white); box-shadow: var(--rc-shadow-sm); } #RC-GUI .rc-title-box, #RC-GUI .rc-headline-2.rc-title-box { margin: -16px -16px 18px; padding: 14px 18px; border: 0; border-radius: var(--rc-radius-md) var(--rc-radius-md) 0 0; background: linear-gradient(100deg, var(--rc-navy-850), var(--rc-navy-800)); color: var(--rc-white); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-align: left; } #RC-GUI .rc-settings-title, #RC-GUI .rc-title-box.rc-headline-3 { margin: 22px 0 12px; padding: 0 0 9px; border: 0; border-bottom: 1px solid var(--rc-border); background: transparent; color: var(--rc-text); font-size: 14px; font-weight: 700; } #RC-GUI .rc-btn-close { width: 32px; height: 32px; right: 18px; top: 17px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--rc-radius-sm); background: rgba(255, 255, 255, 0.12); color: var(--rc-white); box-shadow: none; } #RC-GUI .rc-btn-close:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.2); } .rc-menu-size-toggler-h { width: 7px; height: 54px; border-radius: var(--rc-radius-sm) 0 0 var(--rc-radius-sm); background: var(--rc-navy-850); opacity: 0.55; } /* Forms */ #RC-GUI .rc-input-wrapper label { color: var(--rc-text); font-size: 13px; font-weight: 650; } #RC-GUI input.rc-input[type="text"], #RC-GUI input.rc-input[type="password"], #RC-GUI input.rc-input[type="number"], #RC-GUI input.rc-input[type="email"], #RC-GUI input.rc-input[type="url"], #RC-GUI input.rc-input[type="search"], #RC-GUI select.rc-input, #RC-GUI textarea.rc-input { min-width: 0; min-height: var(--rc-control-height); padding: 9px 12px; border: 1px solid var(--rc-border); border-radius: var(--rc-radius-sm); background: var(--rc-surface); color: var(--rc-text); box-shadow: var(--rc-shadow-xs); font-size: 14px; line-height: 1.45; transition: border-color var(--rc-transition), box-shadow var(--rc-transition), background var(--rc-transition); } #RC-GUI textarea.rc-input { min-height: 110px; resize: vertical; } #RC-GUI input.rc-input:hover, #RC-GUI select.rc-input:hover, #RC-GUI textarea.rc-input:hover { border-color: var(--rc-border-strong); background: var(--rc-white); } #RC-GUI input.rc-input:focus, #RC-GUI select.rc-input:focus, #RC-GUI textarea.rc-input:focus { border-color: var(--rc-primary); background: var(--rc-white); box-shadow: var(--rc-focus); outline: 0; } #RC-GUI .rc-input::placeholder { color: #8a96a7; font-style: normal; } /* Buttons */ #RC-GUI .rc-button { min-height: var(--rc-control-height); padding: 9px 15px; border: 1px solid transparent; border-radius: var(--rc-radius-sm); background: var(--rc-primary); color: var(--rc-white); box-shadow: 0 5px 14px rgba(25, 169, 179, 0.2); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; transition: background var(--rc-transition), box-shadow var(--rc-transition), border-color var(--rc-transition), transform var(--rc-transition); } #RC-GUI .rc-button:hover { background: var(--rc-primary-hover); box-shadow: 0 7px 18px rgba(25, 169, 179, 0.28); transform: translateY(-1px); } #RC-GUI .rc-button:active { background: var(--rc-primary-active); transform: translateY(0); } #RC-GUI .rc-button-secondary { border-color: var(--rc-border); background: var(--rc-white); color: var(--rc-text); box-shadow: var(--rc-shadow-xs); } #RC-GUI .rc-button-secondary:hover { border-color: var(--rc-primary-border); background: var(--rc-primary-soft); color: var(--rc-primary-active); } #RC-GUI .rc-button-warning, #RC-GUI .rc-button.rc-button-warning { background: var(--rc-danger); box-shadow: 0 5px 14px rgba(217, 45, 32, 0.2); } #RC-GUI .rc-buttons { display: flex; gap: 10px; } #RC-GUI .rc-buttons>.rc-button { min-width: 0; margin: 0; } /* Messages */ #RC-GUI .rc-message, #RC-GUI .rc-message { padding: 12px 14px; border: 1px solid var(--rc-border); border-left-width: 4px; border-radius: var(--rc-radius-sm); background: var(--rc-white); color: var(--rc-text); box-shadow: var(--rc-shadow-xs); font-size: 13px; } #RC-GUI .rc-message-error, #RC-GUI .rc-message-error { border-left-color: var(--rc-danger); background: #fff7f6; } #RC-GUI .rc-message-success, #RC-GUI .rc-message-success { border-left-color: var(--rc-success); background: #f3fbf7; } #RC-GUI .rc-message-warning, #RC-GUI .rc-message-warning { border-left-color: var(--rc-warning); background: #fffaf0; } #RC-GUI .rc-message-info, #RC-GUI .rc-message-info { border-left-color: var(--rc-info); background: #f5f8ff; } /* Tabs and filter chips */ #RC-GUI .rc-tabs { padding: 6px; border: 1px solid var(--rc-border); border-radius: var(--rc-radius-md); background: var(--rc-surface); } #RC-GUI .rc-menu-tabs-inner { gap: 6px; padding-bottom: 14px; } #RC-GUI .rc-menu-tab, #RC-GUI .rc-toggle-btn, #RC-GUI .rc-search-category { border: 1px solid var(--rc-border); border-radius: var(--rc-radius-sm); background: var(--rc-white); color: var(--rc-text-muted); box-shadow: var(--rc-shadow-xs); transition: all var(--rc-transition); } #RC-GUI .rc-menu-tab:hover, #RC-GUI .rc-toggle-btn:hover, #RC-GUI .rc-search-category:hover { border-color: var(--rc-primary-border); color: var(--rc-primary-active); } #RC-GUI .rc-menu-tab.rc-tabs-toggler-active, #RC-GUI .rc-toggle-btn.rc-active, #RC-GUI .rc-search-category.rc-active { border-color: var(--rc-primary); background: var(--rc-primary-soft); color: var(--rc-primary-active); box-shadow: none; } /* Lists and trees */ #RC-GUI .rc-tree-list, #RC-GUI .rc-listitem-children, #RC-GUI .rc-mediacat-list { padding-left: 14px; } #RC-GUI .rc-tree-list:first-child, #RC-GUI .rc-listitem-children:first-child { padding-left: 0; } #RC-GUI .rc-tree-item, #RC-GUI .rc-listitem, #RC-GUI .rc-draggable-list .rc-draggable-item { min-height: 38px; margin-bottom: 5px; padding: 8px 96px 8px 30px; border: 1px solid var(--rc-border); border-radius: var(--rc-radius-sm); background: var(--rc-white); color: var(--rc-text); box-shadow: var(--rc-shadow-xs); transition: border-color var(--rc-transition), background var(--rc-transition), box-shadow var(--rc-transition), transform var(--rc-transition); } #RC-GUI .rc-listitem:not(.rc-draggable-tree .rc-listitem) { padding-left: 12px; } #RC-GUI .rc-tree-item:hover:not(.rc-tree-item-current), #RC-GUI .rc-listitem:hover:not(.rc-selected), #RC-GUI .rc-draggable-list .rc-draggable-item:hover:not(.rc-selected) { border-color: var(--rc-primary-border); background: #fbfeff; box-shadow: var(--rc-shadow-sm); transform: translateY(-1px); } #RC-GUI .rc-tree-item.rc-tree-item-current, #RC-GUI .rc-listitem.rc-selected, #RC-GUI .rc-draggable-list .rc-draggable-item.rc-selected { border-color: var(--rc-primary); background: var(--rc-primary-soft); color: var(--rc-primary-active); box-shadow: inset 3px 0 0 var(--rc-primary); } #RC-GUI .rc-tree-item.rc-tree-item-disabled, #RC-GUI .rc-listitem.rc-listitem-disabled { opacity: 0.55; } #RC-GUI .rc-tree-item .rc-options, #RC-GUI .rc-listitem .rc-options { top: 50%; right: 7px; gap: 2px; transform: translateY(-50%); } #RC-GUI .rc-tree-item .rc-option, #RC-GUI .rc-listitem .rc-option, #RC-GUI .rc-tree-item .rc-option a, #RC-GUI .rc-listitem .rc-option a { display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; border-radius: 6px; color: var(--rc-text-muted); } #RC-GUI .rc-tree-item .rc-option:hover, #RC-GUI .rc-listitem .rc-option:hover { background: var(--rc-primary-soft); color: var(--rc-primary-active); } #RC-GUI .rc-draggable-openchilds { top: 50%; left: 8px; transform: translateY(-50%); } #RC-GUI .rc-draggable-openchilds::after, #RC-GUI .rc-tree-item-current>.rc-draggable-openchilds::after { color: var(--rc-text-muted) !important; } #RC-GUI .rc-listitem-label { margin-left: 7px; padding: 3px 7px; border: 1px solid var(--rc-border); background: var(--rc-surface-2); color: var(--rc-text-muted); opacity: 1; } /* Drag/drop zones */ #RC-GUI .rc-draggable-dropzone.rc-state-hover { min-height: 8px; border-radius: var(--rc-radius-pill); background: var(--rc-primary); box-shadow: 0 0 0 3px var(--rc-primary-soft); } #RC-GUI .rc-filedrop, #RC-Menu-Media .rc-media-filedrop { padding: 22px 18px; border: 2px dashed var(--rc-primary-border); border-radius: var(--rc-radius-md); background: var(--rc-primary-soft); color: var(--rc-primary-active); font-weight: 650; transition: all var(--rc-transition); } #RC-GUI .rc-filedrop:hover, #RC-Menu-Media .rc-media-filedrop:hover { border-color: var(--rc-primary); background: rgba(25, 169, 179, 0.17); } /* Media cards */ #RC-Media-Files .rc-media-file { min-height: 70px; gap: 10px; padding: 8px; border: 1px solid var(--rc-border); border-radius: var(--rc-radius-sm); background: var(--rc-white); color: var(--rc-text); box-shadow: var(--rc-shadow-xs); } #RC-Media-Files .rc-media-file:hover { border-color: var(--rc-primary-border); box-shadow: var(--rc-shadow-sm); } #RC-Media-Files .rc-media-file.rc-selected { border-color: var(--rc-primary); background: var(--rc-primary-soft); box-shadow: inset 3px 0 0 var(--rc-primary); } #RC-Menu-Media .rc-media-file-thumbnail, #RC-GUI .rc-picker-item-picture { overflow: hidden; border-radius: 7px; background: var(--rc-navy-850); } #RC-Menu-Media .rc-media-file-thumbnail img, #RC-GUI .rc-picker-item-picture img { width: 100%; height: 100%; object-fit: cover; } /* Popups */ #RC-GUI .rc-popup-layer { background: rgba(8, 21, 36, 0.65); backdrop-filter: blur(4px); } #RC-GUI .rc-popup-wrapper-inner { width: min(92vw, 960px); padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--rc-radius-lg); background: var(--rc-white); box-shadow: 0 28px 80px rgba(8, 21, 36, 0.38); } #RC-GUI .rc-popup-wrapper-inner>div:not(.rc-popup-close) { max-height: 84vh; padding: 18px; border-radius: inherit; box-shadow: none; } #RC-GUI .rc-popup .rc-popup-close { width: 36px; height: 36px; top: -12px; right: -12px; border: 2px solid var(--rc-white); background: var(--rc-primary); box-shadow: var(--rc-shadow-md); } #RC-GUI .rc-picker-popup { border-radius: var(--rc-radius-lg); } /* Checkbox */ #RC-GUI input.rc-checkbox[type="checkbox"] { width: 22px; min-width: 22px; height: 22px; border: 1px solid var(--rc-border-strong); border-radius: 6px; background: var(--rc-white); box-shadow: var(--rc-shadow-xs); transition: all var(--rc-transition); } #RC-GUI input.rc-checkbox[type="checkbox"]:checked { border-color: var(--rc-primary); background: var(--rc-primary); } #RC-GUI input.rc-checkbox[type="checkbox"]:focus-visible { box-shadow: var(--rc-focus); } /* Tooltips and scrollbars */ .rc-tooltip-gui { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 7px; background: rgba(8, 21, 36, 0.94); box-shadow: var(--rc-shadow-sm); font-size: 12px; } #RC-GUI ::-webkit-scrollbar { width: 9px; height: 9px; } #RC-GUI ::-webkit-scrollbar-track { background: transparent; box-shadow: none; } #RC-GUI ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--rc-radius-pill); background: #aab7c5; background-clip: padding-box; } #RC-GUI ::-webkit-scrollbar-thumb:hover { background: #8494a6; background-clip: padding-box; } #RC-GUI :focus-visible, #RC-GUI :focus-visible { outline: 3px solid rgba(25, 169, 179, 0.28); outline-offset: 2px; } /* Legacy fw-* compatibility used by current CMS markup. */ #RC-GUI .fw-centered { margin-left: auto; margin-right: auto; } #RC-GUI .fw-max-width-small { max-width: 768px; } #RC-GUI .fw-cols { display: flex; flex-wrap: wrap; margin: 0 -6px; } #RC-GUI .fw-cols::after { content: none; } #RC-GUI .fw-cols>.fw-col { float: none; min-width: 0; padding: 0 6px; } #RC-GUI .fw-col-6 { width: 50%; } #RC-GUI .fw-col-12 { width: 100%; } #RC-GUI .fw-margin-b-xsmall { margin-bottom: 10px; } #RC-GUI .fw-margin-b-small { margin-bottom: 20px; } /* Responsive */ @media (max-width: 900px) { #RC-Menu { overflow-x: auto; overflow-y: hidden; } #RC-UserInfobox>span, #RC-CurrentPageBadges { display: none; } #RC-MenuContent, #RC-MenuSidebar { width: min(88vw, 520px) !important; min-width: min(88vw, 520px) !important; max-width: min(88vw, 520px) !important; } } @media (max-width: 700px) { :where(#RC-GUI, #RC-GUI) { --rc-topbar-height: 56px; } #RC-Menu { padding: 0 6px; } #RC-Logo { width: 112px; } #RC-GUI .rc-menu-point, #RC-GUI .rc-menu-button, #RC-Menu .rc-menu-select-item { width: 38px; min-width: 38px; height: 38px; } #RC-MenuContent, #RC-MenuSidebar { width: 92vw !important; min-width: 92vw !important; max-width: 92vw !important; } #RC-MenuContentInner, #RC-MenuSidebarInner { margin: 8px; padding: 13px; } #RC-GUI .rc-title-box, #RC-GUI .rc-headline-2.rc-title-box { margin: -13px -13px 16px; } #RC-GUI .fw-col-6 { width: 100%; } #RC-GUI .rc-config-box-wrapper { padding: 20px 14px; } #RC-GUI .rc-config-box { padding: 26px 20px; } #RC-GUI .rc-buttons { grid-template-columns: 1fr; } .rc-config-box { max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); } } @media (prefers-reduced-motion: reduce) { #RC-GUI *, #RC-GUI * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } }