:root { --primary-color: #f6d000; /* #411564 */ --light-primary-color: #cca300; /* #411564 */ --primary-text-color: #472272; --primary-text-hover-color: #fff; --secondary-color: #9680af; --light-secondary-color: #baa6c9; --secondary-text-color: #fff; --secondary-text-hover-color: #472272; --disabled-bg: #939393; --success-color: #5cb85c; --success-text-color: #fff; --error-color: #af3b39; --hover-error-color: #cc5451; --error-text-color: #fff; --hover-error-text-color: #ddd; --warning-color: #eecb25; --warning-text-color: #000; --info-color: #89C4F4; --background-highlight-color: #5a3481; --text-color: #666; --highlight-text-color: #ecd4ec; --text-size: 16px; --border-color: #e5e5e5; --border-radius: 4px; /** Background color of the element - the lowest background **/ --ground-color: #f0f0f0; /** Background color of highlighted elements, e.g. cards - the highest background **/ --surface-color: #fff; /** Currently not used anywhere, but these breakpoints should be used in @media queries. */ --bp-tiny: 100px; --bp-small: 576px; --bp-medium: 768px; --bp-large: 992px; --bp-huge: 1200px; } .member-area { background-color: #f0f0f0; } .blurry { opacity: .5; filter: blur(1px); pointer-events: none; } /** * css class to display inline elements that should only act as container without any styles. * Used to dynamically display action elements within elements (e.g. lekker-tooltip, password-toggle). * It is also used as a selector, so do not change the name. */ .relative-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; } /** * This class is used to display elements within the "relative-container" class (e.g. lekker-tooltip, password-toggle). * It is also used as a selector, so do not change the name. */ .absolute-container { position: absolute; right: 1rem; display: flex; gap: 0.25rem; padding: 0.5rem; top: 1.1rem; } /** Move to css/theme/components/form after merge with main */ input[type="file"] { width: 100%; border: none; }