/* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Style-Imports Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS settings themes base layout modules routes utilities themes systems --------------------------------------------------- */ /*======================================================== settings ======================================================== */ /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Settings Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS fonts background_colors font_colors toolbar border --------------------------------------------------- */ /*======================================================== background_colors ======================================================== */ /*======================================================== font_colors ======================================================== */ /*======================================================== heights ======================================================== */ /*======================================================== border ======================================================== */ /*======================================================== padding ======================================================== */ /*======================================================== themes ======================================================== */ /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Theme: Intrakey Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS settings general_styles background color button_modifiers border input images icons --------------------------------------------------- */ /*======================================================== fonts ======================================================== */ /*======================================================== color system ======================================================== */ :root.intrakey { --color-accent: #0077BC; --color-accent-dark: #20526F; --color-background: #ffffff; --color-background-widget: #F2F2F7; --color-text: #191919; --color-text-muted: #282828; --color-link: #0077bc; --color-danger: #D10000; --color-warning: #C88F2D; --color-success: #197630; --color-background-danger: #D10000; --color-background-warning: #E27D1E; --color-background-success: #2BC853; --color-background-neutral: #14A9FF; --icon-color-button: #0077BC; --icon-color-toolbar: #ffffff; --icon-color-toolbar-active: #0077BC; --color-box-shadow: #5d6163; --icon-color-accent-navi: #0077BC; --icon-color-navi: #797D7F; --icon-color-navi-light: #bfbfbf; --icon-control-color: #0077BC; --control-border-color: #0077BC; --color-devicestate-water: #14A9FF; --color-search-results: #e6e6ef; --icon-color-dark: #494d4f; } :root.intrakey .toolbar, :root.intrakey .toolbar--filter { --icon-color-button: #ffffff; } :root.intrakey .dark { --icon-color-accent-navi: #0077BC; --icon-color-navi: #bfbfbf; --icon-color-navi-light: #797D7F; --color-accent: #0077BC; --color-success: #2BC853; --color-warning: #C88F2D; --color-background-danger: #D10000; } :root.intrakey .svg-icon.is-selected { --icon-color-dark: #e6e6ef; } :root.intrakey .is-darkmode { --color-accent: #0077BC; --color-accent-dark: #20526F; --color-background: #191919; --color-background-widget: #35393C; --color-text: #ECE9E1; --color-text-muted: #ECE9E1; --color-link: #0a84ff; --color-danger: #FF1A1A; --color-warning: #C88F2D; --color-success: #2BC853; --color-background-danger: #D10000; --color-background-warning: #E27D1E; --color-background-success: #2BC853; --color-background-neutral: #14A9FF; --icon-color-button: #ECE9E1; --icon-color-toolbar: #ffffff; --icon-color-toolbar-active: #0077BC; --color-box-shadow: #d7d7d8; --icon-color-accent-navi: #0077BC; --icon-color-navi: #bfbfbf; --icon-color-navi-light: #797D7F; --icon-control-color: #ECE9E1; --control-border-color: #ECE9E1; --color-search-results: #494d4f; } :root.intrakey .nav { --icon-color-accent-navi: #0077BC; --icon-color-navi: #bfbfbf; } :root.intrakey .toolbar, :root.intrakey .toolbar--filter { --icon-color-button: #ffffff; } :root.intrakey .light { --icon-color-accent-navi: #0077BC; --icon-color-navi: #797D7F; --icon-color-navi-light: #bfbfbf; --color-accent: #0077BC; --color-success: #197630; --color-warning: #C88F2D; --color-background-danger: #D10000; } .color-accent { color: var(--color-accent); } .color-accent-dark { color: var(--color-accent-dark); } .color-accent-inactive { color: var(--color-accent-inactive); } .color-link, .color-blue { color: var(--color-link); } .color-danger, .color-red { color: var(--color-danger); } .color-warning, .color-yellow { color: var(--color-warning); } .color-success, .color-green { color: var(--color-success); } .bg-accent { background-color: var(--color-accent); } .bg-accent-dark { background-color: var(--color-accent-dark); } .bg-accent-inactive { background-color: var(--color-accent-inactive); } .bg-danger, .bg-red { background-color: var(--color-background-danger); } .bg-warning, .bg-yellow { background-color: var(--color-background-warning); } .bg-success, .bg-green { background-color: var(--color-background-success); } .bg-blue { background-color: var(--color-link); } .bg-neutral { background-color: var(--color-background-neutral); } /*======================================================== new colors ======================================================== */ /*======================================================== old colors ======================================================== */ html.intrakey { /*======================================================== general_styles ======================================================== */ --input-border-radius: 6px; color: #191919; --ik-head: #ffffff; --ik-head-dark: #35393c; --ik-frame: #bfddee; --ik-frame-dark: #20526f; --ik-divide: #d7d7d8; --ik-divide-dark: #5d6163; --ik-hover: #ececec; --ik-hover-dark: #494d4f; --ik-head-neg: #35393c; --ik-head-dark-neg: #ffffff; --ik-frame-neg: #20526f; --ik-frame-dark-neg: #bfddee; --ik-divide-neg: #5d6163; --ik-divide-dark-neg: #d7d7d8; --ik-hover-neg: #494d4f; --ik-hover-dark-neg: #ececec; --hov-bg-color: #ececec; --color-blue: #0077bc; --color-red: #D10000; --color-green: #197630; --color-yellow: #C88F2D; --color-orange: #e27d1e; --color-purple: #db00ff; --color-pink: #ff0089; --color-grey: #a0a2a5; /*======================================================== color_classes ======================================================== */ /*======================================================== background ======================================================== */ /*======================================================== color ======================================================== */ /*======================================================== button_modifiers ======================================================== */ --button-border-radius: 500px; /*======================================================== control_modifiers ======================================================== */ --icon-control-color: #0077BC; --control-border-color: #0077BC; --control-bg-color: transparent; --control-border-radius: 500px; /*======================================================== border ======================================================== */ /*======================================================== input ======================================================== */ /*======================================================== loading animation ======================================================== */ /*======================================================== home ======================================================== */ /*======================================================== darkmode ======================================================== */ } html.intrakey .ik-black-0 { background-color: #ffffff; } html.intrakey .ik-black-25 { background-color: #bfbfbf; } html.intrakey .ik-black-100 { background-color: #000000; } html.intrakey .ik-darkgrey-5 { background-color: #F5F5F5; } html.intrakey .ik-darkgrey-10 { background-color: #ececec; } html.intrakey .ik-darkgrey-20 { background-color: #d7d7d8; } html.intrakey .ik-darkgrey-65 { background-color: #797d7f; } html.intrakey .ik-darkgrey-80 { background-color: #5d6163; } html.intrakey .ik-darkgrey-90 { background-color: #494D4F; } html.intrakey .ik-darkgrey-100 { background-color: #35393c; } html.intrakey .ik-lightyellow { background-color: #f1e3c4; } html.intrakey .ik-lightblue { background-color: #bfddee; } html.intrakey .ik-darkblue { background-color: #20526f; } html.intrakey .ik-head { background-color: #ffffff; } html.intrakey .ik-head-dark { background-color: #35393c; } html.intrakey .ik-frame { background-color: #bfddee; } html.intrakey .ik-frame-dark { background-color: #20526f; } html.intrakey .ik-divide { background-color: #d7d7d8; } html.intrakey .ik-divide-dark { background-color: #5d6163; } html.intrakey .ik-hover { background-color: #ececec; } html.intrakey .ik-hover-dark { background-color: #494d4f; } html.intrakey .ik-head-neg { background-color: #000000; } html.intrakey .ik-head-dark-neg { background-color: #cac6c3; } html.intrakey .ik-frame-neg { background-color: #402211; } html.intrakey .ik-frame-dark-neg { background-color: #dfad90; } html.intrakey .ik-divide-neg { background-color: #282827; } html.intrakey .ik-divide-dark-neg { background-color: #a29e9c; } html.intrakey .ik-hover-neg { background-color: #131313; } html.intrakey .ik-hover-dark-neg { background-color: #b6b2b0; } html.intrakey .ik-corporateblue { background-color: #0077bc; } html.intrakey .ik-green { background-color: #2bc853; } html.intrakey .ik-darkgreen { background-color: #4e7123; } html.intrakey .ik-yellow { background-color: #c88f2d; } html.intrakey .ik-orange { background-color: #e27d1e; } html.intrakey .ik-red { background-color: #ff1a1a; } html.intrakey .ik-darkred { background-color: #810000; } html.intrakey .ik-pink { background-color: #ff0089; } html.intrakey .ik-purple { background-color: #db00ff; } html.intrakey .ik-blue { background-color: #14a9ff; } html.intrakey .ik-grey { background-color: #a0a2a5; } html.intrakey .bg-white, html.intrakey .input, html.intrakey .input--search { background-color: #ffffff; } html.intrakey .bg-themed, html.intrakey .entry.is-selected, html.intrakey html.constructor .products__emblem--home-3, html.constructor html.intrakey .products__emblem--home-3, html.intrakey html.constructor .products__emblem--home-2, html.constructor html.intrakey .products__emblem--home-2, html.intrakey html.secanda .products__emblem--home-3, html.secanda html.intrakey .products__emblem--home-3, html.intrakey html.secanda .products__emblem--home-2, html.secanda html.intrakey .products__emblem--home-2, html.intrakey html.bikeparkbox .products__emblem--home-3, html.bikeparkbox html.intrakey .products__emblem--home-3, html.intrakey html.bikeparkbox .products__emblem--home-2, html.bikeparkbox html.intrakey .products__emblem--home-2, html.intrakey .products__emblem--home-1 { background-color: #0077bc; } html.intrakey .bg-themed a, html.intrakey .entry.is-selected a, html.intrakey html.constructor .products__emblem--home-3 a, html.constructor html.intrakey .products__emblem--home-3 a, html.intrakey html.constructor .products__emblem--home-2 a, html.constructor html.intrakey .products__emblem--home-2 a, html.intrakey html.secanda .products__emblem--home-3 a, html.secanda html.intrakey .products__emblem--home-3 a, html.intrakey html.secanda .products__emblem--home-2 a, html.secanda html.intrakey .products__emblem--home-2 a, html.intrakey html.bikeparkbox .products__emblem--home-3 a, html.bikeparkbox html.intrakey .products__emblem--home-3 a, html.intrakey html.bikeparkbox .products__emblem--home-2 a, html.bikeparkbox html.intrakey .products__emblem--home-2 a, html.intrakey .products__emblem--home-1 a { color: var(--color-link) !important; } html.intrakey .bg-themed-nav, html.intrakey .nav { background-color: #36393c; } html.intrakey .bg-themed-toolbar, html.intrakey .toolbar, html.intrakey .toolbar--filter { background-color: #0077bc; } html.intrakey .bg-themed-overlay, html.intrakey .entry, html.intrakey .overlay__section { background-color: #F2F2F7; } html.intrakey .bg-themed-separator, html.intrakey .separator { background-color: #F2F2F7; } html.intrakey .splash-html__logo { background-image: url(images/splashscreens/intrakey_light.svg); } html.intrakey .splash-html__logo.inactive { background-image: url(images/splashscreens/intrakey_dark.svg) !important; } html.intrakey .bg-themed-message-box, html.intrakey .message-box { background-color: #d9ebf5; } html.intrakey .bg-themed-message-box-error, html.intrakey .message-box--error { background-color: #810000; } html.intrakey .bg-themed-home, html.intrakey .products { background-color: #d9ebf5; } html.intrakey .bg-themed-list-green { background-color: #bbffbb; } html.intrakey .bg-themed-list-yellow { background-color: #ffff90; } html.intrakey .bg-themed-list-red { background-color: #ffbbbb; } html.intrakey .color-themed, html.intrakey .timejournal__item, html.intrakey .header1, html.intrakey .html a, .html html.intrakey a, html.intrakey .separator a, .separator html.intrakey a, html.intrakey .html h3, .html html.intrakey h3, html.intrakey .separator h3, .separator html.intrakey h3, html.intrakey .html h1, .html html.intrakey h1, html.intrakey .separator h1, .separator html.intrakey h1, html.intrakey .input, html.intrakey .input--search, html.intrakey html.constructor .main-pane.is-darkmode .html--home-3 h1, html.constructor .main-pane.is-darkmode .html--home-3 html.intrakey h1, html.intrakey html.constructor .main-pane.is-darkmode .html--home-3 a, html.constructor .main-pane.is-darkmode .html--home-3 html.intrakey a, html.intrakey html.constructor .main-pane.is-darkmode .html--home-2 h1, html.constructor .main-pane.is-darkmode .html--home-2 html.intrakey h1, html.intrakey html.constructor .main-pane.is-darkmode .html--home-2 a, html.constructor .main-pane.is-darkmode .html--home-2 html.intrakey a, html.constructor .main-pane.is-darkmode .html--home-1 html.intrakey h1, html.constructor .main-pane.is-darkmode .html--home-1 html.intrakey a, html.intrakey html.constructor .html--home-3 h1, html.constructor .html--home-3 html.intrakey h1, html.intrakey html.constructor .html--home-3 a, html.constructor .html--home-3 html.intrakey a, html.intrakey html.constructor .html--home-2 h1, html.constructor .html--home-2 html.intrakey h1, html.intrakey html.constructor .html--home-2 a, html.constructor .html--home-2 html.intrakey a, html.constructor .html--home-1 html.intrakey h1, html.constructor .html--home-1 html.intrakey a, html.intrakey html.secanda .main-pane.is-darkmode .html--home-3 h1, html.secanda .main-pane.is-darkmode .html--home-3 html.intrakey h1, html.intrakey html.secanda .main-pane.is-darkmode .html--home-3 a, html.secanda .main-pane.is-darkmode .html--home-3 html.intrakey a, html.intrakey html.secanda .main-pane.is-darkmode .html--home-2 h1, html.secanda .main-pane.is-darkmode .html--home-2 html.intrakey h1, html.intrakey html.secanda .main-pane.is-darkmode .html--home-2 a, html.secanda .main-pane.is-darkmode .html--home-2 html.intrakey a, html.secanda .main-pane.is-darkmode .html--home-1 html.intrakey h1, html.secanda .main-pane.is-darkmode .html--home-1 html.intrakey a, html.intrakey html.secanda .html--home-3 h1, html.secanda .html--home-3 html.intrakey h1, html.intrakey html.secanda .html--home-3 a, html.secanda .html--home-3 html.intrakey a, html.intrakey html.secanda .html--home-2 h1, html.secanda .html--home-2 html.intrakey h1, html.intrakey html.secanda .html--home-2 a, html.secanda .html--home-2 html.intrakey a, html.secanda .html--home-1 html.intrakey h1, html.secanda .html--home-1 html.intrakey a, html.intrakey html.bikeparkbox .main-pane.is-darkmode .html--home-3 h1, html.bikeparkbox .main-pane.is-darkmode .html--home-3 html.intrakey h1, html.intrakey html.bikeparkbox .main-pane.is-darkmode .html--home-3 a, html.bikeparkbox .main-pane.is-darkmode .html--home-3 html.intrakey a, html.intrakey html.bikeparkbox .main-pane.is-darkmode .html--home-2 h1, html.bikeparkbox .main-pane.is-darkmode .html--home-2 html.intrakey h1, html.intrakey html.bikeparkbox .main-pane.is-darkmode .html--home-2 a, html.bikeparkbox .main-pane.is-darkmode .html--home-2 html.intrakey a, html.bikeparkbox .main-pane.is-darkmode .html--home-1 html.intrakey h1, html.bikeparkbox .main-pane.is-darkmode .html--home-1 html.intrakey a, html.intrakey html.bikeparkbox .html--home-3 h1, html.bikeparkbox .html--home-3 html.intrakey h1, html.intrakey html.bikeparkbox .html--home-3 a, html.bikeparkbox .html--home-3 html.intrakey a, html.intrakey html.bikeparkbox .html--home-2 h1, html.bikeparkbox .html--home-2 html.intrakey h1, html.intrakey html.bikeparkbox .html--home-2 a, html.bikeparkbox .html--home-2 html.intrakey a, html.bikeparkbox .html--home-1 html.intrakey h1, html.bikeparkbox .html--home-1 html.intrakey a, html.intrakey .main-pane.is-darkmode .html--home-1 h1, html.intrakey .main-pane.is-darkmode .html--home-1 a, html.intrakey .html--home-1 h1, html.intrakey .html--home-1 a { color: #0077bc; } html.intrakey .color-themed-text, html.intrakey .day, html.intrakey .timejournal__status { color: #333339; } html.intrakey .color-themed-nav, html.intrakey .nav__button { color: #babec3; } html.intrakey .color-themed-label, html.intrakey .label--overlay { color: var(--color-text); } html.intrakey .color-themed-html, html.intrakey .input--maintenance, html.constructor .main-pane.is-darkmode html.intrakey .html--home-1, html.constructor .main-pane.is-darkmode html.intrakey .html--home-2, html.constructor .main-pane.is-darkmode html.intrakey .html--home-3, html.secanda .main-pane.is-darkmode html.intrakey .html--home-1, html.secanda .main-pane.is-darkmode html.intrakey .html--home-2, html.secanda .main-pane.is-darkmode html.intrakey .html--home-3, html.bikeparkbox .main-pane.is-darkmode html.intrakey .html--home-1, html.bikeparkbox .main-pane.is-darkmode html.intrakey .html--home-2, html.bikeparkbox .main-pane.is-darkmode html.intrakey .html--home-3, html.intrakey .main-pane.is-darkmode .html--home-1, html.intrakey .main-pane.is-darkmode .html--home-2, html.intrakey .main-pane.is-darkmode .html--home-3, html.intrakey .html--home-1, html.intrakey .html--home-2, html.intrakey .html--home-3 { color: var(--color-text); } html.intrakey .color-themed-message-box-error, html.intrakey .message-box--error { color: #f9fafb; } html.intrakey .color-themed-disabled { color: #bfbfbf; } html.intrakey .color-themed-state-blue { color: #0077bc; } html.intrakey .color-themed-state-red, html.intrakey .list__text--state.red { color: #D10000; } html.intrakey .color-themed-state-green, html.intrakey .list__text--state.green { color: #197630; } html.intrakey .content__fixed.bg-white, html.intrakey .content__fixed.input, html.intrakey .content__fixed.input--search { background-color: #F2F2F7; } html.intrakey .button, html.intrakey .button--full-width, html.intrakey .button--right, html.intrakey .button--middle, html.intrakey .button--float, html.intrakey .button--left, html.intrakey .button--inline, html.intrakey .button--flex-width, html.intrakey .button--square, html.intrakey .button--form, html.intrakey .button--neutral { /* primary corporate */ --button-bg-color: #0077BC; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.intrakey .button--ok { /* primary green */ --button-text-color: #000000; --button-bg-color: #2BC853; --icon-color-button: #000000; } html.intrakey .button--dangerous { /* primary red */ --button-text-color: #ffffff; --button-bg-color: #D10000; --icon-color-button: #ffffff; } html.intrakey .button--warning { /* primary yellow */ --button-text-color: #000000; --button-bg-color: #E27D1E; --icon-color-button: #000000; } html.intrakey .button--action { /* secondary */ --button-text-color: #0077BC; --button-bg-color: transparent; --icon-color-button: #0077BC; --button-border-color: #0077BC; } html.intrakey .button--disabled { opacity: 0.3; } html.intrakey .border-themed-nav, html.intrakey .nav__item { border-color: #222629; } html.intrakey .border-themed-list, html.intrakey .html hr, .html html.intrakey hr, html.intrakey .separator hr, .separator html.intrakey hr, html.intrakey .list__item { border-color: var(--color-background-widget); } html.intrakey .border-themed-table, html.intrakey .table__column, html.intrakey .table { border-color: var(--color-background-widget); } html.intrakey .input-themed, html.intrakey .switch, html.intrakey .input, html.intrakey .input--search { border-color: #bfbfbf; } html.intrakey .input-themed-error, html.intrakey .input--error { border-color: #D10000; } html.intrakey .input-themed-inner, html.intrakey .switch .switch__inner, .switch html.intrakey .switch__inner, html.intrakey .input--radio::after { background-color: var(--color-accent); color: #ECE9E1; } html.intrakey .input-themed-inner.input--radio, html.intrakey .switch .input--radio.switch__inner, .switch html.intrakey .input--radio.switch__inner, html.intrakey .input--radio::after { background-color: transparent; } html.intrakey .input-themed-disabled { color: #bfbfbf; border-color: #e6e6e6; } html.intrakey .input-themed-disabled-inner, html.intrakey .input--radio:disabled::after { background-color: #e6e6e6; } html.intrakey .input-themed-checked, html.intrakey .switch .switch__inner.is-switched-on, .switch html.intrakey .switch__inner.is-switched-on, html.intrakey .input--radio:checked, html.intrakey .input--checkbox:checked { border-color: #0077BC; background-color: #0077BC; } html.intrakey .input-themed-checked-disabled { background-color: #b7e2c8; border-color: #b7e2c8; } html.intrakey .switch { border-color: #bfbfbf; background-color: #bfbfbf; } html.intrakey .switch.isActive { border-color: #0077BC; background-color: #0077BC; } html.intrakey .switch__inner { border-color: #ffffff; background-color: #ffffff; } html.intrakey .switch .switch__inner { border-color: #ffffff; background-color: #ffffff; } html.intrakey .switch .switch__inner.is-switched-on { border-color: #ffffff; background-color: #ffffff; } html.intrakey .signature-modal-title { --color-bg-signature-modal-title: #0077BC; } html.intrakey .signature-modal-button-group { --color-bg-signature-modal-button-group: #ffffff; } html.intrakey .loader__image { width: 45px; aspect-ratio: 1; height: 45px; border-radius: 50%; border: 4px solid #0077BC; border-right-color: transparent; animation: l2 1s infinite linear; } @keyframes l2 { to { transform: rotate(1turn); } } html.intrakey .products__item--home-1 { background-image: url(images/home_intrakey/IK_App-Bild_Produkte_Zutritt_640.jpg); } html.intrakey .products__item--home-2 { background-image: url(images/home_intrakey/IK_App-Bild_Produkte_Zeit_640.jpg); } html.intrakey .products__item--home-3 { background-image: url(images/home_intrakey/IK_App-Bild_Produkte_Fuhrpark_640.jpg); } html.intrakey .products__emblem--home-2 { background-color: #A7C800; } html.intrakey .products__emblem--home-3 { background-color: #FF6900; } html.intrakey .html--home-2 h1, html.intrakey .html--home-2 a { color: #9DBE00 !important; } html.intrakey .html--home-3 h1, html.intrakey .html--home-3 a { color: #F55F00 !important; } html.intrakey .main-pane.is-darkmode { background: #191919; color: #ECE9E1; --hov-bg-color: #494d4f; --ik-head: #35393c; --ik-divide: #5d6163; --ik-frame: #20526f; --ik-hover: #494d4f; --ik-head-neg: #ffffff; --ik-divide-neg: #d7d7d8; --ik-frame-neg: #bfddee; --ik-hover-neg: #ececec; --color-blue: #14a9ff; --color-red: #FF1A1A; --color-green: #2BC853; --color-yellow: #C88F2D; --icon-control-color: #ECE9E1; --control-border-color: #ECE9E1; } html.intrakey .main-pane.is-darkmode .bg-themed, html.intrakey .main-pane.is-darkmode .entry.is-selected, html.intrakey .main-pane.is-darkmode html.constructor .products__emblem--home-3, html.constructor html.intrakey .main-pane.is-darkmode .products__emblem--home-3, html.intrakey .main-pane.is-darkmode html.constructor .products__emblem--home-2, html.constructor html.intrakey .main-pane.is-darkmode .products__emblem--home-2, html.intrakey .main-pane.is-darkmode html.secanda .products__emblem--home-3, html.secanda html.intrakey .main-pane.is-darkmode .products__emblem--home-3, html.intrakey .main-pane.is-darkmode html.secanda .products__emblem--home-2, html.secanda html.intrakey .main-pane.is-darkmode .products__emblem--home-2, html.intrakey .main-pane.is-darkmode html.bikeparkbox .products__emblem--home-3, html.bikeparkbox html.intrakey .main-pane.is-darkmode .products__emblem--home-3, html.intrakey .main-pane.is-darkmode html.bikeparkbox .products__emblem--home-2, html.bikeparkbox html.intrakey .main-pane.is-darkmode .products__emblem--home-2, html.intrakey .main-pane.is-darkmode .products__emblem--home-1 { background-color: #0077BC; } html.intrakey .main-pane.is-darkmode .bg-themed-toolbar, html.intrakey .main-pane.is-darkmode .toolbar, html.intrakey .main-pane.is-darkmode .toolbar--filter { background-color: #0077BC; } html.intrakey .main-pane.is-darkmode .splash-html__logo { background-image: url(images/splashscreens/intrakey_dark.svg); } html.intrakey .main-pane.is-darkmode .button, html.intrakey .main-pane.is-darkmode .button--full-width, html.intrakey .main-pane.is-darkmode .button--right, html.intrakey .main-pane.is-darkmode .button--middle, html.intrakey .main-pane.is-darkmode .button--float, html.intrakey .main-pane.is-darkmode .button--left, html.intrakey .main-pane.is-darkmode .button--inline, html.intrakey .main-pane.is-darkmode .button--flex-width, html.intrakey .main-pane.is-darkmode .button--square, html.intrakey .main-pane.is-darkmode .button--form, html.intrakey .main-pane.is-darkmode .button--neutral { /* primary corporate */ --button-bg-color: #0077BC; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.intrakey .main-pane.is-darkmode .button--ok { /* primary green */ --button-text-color: #000000; --button-bg-color: #2BC853; --icon-color-button: #000000; } html.intrakey .main-pane.is-darkmode .button--dangerous { /* primary red */ --button-text-color: #ffffff; --button-bg-color: #D10000; --icon-color-button: #ffffff; } html.intrakey .main-pane.is-darkmode .button--warning { /* primary yellow */ --button-text-color: #000000; --button-bg-color: #E27D1E; --icon-color-button: #000000; } html.intrakey .main-pane.is-darkmode .button--action { /* secondary */ --button-text-color: #ECE9E1; --button-bg-color: transparent; --icon-color-button: #ECE9E1; --button-border-color: #ECE9E1; } html.intrakey .main-pane.is-darkmode .button--disabled { opacity: 0.3; } html.intrakey .main-pane.is-darkmode .ik-head { background-color: #35393c; } html.intrakey .main-pane.is-darkmode .ik-frame { background-color: #20526f; } html.intrakey .main-pane.is-darkmode .ik-divide { background-color: #5d6163; } html.intrakey .main-pane.is-darkmode .ik-hover { background-color: #494d4f; } html.intrakey .main-pane.is-darkmode .ik-head-neg { background-color: #cac6c3; } html.intrakey .main-pane.is-darkmode .ik-frame-neg { background-color: #dfad90; } html.intrakey .main-pane.is-darkmode .ik-divide-neg { background-color: #a29e9c; } html.intrakey .main-pane.is-darkmode .ik-hover-neg { background-color: #b6b2b0; } html.intrakey .main-pane.is-darkmode h1, html.intrakey .main-pane.is-darkmode h3 { color: #0077BC !important; } html.intrakey .main-pane.is-darkmode input { color-scheme: dark; background-color: #282828 !important; color: #ECE9E1 !important; border-color: #646464 !important; } html.intrakey .main-pane.is-darkmode input::placeholder { color: #babec3; } html.intrakey .main-pane.is-darkmode input:disabled { opacity: 0.3; } html.intrakey .main-pane.is-darkmode input.input--error { border-color: #D10000 !important; } html.intrakey .main-pane.is-darkmode input:autofill { background: #282828 !important; } html.intrakey .main-pane.is-darkmode .switch { border-color: #646464; background-color: #646464; } html.intrakey .main-pane.is-darkmode .switch.isActive { border-color: #0077BC; background-color: #0077BC; } html.intrakey .main-pane.is-darkmode textarea { background-color: #36393c !important; color: #ECE9E1 !important; border-color: #797d7f !important; } html.intrakey .main-pane.is-darkmode textarea::placeholder { color: #babec3; } html.intrakey .main-pane.is-darkmode textarea:disabled { opacity: 0.3; } html.intrakey .main-pane.is-darkmode select { background-color: #282828 !important; color: #ECE9E1 !important; border-color: #797d7f !important; } html.intrakey .main-pane.is-darkmode select:disabled { opacity: 0.3; } html.intrakey .main-pane.is-darkmode .journal { background-color: #ffffff; color: #333339; } html.intrakey .main-pane.is-darkmode .input--checkbox, html.intrakey .main-pane.is-darkmode .input--radio { border-color: #646464 !important; background-color: #282828 !important; } html.intrakey .main-pane.is-darkmode .input--checkbox::after, html.intrakey .main-pane.is-darkmode .input--radio::after { background-color: #282828; } html.intrakey .main-pane.is-darkmode .input--checkbox:checked, html.intrakey .main-pane.is-darkmode .input--radio:checked { border-color: #0077BC !important; background-color: #0077BC !important; } html.intrakey .main-pane.is-darkmode .input--checkbox:disabled, html.intrakey .main-pane.is-darkmode .input--radio:disabled { opacity: 0.5; } html.intrakey .main-pane.is-darkmode .input--checkbox:checked:disabled, html.intrakey .main-pane.is-darkmode .input--radio:checked:disabled { opacity: 0.5; } html.intrakey .main-pane.is-darkmode .color-themed-text, html.intrakey .main-pane.is-darkmode .day, html.intrakey .main-pane.is-darkmode .timejournal__status { color: #797d7f; } html.intrakey .main-pane.is-darkmode .message-box { color: #babec3; background-color: #20526f; border-bottom-color: transparent; } html.intrakey .main-pane.is-darkmode .message-box .message-box__entry { color: #babec3; } html.intrakey .main-pane.is-darkmode .message-box.message-box--error { background-color: #810000; } html.intrakey .main-pane.is-darkmode .message-box.message-box--error .message-box__entry { color: #ffffff; } html.intrakey .main-pane.is-darkmode .timejournal__item { color: #14a9ff !important; } html.intrakey .main-pane.is-darkmode .day, html.intrakey .main-pane.is-darkmode .timejournal__status { color: #bfbfbf !important; } html.intrakey .main-pane.is-darkmode .entry { color: #797d7f; border-color: #36393c; } html.intrakey .main-pane.is-darkmode .entry.is-selected { color: #ffffff; } html.intrakey .main-pane.is-darkmode .separator { color: #ECE9E1; background-color: #35393c; } html.intrakey .main-pane.is-darkmode .table { background-color: #ffffff; color: #191919; } html.intrakey .main-pane.is-darkmode .table__text--with-icon { color: #3d4043; } html.intrakey .main-pane.is-darkmode .overlay__section { color: #ECE9E1; background-color: #35393C; } html.intrakey .main-pane.is-darkmode .filter { background: #191919; color: #ECE9E1; } html.intrakey .main-pane.is-darkmode .search-controls { color: #ECE9E1; } html.intrakey .main-pane.is-darkmode .color-themed-state-red, html.intrakey .main-pane.is-darkmode .list__text--state.red { color: #FF1A1A; } html.intrakey .main-pane.is-darkmode .color-themed-state-green, html.intrakey .main-pane.is-darkmode .list__text--state.green { color: #2BC853; } html.intrakey .main-pane.is-darkmode .color-themed-state-blue { color: #14a9ff; } html.intrakey .main-pane.is-darkmode .content__fixed.bg-white, html.intrakey .main-pane.is-darkmode .content__fixed.input, html.intrakey .main-pane.is-darkmode .content__fixed.input--search { background-color: #35393C; } html.intrakey .main-pane.is-darkmode .modalcontainer .modal .content { color: #191919; } html.intrakey .main-pane.is-darkmode .modalcontainer .modal .content h1, html.intrakey .main-pane.is-darkmode .modalcontainer .modal .content h3 { color: #0077BC !important; } html.intrakey .main-pane.is-darkmode .signature-modal-title { --color-bg-signature-modal-title: #0077BC; } html.intrakey .main-pane.is-darkmode .signature-modal-button-group { --color-bg-signature-modal-button-group: #191919; } html.intrakey .main-pane.is-darkmode .html--home-2 h1, html.intrakey .main-pane.is-darkmode .html--home-2 a { color: #A7C800 !important; } html.intrakey .main-pane.is-darkmode .html--home-3 h1, html.intrakey .main-pane.is-darkmode .html--home-3 a { color: #FF6900 !important; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Theme: Intercard Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS settings general_styles background color border input images icons --------------------------------------------------- */ /*======================================================== settings ======================================================== */ html.intercard { /*======================================================== general_styles ======================================================== */ color: #333339; /*======================================================== background ======================================================== */ /*======================================================== color ======================================================== */ /*======================================================== button ======================================================== */ /*======================================================== border ======================================================== */ /*======================================================== input ======================================================== */ /*======================================================== images ======================================================== */ /*======================================================== icons ======================================================== */ } html.intercard .bg-white, html.intercard .input, html.intercard .input--search { background-color: #ffffff; } html.intercard .bg-themed, html.intercard .entry.is-selected, html.intercard html.constructor .products__emblem--home-3, html.constructor html.intercard .products__emblem--home-3, html.intercard html.constructor .products__emblem--home-2, html.constructor html.intercard .products__emblem--home-2, html.intercard html.constructor .products__emblem--home-1, html.constructor html.intercard .products__emblem--home-1, html.intercard html.secanda .products__emblem--home-3, html.secanda html.intercard .products__emblem--home-3, html.intercard html.secanda .products__emblem--home-2, html.secanda html.intercard .products__emblem--home-2, html.intercard html.secanda .products__emblem--home-1, html.secanda html.intercard .products__emblem--home-1, html.intercard html.bikeparkbox .products__emblem--home-3, html.bikeparkbox html.intercard .products__emblem--home-3, html.intercard html.bikeparkbox .products__emblem--home-2, html.bikeparkbox html.intercard .products__emblem--home-2, html.intercard html.bikeparkbox .products__emblem--home-1, html.bikeparkbox html.intercard .products__emblem--home-1, html.intercard html.intrakey .products__emblem--home-1, html.intrakey html.intercard .products__emblem--home-1 { background-color: #971101; } html.intercard .bg-themed-nav, html.intercard .nav { background-color: #36393c; } html.intercard .bg-themed-toolbar, html.intercard .toolbar, html.intercard .toolbar--filter { background-color: #971101; } html.intercard .bg-themed-overlay, html.intercard .entry, html.intercard .overlay__section { background-color: #D9EBF5; } html.intercard .bg-themed-separator, html.intercard .separator { background-color: #D9EBF5; } html.intercard .splash-html { background-image: url(images/18_splash_pale.png); background-size: 100% auto; } html.intercard .bg-themed-message-box, html.intercard .message-box { background-color: #D9EBF5; } html.intercard .bg-themed-message-box-error, html.intercard .message-box--error { background-color: #971101; } html.intercard .bg-themed-home, html.intercard .products { background-color: #D9EBF5; } html.intercard .bg-themed-list-green { background-color: #bbffbb; } html.intercard .bg-themed-list-yellow { background-color: #ffff90; } html.intercard .bg-themed-list-red { background-color: #ffbbbb; } html.intercard .color-themed, html.intercard .timejournal__item, html.intercard .header1, html.intercard .html a, .html html.intercard a, html.intercard .separator a, .separator html.intercard a, html.intercard .html h3, .html html.intercard h3, html.intercard .separator h3, .separator html.intercard h3, html.intercard .html h1, .html html.intercard h1, html.intercard .separator h1, .separator html.intercard h1, html.intercard .input, html.intercard .input--search, html.intercard html.constructor .main-pane.is-darkmode .html--home-3 h1, html.constructor .main-pane.is-darkmode .html--home-3 html.intercard h1, html.intercard html.constructor .main-pane.is-darkmode .html--home-3 a, html.constructor .main-pane.is-darkmode .html--home-3 html.intercard a, html.intercard html.constructor .main-pane.is-darkmode .html--home-2 h1, html.constructor .main-pane.is-darkmode .html--home-2 html.intercard h1, html.intercard html.constructor .main-pane.is-darkmode .html--home-2 a, html.constructor .main-pane.is-darkmode .html--home-2 html.intercard a, html.intercard html.constructor .main-pane.is-darkmode .html--home-1 h1, html.constructor .main-pane.is-darkmode .html--home-1 html.intercard h1, html.intercard html.constructor .main-pane.is-darkmode .html--home-1 a, html.constructor .main-pane.is-darkmode .html--home-1 html.intercard a, html.intercard html.constructor .html--home-3 h1, html.constructor .html--home-3 html.intercard h1, html.intercard html.constructor .html--home-3 a, html.constructor .html--home-3 html.intercard a, html.intercard html.constructor .html--home-2 h1, html.constructor .html--home-2 html.intercard h1, html.intercard html.constructor .html--home-2 a, html.constructor .html--home-2 html.intercard a, html.intercard html.constructor .html--home-1 h1, html.constructor .html--home-1 html.intercard h1, html.intercard html.constructor .html--home-1 a, html.constructor .html--home-1 html.intercard a, html.intercard html.secanda .main-pane.is-darkmode .html--home-3 h1, html.secanda .main-pane.is-darkmode .html--home-3 html.intercard h1, html.intercard html.secanda .main-pane.is-darkmode .html--home-3 a, html.secanda .main-pane.is-darkmode .html--home-3 html.intercard a, html.intercard html.secanda .main-pane.is-darkmode .html--home-2 h1, html.secanda .main-pane.is-darkmode .html--home-2 html.intercard h1, html.intercard html.secanda .main-pane.is-darkmode .html--home-2 a, html.secanda .main-pane.is-darkmode .html--home-2 html.intercard a, html.intercard html.secanda .main-pane.is-darkmode .html--home-1 h1, html.secanda .main-pane.is-darkmode .html--home-1 html.intercard h1, html.intercard html.secanda .main-pane.is-darkmode .html--home-1 a, html.secanda .main-pane.is-darkmode .html--home-1 html.intercard a, html.intercard html.secanda .html--home-3 h1, html.secanda .html--home-3 html.intercard h1, html.intercard html.secanda .html--home-3 a, html.secanda .html--home-3 html.intercard a, html.intercard html.secanda .html--home-2 h1, html.secanda .html--home-2 html.intercard h1, html.intercard html.secanda .html--home-2 a, html.secanda .html--home-2 html.intercard a, html.intercard html.secanda .html--home-1 h1, html.secanda .html--home-1 html.intercard h1, html.intercard html.secanda .html--home-1 a, html.secanda .html--home-1 html.intercard a, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-3 h1, html.bikeparkbox .main-pane.is-darkmode .html--home-3 html.intercard h1, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-3 a, html.bikeparkbox .main-pane.is-darkmode .html--home-3 html.intercard a, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-2 h1, html.bikeparkbox .main-pane.is-darkmode .html--home-2 html.intercard h1, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-2 a, html.bikeparkbox .main-pane.is-darkmode .html--home-2 html.intercard a, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-1 h1, html.bikeparkbox .main-pane.is-darkmode .html--home-1 html.intercard h1, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-1 a, html.bikeparkbox .main-pane.is-darkmode .html--home-1 html.intercard a, html.intercard html.bikeparkbox .html--home-3 h1, html.bikeparkbox .html--home-3 html.intercard h1, html.intercard html.bikeparkbox .html--home-3 a, html.bikeparkbox .html--home-3 html.intercard a, html.intercard html.bikeparkbox .html--home-2 h1, html.bikeparkbox .html--home-2 html.intercard h1, html.intercard html.bikeparkbox .html--home-2 a, html.bikeparkbox .html--home-2 html.intercard a, html.intercard html.bikeparkbox .html--home-1 h1, html.bikeparkbox .html--home-1 html.intercard h1, html.intercard html.bikeparkbox .html--home-1 a, html.bikeparkbox .html--home-1 html.intercard a, html.intercard html.intrakey .html--home-1 h1, html.intrakey .html--home-1 html.intercard h1, html.intercard html.intrakey .html--home-1 a, html.intrakey .html--home-1 html.intercard a, html.intercard html.intrakey .main-pane.is-darkmode .html--home-1 h1, html.intrakey .main-pane.is-darkmode .html--home-1 html.intercard h1, html.intercard html.intrakey .main-pane.is-darkmode .html--home-1 a, html.intrakey .main-pane.is-darkmode .html--home-1 html.intercard a { color: #971101; } html.intercard .color-themed-text, html.intercard .day, html.intercard .timejournal__status { color: #333339; } html.intercard .color-themed-nav, html.intercard .nav__button { color: #BABEC3; } html.intercard .color-themed-label, html.intercard .label--overlay { color: #797D7F; } html.intercard .color-themed-html, html.intercard .input--maintenance, html.intercard html.constructor .main-pane.is-darkmode .html--home-1, html.constructor .main-pane.is-darkmode html.intercard .html--home-1, html.intercard html.constructor .main-pane.is-darkmode .html--home-2, html.constructor .main-pane.is-darkmode html.intercard .html--home-2, html.intercard html.constructor .main-pane.is-darkmode .html--home-3, html.constructor .main-pane.is-darkmode html.intercard .html--home-3, html.intercard html.constructor .html--home-1, html.constructor html.intercard .html--home-1, html.intercard html.constructor .html--home-2, html.constructor html.intercard .html--home-2, html.intercard html.constructor .html--home-3, html.constructor html.intercard .html--home-3, html.intercard html.secanda .main-pane.is-darkmode .html--home-1, html.secanda .main-pane.is-darkmode html.intercard .html--home-1, html.intercard html.secanda .main-pane.is-darkmode .html--home-2, html.secanda .main-pane.is-darkmode html.intercard .html--home-2, html.intercard html.secanda .main-pane.is-darkmode .html--home-3, html.secanda .main-pane.is-darkmode html.intercard .html--home-3, html.intercard html.secanda .html--home-1, html.secanda html.intercard .html--home-1, html.intercard html.secanda .html--home-2, html.secanda html.intercard .html--home-2, html.intercard html.secanda .html--home-3, html.secanda html.intercard .html--home-3, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-1, html.bikeparkbox .main-pane.is-darkmode html.intercard .html--home-1, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-2, html.bikeparkbox .main-pane.is-darkmode html.intercard .html--home-2, html.intercard html.bikeparkbox .main-pane.is-darkmode .html--home-3, html.bikeparkbox .main-pane.is-darkmode html.intercard .html--home-3, html.intercard html.bikeparkbox .html--home-1, html.bikeparkbox html.intercard .html--home-1, html.intercard html.bikeparkbox .html--home-2, html.bikeparkbox html.intercard .html--home-2, html.intercard html.bikeparkbox .html--home-3, html.bikeparkbox html.intercard .html--home-3, html.intercard html.intrakey .html--home-1, html.intrakey html.intercard .html--home-1, html.intercard html.intrakey .html--home-2, html.intrakey html.intercard .html--home-2, html.intercard html.intrakey .html--home-3, html.intrakey html.intercard .html--home-3, html.intercard html.intrakey .main-pane.is-darkmode .html--home-1, html.intrakey .main-pane.is-darkmode html.intercard .html--home-1, html.intercard html.intrakey .main-pane.is-darkmode .html--home-2, html.intrakey .main-pane.is-darkmode html.intercard .html--home-2, html.intercard html.intrakey .main-pane.is-darkmode .html--home-3, html.intrakey .main-pane.is-darkmode html.intercard .html--home-3 { color: #797D7F; } html.intercard .color-themed-header2, html.intercard .header2, html.intercard .html h2, .html html.intercard h2, html.intercard .separator h2, .separator html.intercard h2 { color: #3D4043; } html.intercard .color-themed-message-box-error, html.intercard .message-box--error { color: #F9FAFB; } html.intercard .color-themed-disabled { color: #BFBFBF; } html.intercard .color-themed-state-blue { color: #487FFA; } html.intercard .color-themed-state-red, html.intercard .list__text--state.red { color: #C80000; } html.intercard .color-themed-state-green, html.intercard .list__text--state.green { color: #3CA03C; } html.intercard .button-themed { background-color: #F9FAFB; color: #971101; } html.intercard .button-themed-dangerous, html.intercard .button--dangerous { background-color: #971101; color: #F9FAFB; } html.intercard .button-themed-warning, html.intercard .button--warning { background-color: #E27D1E; color: #F9FAFB; } html.intercard .button-themed-disabled { background-color: #BFBFBF; color: #F9FAFB; } html.intercard .button-themed-negative-green, html.intercard .button--action { background: none; border: 1px solid #00CE48; color: #00CE48; } html.intercard .button-themed-neutral, html.intercard .button--neutral { background-color: #971101; color: #F9FAFB; } html.intercard .button-themed-ok, html.intercard .button--ok { background-color: #00CE48; color: #F9FAFB; } html.intercard .border-themed-nav, html.intercard .nav__item { border-color: #222629; } html.intercard .border-themed-list, html.intercard .html hr, .html html.intercard hr, html.intercard .separator hr, .separator html.intercard hr, html.intercard .list__item { border-color: #D9EBF5; } html.intercard .border-themed-table, html.intercard .table__column, html.intercard .table { border-color: #D9EBF5; } html.intercard .input-themed, html.intercard .switch, html.intercard .input, html.intercard .input--search { border-color: #BFBFBF; } html.intercard .input-themed-error, html.intercard .input--error { border-color: #971101; } html.intercard .input-themed-inner, html.intercard .switch .switch__inner, .switch html.intercard .switch__inner, html.intercard .input--radio::after { background-color: #D9EBF5; } html.intercard .input-themed-disabled { color: #BFBFBF; border-color: #E6E6E6; } html.intercard .input-themed-disabled-inner, html.intercard .input--radio:disabled::after { background-color: #E6E6E6; } html.intercard .input-themed-checked, html.intercard .switch .switch__inner.is-switched-on, .switch html.intercard .switch__inner.is-switched-on, html.intercard .input--radio:checked, html.intercard .input--checkbox:checked { border-color: #00CE48; background-color: #00CE48; } html.intercard .input-themed-checked-disabled { background-color: #B7E2C8; border-color: #B7E2C8; } html.intercard .loader__image--positive { background-image: url(images/ladeanimation_positiv_70x12.gif); } html.intercard .loader__image--negative { background-image: url(images/ladeanimation_negativ_70x12.gif); } html.intercard .loader__image--lightblue { background-image: url(images/ladeanimation_positiv_hellblau_70x12.gif); } html.intercard .navi_idcard { background-image: url("images/navi_intercard/navi_idcard.png"); } html.intercard .navi_clock2 { background-image: url("images/navi_intercard/navi_clock2.png"); } html.intercard .navi_schedule1 { background-image: url("images/navi_intercard/navi_schedule1.png"); } html.intercard .navi_pump { background-image: url("images/navi_intercard/navi_pump.png"); } html.intercard .navi_note3 { background-image: url("images/navi_intercard/navi_note3.png"); } html.intercard .navi_time_tracking { background-image: url("images/navi_intercard/navi_time_tracking.png"); } html.intercard .navi_reader { background-image: url("images/navi_intercard/navi_reader.png"); } html.intercard .navi_print { background-image: url("images/navi_intercard/navi_print.png"); } html.intercard .navi_home { background-image: url("images/navi_intercard/navi_home.png"); } html.intercard .navi_note2 { background-image: url("images/navi_intercard/navi_note2.png"); } html.intercard .navi_settings { background-image: url("images/navi_intercard/navi_settings.png"); } html.intercard .navi_card { background-image: url("images/navi_intercard/navi_card.png"); } html.intercard .navi_grid { background-image: url("images/navi_intercard/navi_grid.png"); } html.intercard .navi_tank { background-image: url("images/navi_intercard/navi_tank.png"); } html.intercard .navi_access_control { background-image: url("images/navi_intercard/navi_access_control.png"); } html.intercard .navi_book { background-image: url("images/navi_intercard/navi_book.png"); } html.intercard .navi_hint3 { background-image: url("images/navi_intercard/navi_hint3.png"); } html.intercard .navi_schedule3 { background-image: url("images/navi_intercard/navi_schedule3.png"); } html.intercard .navi_transactions { background-image: url("images/navi_intercard/navi_transactions.png"); } html.intercard .navi_charge { background-image: url("images/navi_intercard/navi_charge.png"); } html.intercard .navi_note4 { background-image: url("images/navi_intercard/navi_note4.png"); } html.intercard .navi_train { background-image: url("images/navi_intercard/navi_train.png"); } html.intercard .navi_door1 { background-image: url("images/navi_intercard/navi_door1.png"); } html.intercard .navi_payment { background-image: url("images/navi_intercard/navi_payment.png"); } html.intercard .navi_lockers { background-image: url("images/navi_intercard/navi_lockers.png"); } html.intercard .navi_lamp { background-image: url("images/navi_intercard/navi_lamp.png"); } html.intercard .navi_note1 { background-image: url("images/navi_intercard/navi_note1.png"); } html.intercard .navi_euro1 { background-image: url("images/navi_intercard/navi_euro1.png"); } html.intercard .navi_hidden { background-image: url("images/navi_intercard/navi_hidden.png"); } html.intercard .navi_language { background-image: url("images/navi_intercard/navi_language.png"); } html.intercard .navi_info { background-image: url("images/navi_intercard/navi_info.png"); } html.intercard .navi_recruitment { background-image: url("images/navi_intercard/navi_recruitment.png"); } html.intercard .navi_event { background-image: url("images/navi_intercard/navi_event.png"); } html.intercard .navi_licence { background-image: url("images/navi_intercard/navi_licence.png"); } html.intercard .navi_euro2 { background-image: url("images/navi_intercard/navi_euro2.png"); } html.intercard .navi_alarm { background-image: url("images/navi_intercard/navi_alarm.png"); } html.intercard .navi_door2 { background-image: url("images/navi_intercard/navi_door2.png"); } html.intercard .navi_hint2 { background-image: url("images/navi_intercard/navi_hint2.png"); } html.intercard .navi_map { background-image: url("images/navi_intercard/navi_map.png"); } html.intercard .navi_purse { background-image: url("images/navi_intercard/navi_purse.png"); } html.intercard .navi_fleet_management { background-image: url("images/navi_intercard/navi_fleet_management.png"); } html.intercard .navi_parking { background-image: url("images/navi_intercard/navi_parking.png"); } html.intercard .navi_idcard2 { background-image: url("images/navi_intercard/navi_idcard2.png"); } html.intercard .navi_sound { background-image: url("images/navi_intercard/navi_sound.png"); } html.intercard .navi_keylock_open { background-image: url("images/navi_intercard/navi_keylock_open.png"); } html.intercard .navi_imprint { background-image: url("images/navi_intercard/navi_imprint.png"); } html.intercard .navi_schedule2 { background-image: url("images/navi_intercard/navi_schedule2.png"); } html.intercard .navi_person1 { background-image: url("images/navi_intercard/navi_person1.png"); } html.intercard .navi_person2 { background-image: url("images/navi_intercard/navi_person2.png"); } html.intercard .navi_monitoring { background-image: url("images/navi_intercard/navi_monitoring.png"); } html.intercard .navi_keylock_closed { background-image: url("images/navi_intercard/navi_keylock_closed.png"); } html.intercard .navi_canteen { background-image: url("images/navi_intercard/navi_canteen.png"); } html.intercard .navi_hint1 { background-image: url("images/navi_intercard/navi_hint1.png"); } html.intercard .navi_auditorium { background-image: url("images/navi_intercard/navi_auditorium.png"); } html.intercard .navi_applications { background-image: url("images/navi_intercard/navi_applications.png"); } html.intercard .navi_carwash { background-image: url("images/navi_intercard/navi_carwash.png"); } html.intercard .navi_wifi { background-image: url("images/navi_intercard/navi_wifi.png"); } html.intercard .navi_lunch { background-image: url("images/navi_intercard/navi_lunch.png"); } html.intercard .navi_bluetooth { background-image: url("images/navi_intercard/navi_bluetooth.png"); } html.intercard .navi_ebike { background-image: url("images/navi_intercard/navi_ebike.png"); } html.intercard .navi_battery { background-image: url("images/navi_intercard/navi_battery.png"); } html.intercard .navi_usb { background-image: url("images/navi_intercard/navi_usb.png"); } html.intercard .navi_controller { background-image: url("images/navi_intercard/navi_controller.png"); } html.intercard .navi_calendar { background-image: url("images/navi_intercard/navi_calendar.png"); } html.intercard .navi_wash { background-image: url("images/navi_intercard/navi_wash.png"); } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: BikeParkBox App File: Theme: BikeParkBox Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS settings general_styles background color button_modifiers border input images icons --------------------------------------------------- */ /*======================================================== fonts ======================================================== */ /*======================================================== color system ======================================================== */ :root.bikeparkbox { --color-accent: #0077BC; --color-accent-dark: #20526F; --color-background: #ffffff; --color-background-widget: #F2F2F7; --color-text: #191919; --color-text-muted: #282828; --color-link: #0077bc; --color-danger: #D10000; --color-warning: #C88F2D; --color-success: #197630; --color-background-danger: #D10000; --color-background-warning: #E27D1E; --color-background-success: #2BC853; --color-background-neutral: #14A9FF; --icon-color-button: #0077BC; --icon-color-toolbar: #ffffff; --icon-color-toolbar-active: #0077BC; --color-box-shadow: #5d6163; --icon-color-accent-navi: #0077BC; --icon-color-navi: #797D7F; --icon-color-navi-light: #bfbfbf; --icon-control-color: #0077BC; --control-border-color: #0077BC; --color-devicestate-water: #14A9FF; --color-search-results: #e6e6ef; --icon-color-dark: #494d4f; } :root.bikeparkbox .toolbar, :root.bikeparkbox .toolbar--filter { --icon-color-button: #ffffff; } :root.bikeparkbox .dark { --icon-color-accent-navi: #0077BC; --icon-color-navi: #bfbfbf; --icon-color-navi-light: #797D7F; --color-accent: #0077BC; --color-success: #2BC853; --color-warning: #C88F2D; --color-background-danger: #D10000; } :root.bikeparkbox .is-darkmode { --color-accent: #0077BC; --color-accent-dark: #20526F; --color-background: #191919; --color-background-widget: #35393C; --color-text: #ECE9E1; --color-text-muted: #ECE9E1; --color-link: #0a84ff; --color-danger: #FF1A1A; --color-warning: #C88F2D; --color-success: #2BC853; --color-background-danger: #D10000; --color-background-warning: #E27D1E; --color-background-success: #2BC853; --color-background-neutral: #14A9FF; --icon-color-button: #ECE9E1; --icon-color-toolbar: #ffffff; --icon-color-toolbar-active: #0077BC; --color-box-shadow: #d7d7d8; --icon-color-accent-navi: #0077BC; --icon-color-navi: #bfbfbf; --icon-color-navi-light: #797D7F; --icon-control-color: #ECE9E1; --control-border-color: #ECE9E1; --color-search-results: #494d4f; } :root.bikeparkbox .nav { --icon-color-accent-navi: #0077BC; --icon-color-navi: #bfbfbf; } :root.bikeparkbox .toolbar, :root.bikeparkbox .toolbar--filter { --icon-color-button: #ffffff; } :root.bikeparkbox .light { --icon-color-accent-navi: #0077BC; --icon-color-navi: #797D7F; --icon-color-navi-light: #bfbfbf; --color-accent: #0077BC; --color-success: #197630; --color-warning: #C88F2D; --color-background-danger: #D10000; } .color-accent { color: var(--color-accent); } .color-accent-dark { color: var(--color-accent-dark); } .color-accent-inactive { color: var(--color-accent-inactive); } .color-link, .color-blue { color: var(--color-link); } .color-danger, .color-red { color: var(--color-danger); } .color-warning, .color-yellow { color: var(--color-warning); } .color-success, .color-green { color: var(--color-success); } .bg-accent { background-color: var(--color-accent); } .bg-accent-dark { background-color: var(--color-accent-dark); } .bg-accent-inactive { background-color: var(--color-accent-inactive); } .bg-danger, .bg-red { background-color: var(--color-background-danger); } .bg-warning, .bg-yellow { background-color: var(--color-background-warning); } .bg-success, .bg-green { background-color: var(--color-background-success); } .bg-blue { background-color: var(--color-link); } .bg-neutral { background-color: var(--color-background-neutral); } /*======================================================== settings ======================================================== */ html.bikeparkbox { /*======================================================== general_styles ======================================================== */ --input-border-radius: 6px; color: #191919; /*======================================================== background ======================================================== */ /*======================================================== color ======================================================== */ --color-blue: #0077bc; --color-red: #D10000; --color-green: #197630; --color-yellow: #C88F2D; --color-orange: #e27d1e; --color-purple: #db00ff; --color-pink: #ff0089; --color-grey: #a0a2a5; /*======================================================== button_modifiers ======================================================== */ --button-border-radius: 500px; /*======================================================== control_modifiers ======================================================== */ --icon-control-color: #0077BC; --control-border-color: #0077BC; --control-bg-color: transparent; --control-border-radius: 500px; /*======================================================== border ======================================================== */ /*======================================================== input ======================================================== */ /*======================================================== loading animation ======================================================== */ /*======================================================== icons ======================================================== */ /*======================================================== home ======================================================== */ /*======================================================== darkmode ======================================================== */ } html.bikeparkbox .bg-white, html.bikeparkbox .input, html.bikeparkbox .input--search { background-color: #ffffff; } html.bikeparkbox .bg-themed, html.bikeparkbox .entry.is-selected, html.bikeparkbox .products__emblem--home-3, html.bikeparkbox .products__emblem--home-2, html.bikeparkbox .products__emblem--home-1 { background-color: #0077BC; } html.bikeparkbox .bg-themed a, html.bikeparkbox .entry.is-selected a, html.bikeparkbox .products__emblem--home-3 a, html.bikeparkbox .products__emblem--home-2 a, html.bikeparkbox .products__emblem--home-1 a { color: var(--color-link) !important; } html.bikeparkbox .bg-themed-nav, html.bikeparkbox .nav { background-color: #36393c; } html.bikeparkbox .bg-themed-toolbar, html.bikeparkbox .toolbar, html.bikeparkbox .toolbar--filter { background-color: #0077BC; } html.bikeparkbox .bg-themed-overlay, html.bikeparkbox .entry, html.bikeparkbox .overlay__section { background-color: #F2F2F7; } html.bikeparkbox .bg-themed-separator, html.bikeparkbox .separator { background-color: #F2F2F7; } html.bikeparkbox .splash-html__logo { background-image: url(images/splashscreens/bikeparkbox_light.svg); } html.bikeparkbox .splash-html__logo.inactive { background-image: url(images/splashscreens/bikeparkbox_dark.svg) !important; } html.bikeparkbox .bg-themed-message-box, html.bikeparkbox .message-box { background-color: #D9EBF5; } html.bikeparkbox .bg-themed-message-box-error, html.bikeparkbox .message-box--error { background-color: #810000; } html.bikeparkbox .bg-themed-home, html.bikeparkbox .products { background-color: #D9EBF5; } html.bikeparkbox .bg-themed-list-green { background-color: #bbffbb; } html.bikeparkbox .bg-themed-list-yellow { background-color: #ffff90; } html.bikeparkbox .bg-themed-list-red { background-color: #ffbbbb; } html.bikeparkbox .color-themed, html.bikeparkbox .timejournal__item, html.bikeparkbox .header1, html.bikeparkbox .html a, .html html.bikeparkbox a, html.bikeparkbox .separator a, .separator html.bikeparkbox a, html.bikeparkbox .html h3, .html html.bikeparkbox h3, html.bikeparkbox .separator h3, .separator html.bikeparkbox h3, html.bikeparkbox .html h1, .html html.bikeparkbox h1, html.bikeparkbox .separator h1, .separator html.bikeparkbox h1, html.bikeparkbox .input, html.bikeparkbox .input--search, html.constructor .main-pane.is-darkmode .html--home-3 html.bikeparkbox h1, html.constructor .main-pane.is-darkmode .html--home-3 html.bikeparkbox a, html.constructor .main-pane.is-darkmode .html--home-2 html.bikeparkbox h1, html.constructor .main-pane.is-darkmode .html--home-2 html.bikeparkbox a, html.constructor .main-pane.is-darkmode .html--home-1 html.bikeparkbox h1, html.constructor .main-pane.is-darkmode .html--home-1 html.bikeparkbox a, html.constructor .html--home-3 html.bikeparkbox h1, html.constructor .html--home-3 html.bikeparkbox a, html.constructor .html--home-2 html.bikeparkbox h1, html.constructor .html--home-2 html.bikeparkbox a, html.constructor .html--home-1 html.bikeparkbox h1, html.constructor .html--home-1 html.bikeparkbox a, html.secanda .main-pane.is-darkmode .html--home-3 html.bikeparkbox h1, html.secanda .main-pane.is-darkmode .html--home-3 html.bikeparkbox a, html.secanda .main-pane.is-darkmode .html--home-2 html.bikeparkbox h1, html.secanda .main-pane.is-darkmode .html--home-2 html.bikeparkbox a, html.secanda .main-pane.is-darkmode .html--home-1 html.bikeparkbox h1, html.secanda .main-pane.is-darkmode .html--home-1 html.bikeparkbox a, html.secanda .html--home-3 html.bikeparkbox h1, html.secanda .html--home-3 html.bikeparkbox a, html.secanda .html--home-2 html.bikeparkbox h1, html.secanda .html--home-2 html.bikeparkbox a, html.secanda .html--home-1 html.bikeparkbox h1, html.secanda .html--home-1 html.bikeparkbox a, html.bikeparkbox .main-pane.is-darkmode .html--home-3 h1, html.bikeparkbox .main-pane.is-darkmode .html--home-3 a, html.bikeparkbox .main-pane.is-darkmode .html--home-2 h1, html.bikeparkbox .main-pane.is-darkmode .html--home-2 a, html.bikeparkbox .main-pane.is-darkmode .html--home-1 h1, html.bikeparkbox .main-pane.is-darkmode .html--home-1 a, html.bikeparkbox .html--home-3 h1, html.bikeparkbox .html--home-3 a, html.bikeparkbox .html--home-2 h1, html.bikeparkbox .html--home-2 a, html.bikeparkbox .html--home-1 h1, html.bikeparkbox .html--home-1 a, html.intrakey .html--home-1 html.bikeparkbox h1, html.intrakey .html--home-1 html.bikeparkbox a, html.intrakey .main-pane.is-darkmode .html--home-1 html.bikeparkbox h1, html.intrakey .main-pane.is-darkmode .html--home-1 html.bikeparkbox a { color: #0077BC; } html.bikeparkbox .color-themed-text, html.bikeparkbox .day, html.bikeparkbox .timejournal__status { color: #333339; } html.bikeparkbox .color-themed-nav, html.bikeparkbox .nav__button { color: #BABEC3; } html.bikeparkbox .color-themed-label, html.bikeparkbox .label--overlay { color: var(--color-text); } html.bikeparkbox .color-themed-html, html.bikeparkbox .input--maintenance, html.constructor .main-pane.is-darkmode html.bikeparkbox .html--home-1, html.constructor .main-pane.is-darkmode html.bikeparkbox .html--home-2, html.constructor .main-pane.is-darkmode html.bikeparkbox .html--home-3, html.secanda .main-pane.is-darkmode html.bikeparkbox .html--home-1, html.secanda .main-pane.is-darkmode html.bikeparkbox .html--home-2, html.secanda .main-pane.is-darkmode html.bikeparkbox .html--home-3, html.bikeparkbox .main-pane.is-darkmode .html--home-1, html.bikeparkbox .main-pane.is-darkmode .html--home-2, html.bikeparkbox .main-pane.is-darkmode .html--home-3, html.bikeparkbox .html--home-1, html.bikeparkbox .html--home-2, html.bikeparkbox .html--home-3, html.intrakey .main-pane.is-darkmode html.bikeparkbox .html--home-1, html.intrakey .main-pane.is-darkmode html.bikeparkbox .html--home-2, html.intrakey .main-pane.is-darkmode html.bikeparkbox .html--home-3 { color: var(--color-text); } html.bikeparkbox .color-themed-message-box-error, html.bikeparkbox .message-box--error { color: #F9FAFB; } html.bikeparkbox .color-themed-disabled { color: #BFBFBF; } html.bikeparkbox .color-themed-state-blue { color: #0077bc; } html.bikeparkbox .color-themed-state-red, html.bikeparkbox .list__text--state.red { color: #D10000; } html.bikeparkbox .color-themed-state-green, html.bikeparkbox .list__text--state.green { color: #197630; } html.bikeparkbox .content__fixed.bg-white, html.bikeparkbox .content__fixed.input, html.bikeparkbox .content__fixed.input--search { background-color: #F2F2F7; } html.bikeparkbox .button, html.bikeparkbox .button--full-width, html.bikeparkbox .button--right, html.bikeparkbox .button--middle, html.bikeparkbox .button--float, html.bikeparkbox .button--left, html.bikeparkbox .button--inline, html.bikeparkbox .button--flex-width, html.bikeparkbox .button--square, html.bikeparkbox .button--form, html.bikeparkbox .button--neutral { /* primary corporate */ --button-bg-color: #0077BC; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.bikeparkbox .button--ok { /* primary green */ --button-text-color: #000000; --button-bg-color: #2BC853; --icon-color-button: #000000; } html.bikeparkbox .button--dangerous { /* primary red */ --button-text-color: #ffffff; --button-bg-color: #D10000; --icon-color-button: #ffffff; } html.bikeparkbox .button--warning { /* primary yellow */ --button-text-color: #000000; --button-bg-color: #E27D1E; --icon-color-button: #000000; } html.bikeparkbox .button--action { /* secondary */ --button-text-color: #0077BC; --button-bg-color: transparent; --icon-color-button: #0077BC; --button-border-color: #0077BC; } html.bikeparkbox .button--disabled { opacity: 0.3; } html.bikeparkbox .border-themed-nav, html.bikeparkbox .nav__item { border-color: #222629; } html.bikeparkbox .border-themed-list, html.bikeparkbox .html hr, .html html.bikeparkbox hr, html.bikeparkbox .separator hr, .separator html.bikeparkbox hr, html.bikeparkbox .list__item { border-color: var(--color-background-widget); } html.bikeparkbox .border-themed-table, html.bikeparkbox .table__column, html.bikeparkbox .table { border-color: var(--color-background-widget); } html.bikeparkbox .input-themed, html.bikeparkbox .switch, html.bikeparkbox .input, html.bikeparkbox .input--search { border-color: #BFBFBF; } html.bikeparkbox .input-themed-error, html.bikeparkbox .input--error { border-color: #D10000; } html.bikeparkbox .input-themed-inner, html.bikeparkbox .switch .switch__inner, .switch html.bikeparkbox .switch__inner, html.bikeparkbox .input--radio::after { background-color: var(--color-accent); color: #ECE9E1; } html.bikeparkbox .input-themed-inner.input--radio, html.bikeparkbox .switch .input--radio.switch__inner, .switch html.bikeparkbox .input--radio.switch__inner, html.bikeparkbox .input--radio::after { background-color: transparent; } html.bikeparkbox .input-themed-disabled { color: #BFBFBF; border-color: #E6E6E6; } html.bikeparkbox .input-themed-disabled-inner, html.bikeparkbox .input--radio:disabled::after { background-color: #E6E6E6; } html.bikeparkbox .input-themed-checked, html.bikeparkbox .switch .switch__inner.is-switched-on, .switch html.bikeparkbox .switch__inner.is-switched-on, html.bikeparkbox .input--radio:checked, html.bikeparkbox .input--checkbox:checked { border-color: #0077BC; background-color: #0077BC; } html.bikeparkbox .input-themed-checked-disabled { background-color: #B7E2C8; border-color: #B7E2C8; } html.bikeparkbox .switch { border-color: #BFBFBF; background-color: #BFBFBF; } html.bikeparkbox .switch.isActive { border-color: #0077BC; background-color: #0077BC; } html.bikeparkbox .switch__inner { border-color: #FFFFFF; background-color: #FFFFFF; } html.bikeparkbox .switch .switch__inner { border-color: #FFFFFF; background-color: #FFFFFF; } html.bikeparkbox .switch .switch__inner.is-switched-on { border-color: #FFFFFF; background-color: #FFFFFF; } html.bikeparkbox .signature-modal-title { --color-bg-signature-modal-title: #0077BC; } html.bikeparkbox .signature-modal-button-group { --color-bg-signature-modal-button-group: #ffffff; } html.bikeparkbox .loader__image { width: 45px; aspect-ratio: 1; height: 45px; border-radius: 50%; border: 4px solid #0077BC; border-right-color: transparent; animation: l2 1s infinite linear; } @keyframes l2 { to { transform: rotate(1turn); } } html.bikeparkbox .products__item--logo { background-image: url(images/splashscreens/bikeparkbox_light.svg); background-size: 74%; background-position-x: -65%; width: auto; } html.bikeparkbox .products__item--home-1 { background-image: url(images/home_bikeparkbox/App_2.jpg); } html.bikeparkbox .products__item--home-2 { background-image: url(images/home_bikeparkbox/App_3.jpg); } html.bikeparkbox .products__item--home-3 { background-image: url(images/home_bikeparkbox/App_1.jpg); } html.bikeparkbox .home--detail__logo { background-image: url(images/splashscreens/bikeparkbox_light.svg); width: 100%; height: 6vh; background-size: 55%; } html.bikeparkbox .main-pane.is-darkmode { background: #191919; color: #babec3; --hov-bg-color: #494d4f; --ik-head: #35393c; --ik-divide: #5d6163; --ik-frame: #20526f; --ik-hover: #494d4f; --ik-head-neg: #ffffff; --ik-divide-neg: #d7d7d8; --ik-frame-neg: #bfddee; --ik-hover-neg: #ececec; --color-blue: #14a9ff; --color-red: #FF1A1A; --color-green: #2BC853; --color-yellow: #C88F2D; --icon-control-color: #ECE9E1; --control-border-color: #ECE9E1; } html.bikeparkbox .main-pane.is-darkmode .bg-themed, html.bikeparkbox .main-pane.is-darkmode .entry.is-selected, html.bikeparkbox .main-pane.is-darkmode .products__emblem--home-1, html.bikeparkbox .main-pane.is-darkmode .products__emblem--home-2, html.bikeparkbox .main-pane.is-darkmode .products__emblem--home-3 { background-color: #0077BC; } html.bikeparkbox .main-pane.is-darkmode .bg-themed-toolbar, html.bikeparkbox .main-pane.is-darkmode .toolbar, html.bikeparkbox .main-pane.is-darkmode .toolbar--filter { background-color: #0077BC; } html.bikeparkbox .main-pane.is-darkmode .splash-html__logo { background-image: url(images/splashscreens/bikeparkbox_dark.svg); } html.bikeparkbox .main-pane.is-darkmode .button, html.bikeparkbox .main-pane.is-darkmode .button--full-width, html.bikeparkbox .main-pane.is-darkmode .button--right, html.bikeparkbox .main-pane.is-darkmode .button--middle, html.bikeparkbox .main-pane.is-darkmode .button--float, html.bikeparkbox .main-pane.is-darkmode .button--left, html.bikeparkbox .main-pane.is-darkmode .button--inline, html.bikeparkbox .main-pane.is-darkmode .button--flex-width, html.bikeparkbox .main-pane.is-darkmode .button--square, html.bikeparkbox .main-pane.is-darkmode .button--form, html.bikeparkbox .main-pane.is-darkmode .button--neutral { /* primary corporate */ --button-bg-color: #0077BC; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.bikeparkbox .main-pane.is-darkmode .button--ok { /* primary green */ --button-text-color: #000000; --button-bg-color: #2BC853; --icon-color-button: #000000; } html.bikeparkbox .main-pane.is-darkmode .button--dangerous { /* primary red */ --button-text-color: #ffffff; --button-bg-color: #D10000; --icon-color-button: #ffffff; } html.bikeparkbox .main-pane.is-darkmode .button--warning { /* primary yellow */ --button-text-color: #000000; --button-bg-color: #E27D1E; --icon-color-button: #000000; } html.bikeparkbox .main-pane.is-darkmode .button--action { /* secondary */ --button-text-color: #ECE9E1; --button-bg-color: transparent; --icon-color-button: #ECE9E1; --button-border-color: #ECE9E1; } html.bikeparkbox .main-pane.is-darkmode .button--disabled { opacity: 0.3; } html.bikeparkbox .main-pane.is-darkmode .ik-head { background-color: #35393c; } html.bikeparkbox .main-pane.is-darkmode .ik-frame { background-color: #20526f; } html.bikeparkbox .main-pane.is-darkmode .ik-divide { background-color: #5d6163; } html.bikeparkbox .main-pane.is-darkmode .ik-hover { background-color: #494d4f; } html.bikeparkbox .main-pane.is-darkmode .ik-head-neg { background-color: #cac6c3; } html.bikeparkbox .main-pane.is-darkmode .ik-frame-neg { background-color: #dfad90; } html.bikeparkbox .main-pane.is-darkmode .ik-divide-neg { background-color: #a29e9c; } html.bikeparkbox .main-pane.is-darkmode .ik-hover-neg { background-color: #b6b2b0; } html.bikeparkbox .main-pane.is-darkmode h1, html.bikeparkbox .main-pane.is-darkmode h3 { color: #0077BC !important; } html.bikeparkbox .main-pane.is-darkmode input { color-scheme: dark; background-color: #282828 !important; color: #ECE9E1 !important; border-color: #646464 !important; } html.bikeparkbox .main-pane.is-darkmode input::placeholder { color: #babec3; } html.bikeparkbox .main-pane.is-darkmode input:disabled { opacity: 0.3; } html.bikeparkbox .main-pane.is-darkmode input.input--error { border-color: #D10000 !important; } html.bikeparkbox .main-pane.is-darkmode input:autofill { background: #282828 !important; } html.bikeparkbox .main-pane.is-darkmode .switch { border-color: #646464; background-color: #646464; } html.bikeparkbox .main-pane.is-darkmode .switch.isActive { border-color: #0077BC; background-color: #0077BC; } html.bikeparkbox .main-pane.is-darkmode textarea { background-color: #36393c !important; color: #ECE9E1 !important; border-color: #797d7f !important; } html.bikeparkbox .main-pane.is-darkmode textarea::placeholder { color: #babec3; } html.bikeparkbox .main-pane.is-darkmode textarea:disabled { opacity: 0.3; } html.bikeparkbox .main-pane.is-darkmode select { background-color: #282828 !important; color: #ECE9E1 !important; border-color: #797d7f !important; } html.bikeparkbox .main-pane.is-darkmode select:disabled { opacity: 0.3; } html.bikeparkbox .main-pane.is-darkmode .journal { background-color: #ffffff; color: #333339; } html.bikeparkbox .main-pane.is-darkmode .input--checkbox, html.bikeparkbox .main-pane.is-darkmode .input--radio { border-color: #646464 !important; background-color: #282828 !important; } html.bikeparkbox .main-pane.is-darkmode .input--checkbox::after, html.bikeparkbox .main-pane.is-darkmode .input--radio::after { background-color: #282828; } html.bikeparkbox .main-pane.is-darkmode .input--checkbox:checked, html.bikeparkbox .main-pane.is-darkmode .input--radio:checked { border-color: #0077BC !important; background-color: #0077BC !important; } html.bikeparkbox .main-pane.is-darkmode .input--checkbox:disabled, html.bikeparkbox .main-pane.is-darkmode .input--radio:disabled { opacity: 0.5; } html.bikeparkbox .main-pane.is-darkmode .input--checkbox:checked:disabled, html.bikeparkbox .main-pane.is-darkmode .input--radio:checked:disabled { opacity: 0.5; } html.bikeparkbox .main-pane.is-darkmode .color-themed-text, html.bikeparkbox .main-pane.is-darkmode .day, html.bikeparkbox .main-pane.is-darkmode .timejournal__status { color: #797d7f; } html.bikeparkbox .main-pane.is-darkmode .message-box { color: #babec3; background-color: #20526f; border-bottom-color: transparent; } html.bikeparkbox .main-pane.is-darkmode .message-box .message-box__entry { color: #babec3; } html.bikeparkbox .main-pane.is-darkmode .message-box.message-box--error { background-color: #810000; } html.bikeparkbox .main-pane.is-darkmode .message-box.message-box--error .message-box__entry { color: #ffffff; } html.bikeparkbox .main-pane.is-darkmode .timejournal__item { color: #14a9ff !important; } html.bikeparkbox .main-pane.is-darkmode .day, html.bikeparkbox .main-pane.is-darkmode .timejournal__status { color: #bfbfbf !important; } html.bikeparkbox .main-pane.is-darkmode .entry { color: #797d7f; border-color: #36393c; } html.bikeparkbox .main-pane.is-darkmode .entry.is-selected { color: #ffffff; } html.bikeparkbox .main-pane.is-darkmode .separator { color: #ECE9E1; background-color: #35393c; } html.bikeparkbox .main-pane.is-darkmode .table { background-color: #ffffff; color: #191919; } html.bikeparkbox .main-pane.is-darkmode .table__text--with-icon { color: #3d4043; } html.bikeparkbox .main-pane.is-darkmode .overlay__section { color: #ECE9E1; background-color: #35393C; } html.bikeparkbox .main-pane.is-darkmode .filter { background: #191919; color: #ECE9E1; } html.bikeparkbox .main-pane.is-darkmode .search-controls { color: #ECE9E1; } html.bikeparkbox .main-pane.is-darkmode .color-themed-state-red, html.bikeparkbox .main-pane.is-darkmode .list__text--state.red { color: #FF1A1A; } html.bikeparkbox .main-pane.is-darkmode .color-themed-state-green, html.bikeparkbox .main-pane.is-darkmode .list__text--state.green { color: #2BC853; } html.bikeparkbox .main-pane.is-darkmode .color-themed-state-blue { color: #14a9ff; } html.bikeparkbox .main-pane.is-darkmode .content__fixed.bg-white, html.bikeparkbox .main-pane.is-darkmode .content__fixed.input, html.bikeparkbox .main-pane.is-darkmode .content__fixed.input--search { background-color: #35393C; } html.bikeparkbox .main-pane.is-darkmode .modalcontainer .modal .content { color: #191919; } html.bikeparkbox .main-pane.is-darkmode .modalcontainer .modal .content h1, html.bikeparkbox .main-pane.is-darkmode .modalcontainer .modal .content h3 { color: #0077BC; } html.bikeparkbox .main-pane.is-darkmode .signature-modal-title { --color-bg-signature-modal-title: #0077BC; } html.bikeparkbox .main-pane.is-darkmode .signature-modal-button-group { --color-bg-signature-modal-button-group: #191919; } html.bikeparkbox .main-pane.is-darkmode .products__item--logo { background-image: url(images/splashscreens/bikeparkbox_dark.svg); background-size: 74%; background-position-x: -65%; width: auto; } html.bikeparkbox .main-pane.is-darkmode .home--detail__logo { background-image: url(images/splashscreens/bikeparkbox_dark.svg); } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Theme: Secanda Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS settings general_styles background color button_modifiers border input images icons --------------------------------------------------- */ /*======================================================== fonts ======================================================== */ /* roboto-regular - latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; src: url("fonts/roboto-v30-latin-regular.woff2") format("woff2"); } /* roboto-500 - latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; src: url("fonts/roboto-v30-latin-500.woff2") format("woff2"); } /* roboto-700 - latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; src: url("fonts/roboto-v30-latin-700.woff2") format("woff2"); } /* roboto-mono-300 - latin */ @font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 300; src: url("fonts/roboto-mono-v23-latin-300.woff2") format("woff2"); } /*======================================================== color system ======================================================== */ html.secanda { --color-accent: #621764; --color-accent-dark: #42184F; --color-accent-inactive: #D0BAD1; --color-background: #ffffff; --color-background-widget: #F2F2F7; --color-text: #191919; --color-text-muted: #282828; --color-link: #007aff; --color-danger: #D10000; --color-warning: #C88F2D; --color-success: #197630; --color-background-danger: #D10000; --color-background-warning: #FFA900; --color-background-success: #00C91F; --color-background-neutral: #D0BAD1; --color-input-border: #bfbfbf; --icon-color-button: #621764; --icon-color-toolbar: #ffffff; --icon-color-toolbar-active: #621764; --color-box-shadow: #5d6163; --icon-color-accent-navi: #B71BA0; --icon-color-navi: #797D7F; --icon-color-navi-light: #bfbfbf; --icon-control-color: #621764; --control-border-color: #621764; --color-search-results: #e6e6ef; --icon-color-dark: #494d4f; } html.secanda .toolbar, html.secanda .toolbar--filter { --icon-color-button: #ffffff; } html.secanda .dark { --icon-color-accent-navi: #EA38C4; --icon-color-navi: #bfbfbf; --icon-color-navi-light: #797D7F; --color-accent: #B71BA0; --color-success: #34d775; --color-warning: #ffc24a; --color-background-danger: #D10000; } html.secanda .is-darkmode { --color-accent: #B71BA0; --color-accent-dark: #A71892; --color-accent-inactive: rgba(255, 255, 255, 0.2509803922); --color-background: #191919; --color-background-widget: #36393c; --color-text: #ECE9E1; --color-text-muted: #ECE9E1; --color-link: #0a84ff; --color-danger: #ff453a; --color-warning: #ffc24a; --color-success: #34d775; --color-background-danger: #D10000; --color-background-warning: #FFA900; --color-background-success: #00C91F; --color-background-neutral: #D0BAD1; --color-input-border: #646464; --icon-color-button: #ECE9E1; --icon-color-toolbar: #ffffff; --icon-color-toolbar-active: #B71BA0; --color-box-shadow: #d7d7d8; --icon-color-accent-navi: #EA38C4; --icon-color-navi: #bfbfbf; --icon-color-navi-light: #797D7F; --icon-control-color: #ECE9E1; --control-border-color: #ECE9E1; --color-devicestate-water: #14A9FF; --color-search-results: #494d4f; } html.secanda .nav { --icon-color-accent-navi: #EA38C4; --icon-color-navi: #bfbfbf; } html.secanda .toolbar, html.secanda .toolbar--filter { --icon-color-button: #ffffff; } html.secanda .light { --icon-color-accent-navi: #B71BA0; --icon-color-navi: #797D7F; --icon-color-navi-light: #bfbfbf; --color-accent: #621764; --color-success: #197630; --color-warning: #C88F2D; --color-background-danger: #D10000; } .color-accent { color: var(--color-accent); } .color-accent-light { color: var(--color-accent-light); } .color-accent-dark { color: var(--color-accent-dark); } .color-accent-inactive { color: var(--color-accent-inactive); } .color-link, .color-blue { color: var(--color-link); } .color-danger, .color-red { color: var(--color-danger); } .color-warning, .color-yellow { color: var(--color-warning); } .color-success, .color-green { color: var(--color-success); } .bg-accent { background-color: var(--color-accent); } .bg-accent-dark { background-color: var(--color-accent-dark); } .bg-accent-inactive { background-color: var(--color-accent-inactive); } .bg-danger, .bg-red { background-color: var(--color-background-danger); } .bg-warning, .bg-yellow { background-color: var(--color-background-warning); } .bg-success, .bg-green { background-color: var(--color-background-success); } .bg-blue { background-color: var(--color-link); } .bg-neutral { background-color: var(--color-background-neutral); } /*======================================================== individual colors ======================================================== */ /*======================================================== new colors ======================================================== */ /*======================================================== old colors ======================================================== */ html.secanda { /*======================================================== general_styles ======================================================== */ --input-border-radius: 6px; color: #191919; --ik-head: #ffffff; --ik-head-dark: #35393c; --ik-frame: #bfddee; --ik-frame-dark: #20526f; --ik-divide: #d7d7d8; --ik-divide-dark: #5d6163; --ik-hover: #ececec; --ik-hover-dark: #494d4f; --ik-head-neg: #35393c; --ik-head-dark-neg: #ffffff; --ik-frame-neg: #20526f; --ik-frame-dark-neg: #bfddee; --ik-divide-neg: #5d6163; --ik-divide-dark-neg: #d7d7d8; --ik-hover-neg: #494d4f; --ik-hover-dark-neg: #ececec; --hov-bg-color: #ececec; --color-blue: #0077bc; --color-red: #D10000; --color-green: #197630; --color-yellow: #C88F2D; --color-orange: #e27d1e; --color-purple: #db00ff; --color-pink: #ff0089; --color-grey: #bebebe; /*======================================================== color_classes ======================================================== */ /*======================================================== background ======================================================== */ /*======================================================== color ======================================================== */ /*======================================================== button_modifiers ======================================================== */ --button-border-radius: 500px; /*======================================================== control_modifiers ======================================================== */ --control-bg-color: transparent; --control-border-radius: 500px; /*======================================================== border ======================================================== */ /*======================================================== input ======================================================== */ /*======================================================== loading animation ======================================================== */ /*======================================================== icons ======================================================== */ /*======================================================== home ======================================================== */ /*======================================================== darkmode ======================================================== */ } html.secanda .ik-black-0 { background-color: #ffffff; } html.secanda .ik-black-25 { background-color: #bfbfbf; } html.secanda .ik-black-100 { background-color: #000000; } html.secanda .ik-darkgrey-5 { background-color: #F5F5F5; } html.secanda .ik-darkgrey-10 { background-color: #ececec; } html.secanda .ik-darkgrey-20 { background-color: #d7d7d8; } html.secanda .ik-darkgrey-65 { background-color: #797d7f; } html.secanda .ik-darkgrey-80 { background-color: #5d6163; } html.secanda .ik-darkgrey-90 { background-color: #494D4F; } html.secanda .ik-darkgrey-100 { background-color: #35393c; } html.secanda .ik-lightyellow { background-color: #f1e3c4; } html.secanda .ik-lightblue { background-color: #bfddee; } html.secanda .ik-darkblue { background-color: #20526f; } html.secanda .ik-head { background-color: #ffffff; } html.secanda .ik-head-dark { background-color: #35393c; } html.secanda .ik-frame { background-color: #bfddee; } html.secanda .ik-frame-dark { background-color: #20526f; } html.secanda .ik-divide { background-color: #d7d7d8; } html.secanda .ik-divide-dark { background-color: #5d6163; } html.secanda .ik-hover { background-color: #ececec; } html.secanda .ik-hover-dark { background-color: #494d4f; } html.secanda .ik-head-neg { background-color: #000000; } html.secanda .ik-head-dark-neg { background-color: #cac6c3; } html.secanda .ik-frame-neg { background-color: #402211; } html.secanda .ik-frame-dark-neg { background-color: #dfad90; } html.secanda .ik-divide-neg { background-color: #282827; } html.secanda .ik-divide-dark-neg { background-color: #a29e9c; } html.secanda .ik-hover-neg { background-color: #131313; } html.secanda .ik-hover-dark-neg { background-color: #b6b2b0; } html.secanda .ik-corporateblue { background-color: #0077bc; } html.secanda .ik-green { background-color: #2bc853; } html.secanda .ik-darkgreen { background-color: #4e7123; } html.secanda .ik-yellow { background-color: #c88f2d; } html.secanda .ik-orange { background-color: #e27d1e; } html.secanda .ik-red { background-color: #ff1a1a; } html.secanda .ik-darkred { background-color: #810000; } html.secanda .ik-pink { background-color: #ff0089; } html.secanda .ik-purple { background-color: #db00ff; } html.secanda .ik-blue { background-color: #14a9ff; } html.secanda .ik-grey { background-color: #a0a2a5; } html.secanda .bg-white, html.secanda .input, html.secanda .input--search { background-color: #ffffff; } html.secanda .bg-themed, html.secanda .entry.is-selected, html.secanda .products__emblem--home-3, html.secanda .products__emblem--home-2, html.secanda .products__emblem--home-1 { background-color: #621764; } html.secanda .bg-themed a, html.secanda .entry.is-selected a, html.secanda .products__emblem--home-3 a, html.secanda .products__emblem--home-2 a, html.secanda .products__emblem--home-1 a { color: var(--color-link) !important; } html.secanda .bg-themed-nav, html.secanda .nav { background-color: #36393c; } html.secanda .bg-themed-toolbar, html.secanda .toolbar, html.secanda .toolbar--filter { background-color: #621764; } html.secanda .bg-themed-overlay, html.secanda .entry, html.secanda .overlay__section { background-color: #F2F2F7; } html.secanda .bg-themed-separator, html.secanda .separator { background-color: #F2F2F7; } html.secanda .splash-html__logo { background-image: url(images/splashscreens/secanda_light.svg); } html.secanda .splash-html__logo.inactive { background-image: url(images/splashscreens/secanda_dark.svg) !important; } html.secanda .bg-themed-message-box, html.secanda .message-box { background-color: #D0BAD1; color: #191919; } html.secanda .bg-themed-message-box-error, html.secanda .message-box--error { background-color: #D10000; color: #ffffff; } html.secanda .bg-themed-home, html.secanda .products { background-color: #F2F2F7; } html.secanda .bg-themed-list-green { background-color: #bbffbb; } html.secanda .bg-themed-list-yellow { background-color: #ffff90; } html.secanda .bg-themed-list-red { background-color: #ffbbbb; } html.secanda .color-themed, html.secanda .timejournal__item, html.secanda .header1, html.secanda .html a, .html html.secanda a, html.secanda .separator a, .separator html.secanda a, html.secanda .html h3, .html html.secanda h3, html.secanda .separator h3, .separator html.secanda h3, html.secanda .html h1, .html html.secanda h1, html.secanda .separator h1, .separator html.secanda h1, html.secanda .input, html.secanda .input--search, html.constructor .main-pane.is-darkmode .html--home-3 html.secanda h1, html.constructor .main-pane.is-darkmode .html--home-3 html.secanda a, html.constructor .main-pane.is-darkmode .html--home-2 html.secanda h1, html.constructor .main-pane.is-darkmode .html--home-2 html.secanda a, html.constructor .main-pane.is-darkmode .html--home-1 html.secanda h1, html.constructor .main-pane.is-darkmode .html--home-1 html.secanda a, html.constructor .html--home-3 html.secanda h1, html.constructor .html--home-3 html.secanda a, html.constructor .html--home-2 html.secanda h1, html.constructor .html--home-2 html.secanda a, html.constructor .html--home-1 html.secanda h1, html.constructor .html--home-1 html.secanda a, html.secanda .main-pane.is-darkmode .html--home-3 h1, html.secanda .main-pane.is-darkmode .html--home-3 a, html.secanda .main-pane.is-darkmode .html--home-2 h1, html.secanda .main-pane.is-darkmode .html--home-2 a, html.secanda .main-pane.is-darkmode .html--home-1 h1, html.secanda .main-pane.is-darkmode .html--home-1 a, html.secanda .html--home-3 h1, html.secanda .html--home-3 a, html.secanda .html--home-2 h1, html.secanda .html--home-2 a, html.secanda .html--home-1 h1, html.secanda .html--home-1 a, html.intrakey .html--home-1 html.secanda h1, html.intrakey .html--home-1 html.secanda a, html.intrakey .main-pane.is-darkmode .html--home-1 html.secanda h1, html.intrakey .main-pane.is-darkmode .html--home-1 html.secanda a, html.bikeparkbox .html--home-1 html.secanda h1, html.bikeparkbox .html--home-1 html.secanda a, html.bikeparkbox .html--home-2 html.secanda h1, html.bikeparkbox .html--home-2 html.secanda a, html.bikeparkbox .html--home-3 html.secanda h1, html.bikeparkbox .html--home-3 html.secanda a, html.bikeparkbox .main-pane.is-darkmode .html--home-1 html.secanda h1, html.bikeparkbox .main-pane.is-darkmode .html--home-1 html.secanda a, html.bikeparkbox .main-pane.is-darkmode .html--home-2 html.secanda h1, html.bikeparkbox .main-pane.is-darkmode .html--home-2 html.secanda a, html.bikeparkbox .main-pane.is-darkmode .html--home-3 html.secanda h1, html.bikeparkbox .main-pane.is-darkmode .html--home-3 html.secanda a { color: var(--color-accent); } html.secanda .color-themed-text, html.secanda .day, html.secanda .timejournal__status { color: #333339; } html.secanda .color-themed-nav, html.secanda .nav__button { color: #babec3; } html.secanda .color-themed-label, html.secanda .label--overlay { color: var(--color-text); } html.secanda .color-themed-html, html.secanda .input--maintenance, html.constructor .main-pane.is-darkmode html.secanda .html--home-1, html.constructor .main-pane.is-darkmode html.secanda .html--home-2, html.constructor .main-pane.is-darkmode html.secanda .html--home-3, html.secanda .main-pane.is-darkmode .html--home-1, html.secanda .main-pane.is-darkmode .html--home-2, html.secanda .main-pane.is-darkmode .html--home-3, html.secanda .html--home-1, html.secanda .html--home-2, html.secanda .html--home-3, html.intrakey .main-pane.is-darkmode html.secanda .html--home-1, html.intrakey .main-pane.is-darkmode html.secanda .html--home-2, html.intrakey .main-pane.is-darkmode html.secanda .html--home-3, html.bikeparkbox .main-pane.is-darkmode html.secanda .html--home-1, html.bikeparkbox .main-pane.is-darkmode html.secanda .html--home-2, html.bikeparkbox .main-pane.is-darkmode html.secanda .html--home-3 { color: var(--color-text); } html.secanda .color-themed-disabled { color: #bfbfbf; } html.secanda .color-themed-state-blue { color: #0077bc; } html.secanda .color-themed-state-red, html.secanda .list__text--state.red { color: #D10000; } html.secanda .color-themed-state-green, html.secanda .list__text--state.green { color: #197630; } html.secanda .content__fixed.bg-white, html.secanda .content__fixed.input, html.secanda .content__fixed.input--search { background-color: #F2F2F7; } html.secanda .button, html.secanda .button--full-width, html.secanda .button--right, html.secanda .button--middle, html.secanda .button--float, html.secanda .button--left, html.secanda .button--inline, html.secanda .button--flex-width, html.secanda .button--square, html.secanda .button--form, html.secanda .button--neutral { /* primary corporate */ --button-bg-color: #621764; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.secanda .button--ok { /* primary green */ --button-text-color: #000000; --button-bg-color: #00C91F; --icon-color-button: #000000; } html.secanda .button--dangerous { /* primary red */ --button-bg-color: #D10000; } html.secanda .button--warning { /* primary yellow */ --button-text-color: #000000; --button-bg-color: #FFA900; --icon-color-button: #000000; } html.secanda .button--action { /* secondary */ --button-text-color: #621764; --button-bg-color: transparent; --icon-color-button: #621764; --button-border-color: #621764; } html.secanda .button--info { /* secondary */ --button-bg-color: #007aff; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.secanda .button--disabled { opacity: 0.3; } html.secanda .border-themed-nav, html.secanda .nav__item { border-color: #222629; } html.secanda .border-themed-list, html.secanda .html hr, .html html.secanda hr, html.secanda .separator hr, .separator html.secanda hr, html.secanda .list__item { border-color: var(--color-background-widget); } html.secanda .border-themed-table, html.secanda .table__column, html.secanda .table { border-color: var(--color-background-widget); } html.secanda .input-themed, html.secanda .switch, html.secanda .input, html.secanda .input--search { border-color: #bfbfbf; } html.secanda .input-themed-error, html.secanda .input--error { border-color: #D10000; } html.secanda .input-themed-inner, html.secanda .switch .switch__inner, .switch html.secanda .switch__inner, html.secanda .input--radio::after { background-color: var(--color-accent); color: #ECE9E1; } html.secanda .input-themed-inner.input--radio, html.secanda .switch .input--radio.switch__inner, .switch html.secanda .input--radio.switch__inner, html.secanda .input--radio::after { background-color: transparent; } html.secanda .input-themed-disabled { color: #bfbfbf; border-color: #e6e6e6; } html.secanda .input-themed-disabled-inner, html.secanda .input--radio:disabled::after { background-color: #e6e6e6; } html.secanda .input-themed-checked, html.secanda .switch .switch__inner.is-switched-on, .switch html.secanda .switch__inner.is-switched-on, html.secanda .input--radio:checked, html.secanda .input--checkbox:checked { border-color: #621764; background-color: #621764; } html.secanda .input-themed-checked-disabled { background-color: #b7e2c8; border-color: #b7e2c8; } html.secanda .switch { border-color: #bfbfbf; background-color: #bfbfbf; } html.secanda .switch.isActive { border-color: #621764; background-color: #621764; } html.secanda .switch__inner { border-color: #ffffff; background-color: #ffffff; } html.secanda .switch .switch__inner { border-color: #ffffff; background-color: #ffffff; } html.secanda .switch .switch__inner.is-switched-on { border-color: #ffffff; background-color: #ffffff; } html.secanda .signature-modal-title { --color-bg-signature-modal-title: #621764; } html.secanda .signature-modal-button-group { --color-bg-signature-modal-button-group: #ffffff; } html.secanda .loader__image { width: 45px; aspect-ratio: 1; height: 45px; border-radius: 50%; border: 4px solid #B71BA0; border-right-color: transparent; animation: l2 1s infinite linear; } @keyframes l2 { to { transform: rotate(1turn); } } html.secanda .main-pane.is-darkmode { background: #191919; color: #ECE9E1; --hov-bg-color: #494d4f; --ik-head: #35393c; --ik-divide: #5d6163; --ik-frame: #20526f; --ik-hover: #494d4f; --ik-head-neg: #ffffff; --ik-divide-neg: #d7d7d8; --ik-frame-neg: #bfddee; --ik-hover-neg: #ececec; --color-blue: #0a84ff; --color-red: #ff453a; --color-green: #34d775; --color-yellow: #ffc24a; } html.secanda .main-pane.is-darkmode .bg-themed, html.secanda .main-pane.is-darkmode .entry.is-selected, html.secanda .main-pane.is-darkmode .products__emblem--home-1, html.secanda .main-pane.is-darkmode .products__emblem--home-2, html.secanda .main-pane.is-darkmode .products__emblem--home-3 { background-color: #B71BA0; } html.secanda .main-pane.is-darkmode .bg-themed-toolbar, html.secanda .main-pane.is-darkmode .toolbar, html.secanda .main-pane.is-darkmode .toolbar--filter { background-color: #B71BA0; } html.secanda .main-pane.is-darkmode .splash-html__logo { background-image: url(images/splashscreens/secanda_dark.svg); } html.secanda .main-pane.is-darkmode .button, html.secanda .main-pane.is-darkmode .button--full-width, html.secanda .main-pane.is-darkmode .button--right, html.secanda .main-pane.is-darkmode .button--middle, html.secanda .main-pane.is-darkmode .button--float, html.secanda .main-pane.is-darkmode .button--left, html.secanda .main-pane.is-darkmode .button--inline, html.secanda .main-pane.is-darkmode .button--flex-width, html.secanda .main-pane.is-darkmode .button--square, html.secanda .main-pane.is-darkmode .button--form, html.secanda .main-pane.is-darkmode .button--neutral { /* primary corporate */ --button-bg-color: #B71BA0; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.secanda .main-pane.is-darkmode .button--ok { /* primary green */ --button-text-color: #000000; --button-bg-color: #00C91F; --icon-color-button: #000000; } html.secanda .main-pane.is-darkmode .button--dangerous { /* primary red */ --button-bg-color: #D10000; } html.secanda .main-pane.is-darkmode .button--warning { /* primary yellow */ --button-text-color: #000000; --button-bg-color: #FFA900; --icon-color-button: #000000; } html.secanda .main-pane.is-darkmode .button--action { /* secondary */ --button-text-color: #ECE9E1; --button-bg-color: transparent; --icon-color-button: #ECE9E1; --button-border-color: #ECE9E1; } html.secanda .main-pane.is-darkmode .button--info { /* secondary */ --button-text-color: #ffffff; --button-bg-color: #0a84ff; --icon-color-button: #ffffff; --button-border-color: #0a84ff; } html.secanda .main-pane.is-darkmode .button--disabled { opacity: 0.3; } html.secanda .main-pane.is-darkmode .ik-head { background-color: #35393c; } html.secanda .main-pane.is-darkmode .ik-frame { background-color: #20526f; } html.secanda .main-pane.is-darkmode .ik-divide { background-color: #5d6163; } html.secanda .main-pane.is-darkmode .ik-hover { background-color: #494d4f; } html.secanda .main-pane.is-darkmode .ik-head-neg { background-color: #cac6c3; } html.secanda .main-pane.is-darkmode .ik-frame-neg { background-color: #dfad90; } html.secanda .main-pane.is-darkmode .ik-divide-neg { background-color: #a29e9c; } html.secanda .main-pane.is-darkmode .ik-hover-neg { background-color: #b6b2b0; } html.secanda .main-pane.is-darkmode h1, html.secanda .main-pane.is-darkmode h3 { color: #EA38C4 !important; } html.secanda .main-pane.is-darkmode input { color-scheme: dark; background-color: #282828 !important; color: #ECE9E1 !important; border-color: #646464 !important; } html.secanda .main-pane.is-darkmode input::placeholder { color: #ECE9E1; } html.secanda .main-pane.is-darkmode input:disabled { opacity: 0.3; } html.secanda .main-pane.is-darkmode input.input--error { border-color: #D10000 !important; } html.secanda .main-pane.is-darkmode input:autofill { background: #282828 !important; } html.secanda .main-pane.is-darkmode .switch { border-color: #646464; background-color: #646464; } html.secanda .main-pane.is-darkmode .switch.isActive { border-color: #B71BA0; background-color: #B71BA0; } html.secanda .main-pane.is-darkmode textarea { background-color: #282828 !important; color: #ECE9E1 !important; border-color: #646464 !important; } html.secanda .main-pane.is-darkmode textarea::placeholder { color: #ECE9E1; } html.secanda .main-pane.is-darkmode textarea:disabled { opacity: 0.3; } html.secanda .main-pane.is-darkmode select { background-color: #282828 !important; color: #ECE9E1 !important; border-color: #646464 !important; } html.secanda .main-pane.is-darkmode select:disabled { opacity: 0.3; } html.secanda .main-pane.is-darkmode .journal { background-color: #ffffff; color: #333339; } html.secanda .main-pane.is-darkmode .input--checkbox, html.secanda .main-pane.is-darkmode .input--radio { border-color: #646464 !important; background-color: #282828 !important; } html.secanda .main-pane.is-darkmode .input--checkbox::after, html.secanda .main-pane.is-darkmode .input--radio::after { background-color: #282828; } html.secanda .main-pane.is-darkmode .input--checkbox:checked, html.secanda .main-pane.is-darkmode .input--radio:checked { border-color: #B71BA0 !important; background-color: #B71BA0 !important; } html.secanda .main-pane.is-darkmode .input--checkbox:disabled, html.secanda .main-pane.is-darkmode .input--radio:disabled { opacity: 0.5; } html.secanda .main-pane.is-darkmode .input--checkbox:checked:disabled, html.secanda .main-pane.is-darkmode .input--radio:checked:disabled { opacity: 0.5; } html.secanda .main-pane.is-darkmode .color-themed-text, html.secanda .main-pane.is-darkmode .day, html.secanda .main-pane.is-darkmode .timejournal__status { color: #797d7f; } html.secanda .main-pane.is-darkmode .timejournal__item { color: #ECE9E1 !important; } html.secanda .main-pane.is-darkmode .day, html.secanda .main-pane.is-darkmode .timejournal__status { color: #bfbfbf !important; } html.secanda .main-pane.is-darkmode .entry { color: #797d7f; border-color: #36393c; } html.secanda .main-pane.is-darkmode .entry.is-selected { color: #ffffff; } html.secanda .main-pane.is-darkmode .separator { color: #babec3; background-color: #36393c; } html.secanda .main-pane.is-darkmode .table { background-color: #ffffff; color: #191919; } html.secanda .main-pane.is-darkmode .table__text--with-icon { color: #3d4043; } html.secanda .main-pane.is-darkmode .overlay__section { color: #ECE9E1; background-color: #36393c; } html.secanda .main-pane.is-darkmode .filter { background: #191919; color: #ECE9E1; } html.secanda .main-pane.is-darkmode .search-controls { color: #ECE9E1; } html.secanda .main-pane.is-darkmode .search-result-container ul li.selection-pinned { background-color: #B71BA0; } html.secanda .main-pane.is-darkmode .color-themed-state-red, html.secanda .main-pane.is-darkmode .list__text--state.red { color: #ff453a; } html.secanda .main-pane.is-darkmode .color-themed-state-green, html.secanda .main-pane.is-darkmode .list__text--state.green { color: #34d775; } html.secanda .main-pane.is-darkmode .color-themed-state-blue { color: #14a9ff; } html.secanda .main-pane.is-darkmode .content__fixed.bg-white, html.secanda .main-pane.is-darkmode .content__fixed.input, html.secanda .main-pane.is-darkmode .content__fixed.input--search { background-color: #36393c; } html.secanda .main-pane.is-darkmode .modalcontainer .modal .content { color: #191919; } html.secanda .main-pane.is-darkmode .modalcontainer .modal .content h1, html.secanda .main-pane.is-darkmode .modalcontainer .modal .content h3 { color: #621764 !important; } html.secanda .main-pane.is-darkmode .signature-modal-title { --color-bg-signature-modal-title: #B71BA0; } html.secanda .main-pane.is-darkmode .signature-modal-button-group { --color-bg-signature-modal-button-group: #191919; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Theme: Constructor Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS settings general_styles background color button_modifiers border input images icons --------------------------------------------------- */ /*======================================================== fonts ======================================================== */ /* roboto-regular - latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; src: url("fonts/roboto-v30-latin-regular.woff2") format("woff2"); } /* roboto-500 - latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; src: url("fonts/roboto-v30-latin-500.woff2") format("woff2"); } /* roboto-700 - latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; src: url("fonts/roboto-v30-latin-700.woff2") format("woff2"); } /* roboto-mono-300 - latin */ @font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 300; src: url("fonts/roboto-mono-v23-latin-300.woff2") format("woff2"); } /*======================================================== color system ======================================================== */ html.constructor { --color-accent: #621764; --color-accent-dark: #42184F; --color-accent-inactive: #D0BAD1; --color-background: #ffffff; --color-background-widget: #F2F2F7; --color-text: #191919; --color-text-muted: #282828; --color-link: #007aff; --color-danger: #D10000; --color-warning: #C88F2D; --color-success: #197630; --color-background-danger: #D10000; --color-background-warning: #FFA900; --color-background-success: #00C91F; --color-background-neutral: #D0BAD1; --color-input-border: #bfbfbf; --icon-color-button: #621764; --icon-color-toolbar: #ffffff; --icon-color-toolbar-active: #621764; --color-box-shadow: #5d6163; --icon-color-accent-navi: #B71BA0; --icon-color-navi: #797D7F; --icon-color-navi-light: #bfbfbf; --icon-control-color: #621764; --control-border-color: #621764; --color-devicestate-water: #14A9FF; --color-search-results: #e6e6ef; --icon-color-dark: #494d4f; } html.constructor .toolbar, html.constructor .toolbar--filter { --icon-color-button: #ffffff; } html.constructor .dark { --icon-color-accent-navi: #EA38C4; --icon-color-navi: #bfbfbf; --icon-color-navi-light: #797D7F; --color-accent: #B71BA0; --color-success: #34d775; --color-warning: #ffc24a; --color-background-danger: #D10000; } html.constructor .svg-icon.is-selected { --icon-color-dark: #e6e6ef; } html.constructor .is-darkmode { --color-accent: #B71BA0; --color-accent-dark: #A71892; --color-accent-inactive: rgba(255, 255, 255, 0.2509803922); --color-background: #191919; --color-background-widget: #36393c; --color-text: #ECE9E1; --color-text-muted: #ECE9E1; --color-link: #0a84ff; --color-danger: #ff453a; --color-warning: #ffc24a; --color-success: #34d775; --color-background-danger: #D10000; --color-background-warning: #FFA900; --color-background-success: #00C91F; --color-background-neutral: #D0BAD1; --color-input-border: #646464; --icon-color-button: #ECE9E1; --icon-color-toolbar: #ffffff; --icon-color-toolbar-active: #B71BA0; --color-box-shadow: #d7d7d8; --icon-color-accent-navi: #EA38C4; --icon-color-navi: #bfbfbf; --icon-color-navi-light: #797D7F; --icon-control-color: #ECE9E1; --control-border-color: #ECE9E1; --color-search-results: #494d4f; } html.constructor .nav { --icon-color-accent-navi: #EA38C4; --icon-color-navi: #bfbfbf; } html.constructor .toolbar, html.constructor .toolbar--filter { --icon-color-button: #ffffff; } html.constructor .light { --icon-color-accent-navi: #B71BA0; --icon-color-navi: #797D7F; --icon-color-navi-light: #bfbfbf; --color-accent: #621764; --color-success: #197630; --color-warning: #C88F2D; --color-background-danger: #D10000; } .color-accent { color: var(--color-accent); } .color-accent-light { color: var(--color-accent-light); } .color-accent-dark { color: var(--color-accent-dark); } .color-accent-inactive { color: var(--color-accent-inactive); } .color-link, .color-blue { color: var(--color-link); } .color-danger, .color-red { color: var(--color-danger); } .color-warning, .color-yellow { color: var(--color-warning); } .color-success, .color-green { color: var(--color-success); } .bg-accent { background-color: var(--color-accent); } .bg-accent-dark { background-color: var(--color-accent-dark); } .bg-accent-inactive { background-color: var(--color-accent-inactive); } .bg-danger, .bg-red { background-color: var(--color-background-danger); } .bg-warning, .bg-yellow { background-color: var(--color-background-warning); } .bg-success, .bg-green { background-color: var(--color-background-success); } .bg-blue { background-color: var(--color-link); } .bg-neutral { background-color: var(--color-background-neutral); } /*======================================================== individual colors ======================================================== */ /*======================================================== new colors ======================================================== */ /*======================================================== old colors ======================================================== */ html.constructor { /*======================================================== general_styles ======================================================== */ --input-border-radius: 6px; color: #191919; --ik-head: #ffffff; --ik-head-dark: #35393c; --ik-frame: #bfddee; --ik-frame-dark: #20526f; --ik-divide: #d7d7d8; --ik-divide-dark: #5d6163; --ik-hover: #ececec; --ik-hover-dark: #494d4f; --ik-head-neg: #35393c; --ik-head-dark-neg: #ffffff; --ik-frame-neg: #20526f; --ik-frame-dark-neg: #bfddee; --ik-divide-neg: #5d6163; --ik-divide-dark-neg: #d7d7d8; --ik-hover-neg: #494d4f; --ik-hover-dark-neg: #ececec; --hov-bg-color: #ececec; --color-blue: #0077bc; --color-red: #D10000; --color-green: #197630; --color-yellow: #C88F2D; --color-orange: #e27d1e; --color-purple: #db00ff; --color-pink: #ff0089; --color-grey: #bebebe; /*======================================================== color_classes ======================================================== */ /*======================================================== background ======================================================== */ /*======================================================== color ======================================================== */ /*======================================================== button_modifiers ======================================================== */ --button-border-radius: 500px; /*======================================================== control_modifiers ======================================================== */ --control-bg-color: transparent; --control-border-radius: 500px; /*======================================================== border ======================================================== */ /*======================================================== input ======================================================== */ /*======================================================== loading animation ======================================================== */ /*======================================================== icons ======================================================== */ /*======================================================== home ======================================================== */ /*======================================================== darkmode ======================================================== */ } html.constructor .ik-black-0 { background-color: #ffffff; } html.constructor .ik-black-25 { background-color: #bfbfbf; } html.constructor .ik-black-100 { background-color: #000000; } html.constructor .ik-darkgrey-5 { background-color: #F5F5F5; } html.constructor .ik-darkgrey-10 { background-color: #ececec; } html.constructor .ik-darkgrey-20 { background-color: #d7d7d8; } html.constructor .ik-darkgrey-65 { background-color: #797d7f; } html.constructor .ik-darkgrey-80 { background-color: #5d6163; } html.constructor .ik-darkgrey-90 { background-color: #494D4F; } html.constructor .ik-darkgrey-100 { background-color: #35393c; } html.constructor .ik-lightyellow { background-color: #f1e3c4; } html.constructor .ik-lightblue { background-color: #bfddee; } html.constructor .ik-darkblue { background-color: #20526f; } html.constructor .ik-head { background-color: #ffffff; } html.constructor .ik-head-dark { background-color: #35393c; } html.constructor .ik-frame { background-color: #bfddee; } html.constructor .ik-frame-dark { background-color: #20526f; } html.constructor .ik-divide { background-color: #d7d7d8; } html.constructor .ik-divide-dark { background-color: #5d6163; } html.constructor .ik-hover { background-color: #ececec; } html.constructor .ik-hover-dark { background-color: #494d4f; } html.constructor .ik-head-neg { background-color: #000000; } html.constructor .ik-head-dark-neg { background-color: #cac6c3; } html.constructor .ik-frame-neg { background-color: #402211; } html.constructor .ik-frame-dark-neg { background-color: #dfad90; } html.constructor .ik-divide-neg { background-color: #282827; } html.constructor .ik-divide-dark-neg { background-color: #a29e9c; } html.constructor .ik-hover-neg { background-color: #131313; } html.constructor .ik-hover-dark-neg { background-color: #b6b2b0; } html.constructor .ik-corporateblue { background-color: #0077bc; } html.constructor .ik-green { background-color: #2bc853; } html.constructor .ik-darkgreen { background-color: #4e7123; } html.constructor .ik-yellow { background-color: #c88f2d; } html.constructor .ik-orange { background-color: #e27d1e; } html.constructor .ik-red { background-color: #ff1a1a; } html.constructor .ik-darkred { background-color: #810000; } html.constructor .ik-pink { background-color: #ff0089; } html.constructor .ik-purple { background-color: #db00ff; } html.constructor .ik-blue { background-color: #14a9ff; } html.constructor .ik-grey { background-color: #a0a2a5; } html.constructor .bg-white, html.constructor .input, html.constructor .input--search { background-color: #ffffff; } html.constructor .bg-themed, html.constructor .entry.is-selected, html.constructor .products__emblem--home-3, html.constructor .products__emblem--home-2, html.constructor .products__emblem--home-1 { background-color: #621764; } html.constructor .bg-themed a, html.constructor .entry.is-selected a, html.constructor .products__emblem--home-3 a, html.constructor .products__emblem--home-2 a, html.constructor .products__emblem--home-1 a { color: var(--color-link) !important; } html.constructor .bg-themed-nav, html.constructor .nav { background-color: #36393c; } html.constructor .bg-themed-toolbar, html.constructor .toolbar, html.constructor .toolbar--filter { background-color: #621764; } html.constructor .bg-themed-overlay, html.constructor .entry, html.constructor .overlay__section { background-color: #F2F2F7; } html.constructor .bg-themed-separator, html.constructor .separator { background-color: #F2F2F7; } html.constructor .splash-html__logo { background-image: url(images/splashscreens/constructor_light.svg); } html.constructor .splash-html__logo.inactive { background-image: url(images/splashscreens/constructor_dark.svg) !important; } html.constructor .bg-themed-message-box, html.constructor .message-box { background-color: #D0BAD1; color: #191919; } html.constructor .bg-themed-message-box-error, html.constructor .message-box--error { background-color: #D10000; color: #ffffff; } html.constructor .bg-themed-home, html.constructor .products { background-color: #F2F2F7; } html.constructor .bg-themed-list-green { background-color: #bbffbb; } html.constructor .bg-themed-list-yellow { background-color: #ffff90; } html.constructor .bg-themed-list-red { background-color: #ffbbbb; } html.constructor .color-themed, html.constructor .timejournal__item, html.constructor .header1, html.constructor .html a, .html html.constructor a, html.constructor .separator a, .separator html.constructor a, html.constructor .html h3, .html html.constructor h3, html.constructor .separator h3, .separator html.constructor h3, html.constructor .html h1, .html html.constructor h1, html.constructor .separator h1, .separator html.constructor h1, html.constructor .input, html.constructor .input--search, html.constructor .main-pane.is-darkmode .html--home-3 h1, html.constructor .main-pane.is-darkmode .html--home-3 a, html.constructor .main-pane.is-darkmode .html--home-2 h1, html.constructor .main-pane.is-darkmode .html--home-2 a, html.constructor .main-pane.is-darkmode .html--home-1 h1, html.constructor .main-pane.is-darkmode .html--home-1 a, html.constructor .html--home-3 h1, html.constructor .html--home-3 a, html.constructor .html--home-2 h1, html.constructor .html--home-2 a, html.constructor .html--home-1 h1, html.constructor .html--home-1 a, html.intrakey .html--home-1 html.constructor h1, html.intrakey .html--home-1 html.constructor a, html.intrakey .main-pane.is-darkmode .html--home-1 html.constructor h1, html.intrakey .main-pane.is-darkmode .html--home-1 html.constructor a, html.bikeparkbox .html--home-1 html.constructor h1, html.bikeparkbox .html--home-1 html.constructor a, html.bikeparkbox .html--home-2 html.constructor h1, html.bikeparkbox .html--home-2 html.constructor a, html.bikeparkbox .html--home-3 html.constructor h1, html.bikeparkbox .html--home-3 html.constructor a, html.bikeparkbox .main-pane.is-darkmode .html--home-1 html.constructor h1, html.bikeparkbox .main-pane.is-darkmode .html--home-1 html.constructor a, html.bikeparkbox .main-pane.is-darkmode .html--home-2 html.constructor h1, html.bikeparkbox .main-pane.is-darkmode .html--home-2 html.constructor a, html.bikeparkbox .main-pane.is-darkmode .html--home-3 html.constructor h1, html.bikeparkbox .main-pane.is-darkmode .html--home-3 html.constructor a, html.secanda .html--home-1 html.constructor h1, html.secanda .html--home-1 html.constructor a, html.secanda .html--home-2 html.constructor h1, html.secanda .html--home-2 html.constructor a, html.secanda .html--home-3 html.constructor h1, html.secanda .html--home-3 html.constructor a, html.secanda .main-pane.is-darkmode .html--home-1 html.constructor h1, html.secanda .main-pane.is-darkmode .html--home-1 html.constructor a, html.secanda .main-pane.is-darkmode .html--home-2 html.constructor h1, html.secanda .main-pane.is-darkmode .html--home-2 html.constructor a, html.secanda .main-pane.is-darkmode .html--home-3 html.constructor h1, html.secanda .main-pane.is-darkmode .html--home-3 html.constructor a { color: var(--color-accent); } html.constructor .color-themed-text, html.constructor .day, html.constructor .timejournal__status { color: #333339; } html.constructor .color-themed-nav, html.constructor .nav__button { color: #babec3; } html.constructor .color-themed-label, html.constructor .label--overlay { color: var(--color-text); } html.constructor .color-themed-html, html.constructor .input--maintenance, html.constructor .main-pane.is-darkmode .html--home-1, html.constructor .main-pane.is-darkmode .html--home-2, html.constructor .main-pane.is-darkmode .html--home-3, html.constructor .html--home-1, html.constructor .html--home-2, html.constructor .html--home-3, html.intrakey .main-pane.is-darkmode html.constructor .html--home-1, html.intrakey .main-pane.is-darkmode html.constructor .html--home-2, html.intrakey .main-pane.is-darkmode html.constructor .html--home-3, html.bikeparkbox .main-pane.is-darkmode html.constructor .html--home-1, html.bikeparkbox .main-pane.is-darkmode html.constructor .html--home-2, html.bikeparkbox .main-pane.is-darkmode html.constructor .html--home-3, html.secanda .main-pane.is-darkmode html.constructor .html--home-1, html.secanda .main-pane.is-darkmode html.constructor .html--home-2, html.secanda .main-pane.is-darkmode html.constructor .html--home-3 { color: var(--color-text); } html.constructor .color-themed-disabled { color: #bfbfbf; } html.constructor .color-themed-state-blue { color: #0077bc; } html.constructor .color-themed-state-red, html.constructor .list__text--state.red { color: #D10000; } html.constructor .color-themed-state-green, html.constructor .list__text--state.green { color: #197630; } html.constructor .content__fixed.bg-white, html.constructor .content__fixed.input, html.constructor .content__fixed.input--search { background-color: #F2F2F7; } html.constructor .button, html.constructor .button--full-width, html.constructor .button--right, html.constructor .button--middle, html.constructor .button--float, html.constructor .button--left, html.constructor .button--inline, html.constructor .button--flex-width, html.constructor .button--square, html.constructor .button--form, html.constructor .button--neutral { /* primary corporate */ --button-bg-color: #621764; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.constructor .button--ok { /* primary green */ --button-text-color: #000000; --button-bg-color: #00C91F; --icon-color-button: #000000; } html.constructor .button--dangerous { /* primary red */ --button-bg-color: #D10000; } html.constructor .button--warning { /* primary yellow */ --button-text-color: #000000; --button-bg-color: #FFA900; --icon-color-button: #000000; } html.constructor .button--action { /* secondary */ --button-text-color: #621764; --button-bg-color: transparent; --icon-color-button: #621764; --button-border-color: #621764; } html.constructor .button--info { /* secondary */ --button-bg-color: #007aff; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.constructor .button--disabled { opacity: 0.3; } html.constructor .border-themed-nav, html.constructor .nav__item { border-color: #222629; } html.constructor .border-themed-list, html.constructor .html hr, .html html.constructor hr, html.constructor .separator hr, .separator html.constructor hr, html.constructor .list__item { border-color: var(--color-background-widget); } html.constructor .border-themed-table, html.constructor .table__column, html.constructor .table { border-color: var(--color-background-widget); } html.constructor .input-themed, html.constructor .switch, html.constructor .input, html.constructor .input--search { border-color: #bfbfbf; } html.constructor .input-themed-error, html.constructor .input--error { border-color: #D10000; } html.constructor .input-themed-inner, html.constructor .switch .switch__inner, .switch html.constructor .switch__inner, html.constructor .input--radio::after { background-color: var(--color-accent); color: #ECE9E1; } html.constructor .input-themed-inner.input--radio, html.constructor .switch .input--radio.switch__inner, .switch html.constructor .input--radio.switch__inner, html.constructor .input--radio::after { background-color: transparent; } html.constructor .input-themed-disabled { color: #bfbfbf; border-color: #e6e6e6; } html.constructor .input-themed-disabled-inner, html.constructor .input--radio:disabled::after { background-color: #e6e6e6; } html.constructor .input-themed-checked, html.constructor .switch .switch__inner.is-switched-on, .switch html.constructor .switch__inner.is-switched-on, html.constructor .input--radio:checked, html.constructor .input--checkbox:checked { border-color: #621764; background-color: #621764; } html.constructor .input-themed-checked-disabled { background-color: #b7e2c8; border-color: #b7e2c8; } html.constructor .switch { border-color: #bfbfbf; background-color: #bfbfbf; } html.constructor .switch.isActive { border-color: #621764; background-color: #621764; } html.constructor .switch__inner { border-color: #ffffff; background-color: #ffffff; } html.constructor .switch .switch__inner { border-color: #ffffff; background-color: #ffffff; } html.constructor .switch .switch__inner.is-switched-on { border-color: #ffffff; background-color: #ffffff; } html.constructor .signature-modal-title { --color-bg-signature-modal-title: #621764; } html.constructor .signature-modal-button-group { --color-bg-signature-modal-button-group: #ffffff; } html.constructor .loader__image { width: 45px; aspect-ratio: 1; height: 45px; border-radius: 50%; border: 4px solid #B71BA0; border-right-color: transparent; animation: l2 1s infinite linear; } @keyframes l2 { to { transform: rotate(1turn); } } html.constructor .products__item--home-0 { background-image: url(images/splashscreens/constructor_light.svg); background-color: var(--color-background); background-size: 130%; margin-left: -10%; width: auto; } html.constructor .products__item--home-1 { background-image: url(images/home_constructor/home_1.jpg); } html.constructor .products__item--home-2 { background-image: url(images/home_constructor/home_2.jpg); } html.constructor .products__item--home-3 { background-image: url(images/home_constructor/home_3.jpg); } html.constructor .products__item--home-4 { background-image: url(images/home_constructor/home_4.jpg); } html.constructor .home--detail__logo { background-image: url(images/splashscreens/constructor_light.svg); width: 100%; height: 20vh; background-size: cover; margin-top: -1.75rem; } html.constructor .main-pane.is-darkmode { background: #191919; color: #ECE9E1; --hov-bg-color: #494d4f; --ik-head: #35393c; --ik-divide: #5d6163; --ik-frame: #20526f; --ik-hover: #494d4f; --ik-head-neg: #ffffff; --ik-divide-neg: #d7d7d8; --ik-frame-neg: #bfddee; --ik-hover-neg: #ececec; --color-blue: #0a84ff; --color-red: #ff453a; --color-green: #34d775; --color-yellow: #ffc24a; } html.constructor .main-pane.is-darkmode .bg-themed, html.constructor .main-pane.is-darkmode .entry.is-selected, html.constructor .main-pane.is-darkmode .products__emblem--home-1, html.constructor .main-pane.is-darkmode .products__emblem--home-2, html.constructor .main-pane.is-darkmode .products__emblem--home-3 { background-color: #B71BA0; } html.constructor .main-pane.is-darkmode .bg-themed-toolbar, html.constructor .main-pane.is-darkmode .toolbar, html.constructor .main-pane.is-darkmode .toolbar--filter { background-color: #B71BA0; } html.constructor .main-pane.is-darkmode .splash-html__logo { background-image: url(images/splashscreens/constructor_dark.svg); } html.constructor .main-pane.is-darkmode .button, html.constructor .main-pane.is-darkmode .button--full-width, html.constructor .main-pane.is-darkmode .button--right, html.constructor .main-pane.is-darkmode .button--middle, html.constructor .main-pane.is-darkmode .button--float, html.constructor .main-pane.is-darkmode .button--left, html.constructor .main-pane.is-darkmode .button--inline, html.constructor .main-pane.is-darkmode .button--flex-width, html.constructor .main-pane.is-darkmode .button--square, html.constructor .main-pane.is-darkmode .button--form, html.constructor .main-pane.is-darkmode .button--neutral { /* primary corporate */ --button-bg-color: #B71BA0; --button-text-color: #ffffff; --icon-color-button: #ffffff; } html.constructor .main-pane.is-darkmode .button--ok { /* primary green */ --button-text-color: #000000; --button-bg-color: #00C91F; --icon-color-button: #000000; } html.constructor .main-pane.is-darkmode .button--dangerous { /* primary red */ --button-bg-color: #D10000; } html.constructor .main-pane.is-darkmode .button--warning { /* primary yellow */ --button-text-color: #000000; --button-bg-color: #FFA900; --icon-color-button: #000000; } html.constructor .main-pane.is-darkmode .button--action { /* secondary */ --button-text-color: #ECE9E1; --button-bg-color: transparent; --icon-color-button: #ECE9E1; --button-border-color: #ECE9E1; } html.constructor .main-pane.is-darkmode .button--info { /* secondary */ --button-text-color: #ffffff; --button-bg-color: #0a84ff; --icon-color-button: #ffffff; --button-border-color: #0a84ff; } html.constructor .main-pane.is-darkmode .button--disabled { opacity: 0.3; } html.constructor .main-pane.is-darkmode .ik-head { background-color: #35393c; } html.constructor .main-pane.is-darkmode .ik-frame { background-color: #20526f; } html.constructor .main-pane.is-darkmode .ik-divide { background-color: #5d6163; } html.constructor .main-pane.is-darkmode .ik-hover { background-color: #494d4f; } html.constructor .main-pane.is-darkmode .ik-head-neg { background-color: #cac6c3; } html.constructor .main-pane.is-darkmode .ik-frame-neg { background-color: #dfad90; } html.constructor .main-pane.is-darkmode .ik-divide-neg { background-color: #a29e9c; } html.constructor .main-pane.is-darkmode .ik-hover-neg { background-color: #b6b2b0; } html.constructor .main-pane.is-darkmode h1, html.constructor .main-pane.is-darkmode h3 { color: #EA38C4 !important; } html.constructor .main-pane.is-darkmode input { color-scheme: dark; background-color: #282828 !important; color: #ECE9E1 !important; border-color: #646464 !important; } html.constructor .main-pane.is-darkmode input::placeholder { color: #ECE9E1; } html.constructor .main-pane.is-darkmode input:disabled { opacity: 0.3; } html.constructor .main-pane.is-darkmode input.input--error { border-color: #D10000 !important; } html.constructor .main-pane.is-darkmode input:autofill { background: #282828 !important; } html.constructor .main-pane.is-darkmode .switch { border-color: #646464; background-color: #646464; } html.constructor .main-pane.is-darkmode .switch.isActive { border-color: #B71BA0; background-color: #B71BA0; } html.constructor .main-pane.is-darkmode textarea { background-color: #282828 !important; color: #ECE9E1 !important; border-color: #646464 !important; } html.constructor .main-pane.is-darkmode textarea::placeholder { color: #ECE9E1; } html.constructor .main-pane.is-darkmode textarea:disabled { opacity: 0.3; } html.constructor .main-pane.is-darkmode select { background-color: #282828 !important; color: #ECE9E1 !important; border-color: #646464 !important; } html.constructor .main-pane.is-darkmode select:disabled { opacity: 0.3; } html.constructor .main-pane.is-darkmode .journal { background-color: #ffffff; color: #333339; } html.constructor .main-pane.is-darkmode .input--checkbox, html.constructor .main-pane.is-darkmode .input--radio { border-color: #646464 !important; background-color: #282828 !important; } html.constructor .main-pane.is-darkmode .input--checkbox::after, html.constructor .main-pane.is-darkmode .input--radio::after { background-color: #282828; } html.constructor .main-pane.is-darkmode .input--checkbox:checked, html.constructor .main-pane.is-darkmode .input--radio:checked { border-color: #B71BA0 !important; background-color: #B71BA0 !important; } html.constructor .main-pane.is-darkmode .input--checkbox:disabled, html.constructor .main-pane.is-darkmode .input--radio:disabled { opacity: 0.5; } html.constructor .main-pane.is-darkmode .input--checkbox:checked:disabled, html.constructor .main-pane.is-darkmode .input--radio:checked:disabled { opacity: 0.5; } html.constructor .main-pane.is-darkmode .color-themed-text, html.constructor .main-pane.is-darkmode .day, html.constructor .main-pane.is-darkmode .timejournal__status { color: #797d7f; } html.constructor .main-pane.is-darkmode .timejournal__item { color: #ECE9E1 !important; } html.constructor .main-pane.is-darkmode .day, html.constructor .main-pane.is-darkmode .timejournal__status { color: #bfbfbf !important; } html.constructor .main-pane.is-darkmode .entry { color: #797d7f; border-color: #36393c; } html.constructor .main-pane.is-darkmode .entry.is-selected { color: #ffffff; } html.constructor .main-pane.is-darkmode .separator { color: #babec3; background-color: #36393c; } html.constructor .main-pane.is-darkmode .table { background-color: #ffffff; color: #191919; } html.constructor .main-pane.is-darkmode .table__text--with-icon { color: #3d4043; } html.constructor .main-pane.is-darkmode .overlay__section { color: #ECE9E1; background-color: #36393c; } html.constructor .main-pane.is-darkmode .filter { background: #191919; color: #ECE9E1; } html.constructor .main-pane.is-darkmode .search-controls { color: #ECE9E1; } html.constructor .main-pane.is-darkmode .search-result-container ul li.selection-pinned { background-color: #B71BA0; } html.constructor .main-pane.is-darkmode .color-themed-state-red, html.constructor .main-pane.is-darkmode .list__text--state.red { color: #ff453a; } html.constructor .main-pane.is-darkmode .color-themed-state-green, html.constructor .main-pane.is-darkmode .list__text--state.green { color: #34d775; } html.constructor .main-pane.is-darkmode .color-themed-state-blue { color: #14a9ff; } html.constructor .main-pane.is-darkmode .content__fixed.bg-white, html.constructor .main-pane.is-darkmode .content__fixed.input, html.constructor .main-pane.is-darkmode .content__fixed.input--search { background-color: #36393c; } html.constructor .main-pane.is-darkmode .modalcontainer .modal .content { color: #191919; } html.constructor .main-pane.is-darkmode .modalcontainer .modal .content h1, html.constructor .main-pane.is-darkmode .modalcontainer .modal .content h3 { color: #621764 !important; } html.constructor .main-pane.is-darkmode .signature-modal-title { --color-bg-signature-modal-title: #B71BA0; } html.constructor .main-pane.is-darkmode .signature-modal-button-group { --color-bg-signature-modal-button-group: #191919; } html.constructor .main-pane.is-darkmode .products__item--home-0 { background-size: 130%; margin-left: -10%; width: auto; background-image: url(images/splashscreens/constructor_dark.svg); } html.constructor .main-pane.is-darkmode .home--detail__logo { background-image: url(images/splashscreens/constructor_dark.svg); width: 100%; height: 20vh; background-size: cover; margin-top: -1.75rem; } /*======================================================== base ======================================================== */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type=checkbox], input[type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type=search] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Base-Styles Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS general_html general_states clearfix --------------------------------------------------- */ /*======================================================== general_html ======================================================== */ html { width: 100%; height: 100%; font-family: "Roboto", "Arial", sans-serif; font-size: 16px; overflow: hidden; -webkit-user-select: none; user-select: none; } img { -webkit-touch-callout: none !important; } a, button { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; } input::-webkit-calendar-picker-indicator, input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*======================================================== general_states ======================================================== */ /*======================================================== clearfix ======================================================== */ .clearfix:before, .table__column:before, .button-group:before, .list__button:before, .list__item:before, .clearfix:after, .table__column:after, .button-group:after, .list__button:after, .list__item:after { content: ""; display: table; } .clearfix:after, .table__column:after, .button-group:after, .list__button:after, .list__item:after { clear: both; } /*======================================================== layout ======================================================== */ /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Layout Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS app main_pane content row --------------------------------------------------- */ /*======================================================== app ======================================================== */ .app { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } /*======================================================== main_pane ======================================================== */ .main-pane { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: #ffffff; } .main-pane input:autofill { background: #ffffff; } .main-pane input[type=number], .main-pane input[type=number]:focus, .main-pane input[type=number]:hover, .main-pane input[type=date], .main-pane input[type=date]:focus, .main-pane input[type=date]:hover { -moz-appearance: textfield; } .main-pane input:placeholder-shown { color: #3d4043; } .main-pane h1, .main-pane h3 { color: var(--color-accent); } .main-pane h4 { margin: 1em 0; } .main-pane.is-revealed { box-shadow: -5px 0 3px -3px #000; -webkit-box-shadow: -5px 0 3px -3px #000; } .no-home .main-pane { box-shadow: 0 2rem var(--color-accent); -webkit-box-shadow: 0 2rem var(--color-accent); bottom: 2rem; } .no-home .main-pane.is-revealed { box-shadow: -5px 0 3px -3px #000, 0 2rem var(--color-accent); -webkit-box-shadow: -5px 0 3px -3px #000, 0 2rem var(--color-accent); bottom: 2rem; } .no-home .main-pane.cover-navigation, .no-home .main-pane.reveal-navigation { bottom: 0; } /*======================================================== content ======================================================== */ .content { position: absolute; top: 2.813rem; left: 0; right: 0; bottom: 0; } .main-pane.is-revealed .content:after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .content.has-message-box { top: 6.563rem; } .no-home .cover-navigation .content, .no-home .reveal-navigation .content { box-shadow: 0 2rem var(--color-accent); -webkit-box-shadow: 0 2rem var(--color-accent); bottom: 2rem; } .content .splash-html { display: grid; min-height: 100%; } .content .splash-html__logo { --logo-size: 300px; justify-self: center; position: sticky; position: -webkit-sticky; top: calc(50% - var(--logo-size) / 2); margin-bottom: calc(-1 * var(--logo-size)); width: var(--logo-size); height: var(--logo-size); z-index: 0; background-size: contain; } .content .splash-html__logo.inactive { opacity: 0.3; } .content .splash-html__logo.large { --logo-size: calc(100vmin - 1.3rem - 2.813rem); } .no-home .content .splash-html__logo.large { --logo-size: calc(100vmin - 1.3rem - 2.813rem - 2rem); } .content .splash-html > * { z-index: 1; } .content__fixed { bottom: 0; box-shadow: 0 -1px 1px -1px var(--color-box-shadow, #000); position: fixed; width: 100%; } .no-home .content__fixed { box-shadow: 0 -1px 1px -1px var(--color-box-shadow, #000), 0 2rem var(--color-accent); -webkit-box-shadow: 0 -1px 1px -1px var(--color-box-shadow, #000), 0 2rem var(--color-accent); bottom: 2rem; } .is-sliding-right, .is-sliding-left { transform: none !important; } /*======================================================== row ======================================================== */ .row { margin-top: 1.25rem; } .row:first-child { margin-top: 0; } .row--small { margin-top: 0.313rem; } .row--small:first-child { margin-top: 0; } .row--bottom { margin-bottom: 1.25rem; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Slider Media: screen Responsive: smartphone --------------------------------------------------- */ .slider { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; } .slider__left { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; } .slider__right { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Scroller Media: screen Responsive: smartphone --------------------------------------------------- */ .scroller { bottom: 0; left: 0; overflow-y: scroll; overflow-x: hidden; position: absolute; right: 0; top: 0; -webkit-overflow-scrolling: touch; } .android .scroller { overflow-y: auto; } .scroller .iframe-full { width: calc(100% - 2rem); height: calc(100% - 2rem); position: absolute; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Nav Media: screen Responsive: smartphone --------------------------------------------------- */ .nav { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .nav__inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 80%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .android .nav__inner { overflow-y: auto; } @media screen and (min-width: 768px) { .android .nav__inner { width: 30%; } } .no-home .nav__inner.list { border-bottom: 2rem var(--color-accent) solid; } .nav__item { height: 3rem; border-bottom: 1px solid; background-repeat: no-repeat; background-size: 2rem; background-position: 0.75rem 0.438rem; z-index: 11; } .nav__item:first-child { border-top: 1px solid; } .nav__item .svg-icon { width: 2rem; margin-left: 0.75rem; } .nav__item .svg-icon svg { padding-top: 0.438rem; } .nav__external-icon { float: left; width: 2rem; margin-left: 0.75rem; margin-top: 0.438rem; margin-right: 1rem; } .nav__button { display: block; width: 100%; font-size: 0.875rem; line-height: 3rem; text-align: left; padding: 0 0 0 3.75rem; border: none; background: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; } .nav__button--has-external-icon { padding: 0; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Toolbar Media: screen Responsive: smartphone --------------------------------------------------- */ .toolbar, .toolbar--filter { position: absolute; top: 0; left: 0; right: 0; height: 2.813rem; } .toolbar__button, .toolbar__button--right { float: left; padding: 0; width: 2.813rem; height: 2.813rem; border: none; background-color: inherit; background-size: 1.25rem; background-position: center; background-repeat: no-repeat; } .toolbar__button .svg-icon, .toolbar__button--right .svg-icon { width: 2.2rem; margin: 0.3rem; } .toolbar__button.is-bezeled, .is-bezeled.toolbar__button--right { background-size: 1.875rem; } .toolbar__button.is-bezeled.svg-icon, .is-bezeled.svg-icon.toolbar__button--right { width: 1.875rem; } .toolbar__button > img, .toolbar__button--right > img { visibility: hidden; } .toolbar__button.control, .control.toolbar__button--right { margin: 0.625rem; } .toolbar__button--right { float: right; } .toolbar__button--right.is-material { font-size: 24px !important; color: #ffffff !important; } .toolbar__title { text-align: center; color: #ffffff; line-height: 2.813rem; overflow: auto; white-space: nowrap; text-overflow: ellipsis; padding: 0 0.625rem; margin: 0 2.813rem; } .toolbar__title.has-small-font { font-size: 0.8rem; } /*======================================================== modules ======================================================== */ /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: List Media: screen Responsive: smartphone --------------------------------------------------- */ .list { list-style: none; margin: 0; padding: 0; } .ble-gat-lockers .list { list-style: none; margin: 0 auto; padding: 0; width: 90vw; min-width: 90vw !important; max-width: 90vw !important; } .list__item { border-bottom: 1px solid; padding: 0.313rem 0.625rem; position: relative; min-height: 57px; } .list__item .svg-icon { width: 2.938rem; float: left; } .list__item .list__item-arrow { width: 2.2rem; position: absolute; top: 0.625rem; right: 0; } .list__item .button__icon > .svg-icon, .list__item .button__icon--right > .svg-icon { width: 1.25rem; margin: 0; float: none; } .list__item--no-padding { padding: 0; } .list__button { display: block; width: 100%; padding: 0.313rem 0.625rem; text-align: left; border: none; background-color: inherit; background-repeat: no-repeat; background-position: 98.5% center; background-size: 1.25rem; } .list__text { margin: 0.438rem 1.875rem 0 3.438rem; } .list__text--state { margin: 0.25rem 1.875rem 0 3.438rem; } .list__text--state.blue { color: var(--color-link, #007aff); } .list__text--floated { margin: 0.25rem 0 0 0.5rem; } .list__action-button { margin: 0.625rem 0 0.625rem 3.438rem; } .list__occurrence { border-radius: 100%; height: 1.2rem; line-height: 1.2rem; position: absolute; right: 0; text-align: center; top: 0.67rem; width: 1.2rem; } .locker-list__item { border-bottom: unset; } .locker-list__item-text { align-self: center; } .ble-gat-lockers { margin-bottom: 1rem; } @media screen and (min-width: 900px) { .ble-gat-lockers .list { max-width: 900px !important; margin-left: calc(50% - 445px); margin-right: auto; min-width: 100% !important; } } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Loader Media: screen Responsive: smartphone --------------------------------------------------- */ .loader, .loader--registration, .loader--loading { margin-top: 0.5rem; margin-left: auto; margin-right: auto; background-size: 100%; } .loader--loading { margin-top: 2.5rem; min-height: 2.5rem; } .loader--registration { margin-top: 0.625rem; } .loader--icon { width: 1.25rem; height: 1.25rem; line-height: 1; margin: 0; background-size: 100%; animation: rotate 1s linear infinite; -webkit-animation: rotate 1s linear infinite; background-repeat: no-repeat; position: absolute; z-index: 2; right: 3.5rem; } .loader--icon > .svg-icon { transform: scale(1.8); transform-origin: 47.5% 44.5%; } .loader--button { width: 1.25rem; height: 1.25rem; margin: -0.3rem 0; background-size: 100%; float: left; flex-shrink: 0; animation: rotate 1s linear infinite; -webkit-animation: rotate 1s linear infinite; } .loader--button-ble { width: 1.25rem; height: 1.25rem; right: 3.5rem; top: 1rem; background-size: 100%; animation: rotate 1s linear infinite; -webkit-animation: rotate 1s linear infinite; background-repeat: no-repeat; position: absolute; justify-self: center; } .loader--inline { display: inline; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Overlay Media: screen Responsive: smartphone --------------------------------------------------- */ .overlay, .overlay--fogged { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem; } .overlay__offline-count { top: 50px; left: 78%; font-size: 0.55rem; right: unset; bottom: unset; padding: unset; z-index: 1; } .overlay--fogged { background-color: var(--color-background); } .overlay__section { margin-bottom: 1px; padding: 1.125rem 1.875rem; box-sizing: border-box; } .overlay__section:last-child { margin-bottom: 0; } .overlay__video { width: 100%; background-image: url(images/accesspoint_video_dummy.png); background-size: 100%; background-repeat: no-repeat; background-position: center; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Card Media: screen Responsive: smartphone --------------------------------------------------- */ .card { border-radius: 2px; overflow: hidden; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Paragraph Media: screen Responsive: smartphone --------------------------------------------------- */ .paragraph { margin: 0.625rem 0; } .paragraph:first-child { margin-top: 0; } .paragraph:last-child { margin-bottom: 0; } .paragraph--centered { height: 4.375rem; line-height: 4.375rem; text-align: center; margin: 0; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Form Media: screen Responsive: smartphone --------------------------------------------------- */ .form--centered { text-align: center; } .form__element { padding: 0.2rem 0; margin: 0.2rem 0; } .form__label { display: block; line-height: 2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } .form__label.is-inactive { opacity: 0.5; } .form__checkbox { margin: 0.25rem 1.25rem 0 0; } .form__radio { margin: 0.25rem 1.25rem 0 0; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Input Media: screen Responsive: smartphone --------------------------------------------------- */ .custom-login-rfid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; } .custom-login-input { margin-left: auto; margin-right: auto; margin-top: 0.75rem; width: 15rem; position: relative; display: block; } .input, .input--search { border: 2px solid; border-radius: var(--input-border-radius, 2px); box-shadow: none; box-sizing: border-box; font-size: 0.938rem; line-height: 1.875rem; outline: none; padding: 0.25rem; text-align: center; transition: border-color 0.3s ease-out; } .input::placeholder, .input--search::placeholder { color: var(--color-accent); } .input:disabled, .input--search:disabled { opacity: 0.3; background-color: initial; } .input[type=date], [type=date].input--search { display: block; } .input[type=date].is-legacy-ios, [type=date].is-legacy-ios.input--search { -webkit-appearance: none; text-align: -webkit-center; padding: 0; padding-left: 1rem; } .input[type=time], [type=time].input--search { -webkit-appearance: none; text-align: center !important; padding: 0; padding-left: 1rem; } .app.ios .input[type=number], .app.ios [type=number].input--search { text-align: right !important; text-align: -webkit-right !important; } .is-legacy-ios input[type=date], .is-legacy-ios input[type=time] { -webkit-appearance: none !important; text-align: center !important; text-align: -webkit-center !important; padding: 0; padding-left: 1rem; } .app.ios .is-legacy-ios input[type=number] { text-align: right !important; text-align: -webkit-right !important; -webkit-appearance: none; } .is-legacy-ios.input--date-or-time input { -webkit-appearance: none !important; text-align: center !important; text-align: -webkit-center !important; padding: 0; padding-left: 0.5rem; } .input--search { margin-left: auto; margin-right: auto; display: block; width: calc(100vw - 3rem); -webkit-appearance: none !important; } .input--overlay { border: none; margin-top: 0.438rem; padding: 0.188rem 0.563rem; width: 10rem; } .input--maintenance { font-size: 0.938rem; line-height: 1.25rem; padding: 0.188rem 0.75rem; text-align: left; width: 100%; } .input--form { border: 2px solid; display: block; font-size: 0.813rem; height: 2rem; line-height: 1.75rem; margin-left: 1.25rem; text-align: right; width: 7rem; } .app.ios .input--form { text-align: left; } .input--item { border: 2px solid; display: block; font-size: 0.813rem; height: 2rem; line-height: 1.75rem; margin: -0.25rem 0; text-align: right; width: 7rem; } .app.ios .input--item { text-align: left; } .input--textarea { height: auto; line-height: 1.25rem; margin: 0; text-align: left; width: 100%; -webkit-appearance: none; } .input--select { background-color: #ffffff; border: 2px solid; display: inline-block; font-size: 0.813rem; height: 2.125rem; padding: 0; padding-right: 2.188rem; padding-left: 0.25rem; text-align: left; -webkit-appearance: none; } .input--select option { color: var(--color-text-muted, #282828); } .input--select__label { position: relative; } .input--select__label:after { position: absolute; content: ""; background: url("images/content_60/button_select_box.png") no-repeat right; background-size: 100%; right: 0.625rem; top: 0.375rem; width: 1.125rem; height: 0.625rem; pointer-events: none; } .input--checkbox { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; background-color: initial; background-size: 1rem; background-repeat: no-repeat; background-position: center center; } .input--checkbox:checked { background-image: url("images/checkmark_60/checkmark_active.png"); } .input--checkbox:disabled { opacity: 0.5; background-image: url("images/checkmark_60/checkmark_invalid.png"); } .input--checkbox:checked:disabled { opacity: 0.5; } .input--radio { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 500px; border: 0.125rem solid; background-color: #ffffff; } .input--radio::after { content: ""; display: block; width: 0.5rem; height: 0.5rem; box-sizing: border-box; border-radius: 500px; margin: 0.4rem; } .input--radio:checked::after { background-color: #ffffff !important; } .input--radio:disabled { opacity: 0.5; } .input--radio:checked:disabled { opacity: 0.5; } .input--radio:checked:disabled::after { background-color: #ffffff !important; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Button Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS button_group button button_behaviour button_position button_themes --------------------------------------------------- */ /*======================================================== button_group ======================================================== */ .button-group { position: relative; } .button-group--centered { display: flex; justify-content: center; gap: 1.25rem; } /*======================================================== button ======================================================== */ .button, .button--full-width, .button--right, .button--middle, .button--float, .button--left, .button--inline, .button--flex-width, .button--square, .button--form { background-color: var(--button-bg-color, #ffffff); color: var(--button-text-color, #007aff); padding: var(--button-padding, 0.563rem 0.75rem); border: var(--button-border, 1px solid var(--button-border-color, var(--button-bg-color, #ffffff))); display: flex; justify-content: center; align-items: center; width: 8.125rem; padding: 0.625rem 0.625rem; position: relative; font-size: 0.938rem; font-weight: 500; border-radius: var(--button-border-radius, 2px); line-break: auto; min-width: fit-content; min-width: -moz-fit-content; min-width: -webkit-fit-content; --gap: 0.625rem; margin-left: calc(-1 * var(--gap) / 2); margin-right: calc(-1 * var(--gap) / 2); min-height: 2.375rem; } @media screen and (min-width: 720px) { .button, .button--full-width, .button--right, .button--middle, .button--float, .button--left, .button--inline, .button--flex-width, .button--square, .button--form { width: 25vw; } } @media screen and (min-width: 720px) { .button, .button--full-width, .button--right, .button--middle, .button--float, .button--left, .button--inline, .button--flex-width, .button--square, .button--form { width: 25vw; } } .button > *, .button--full-width > *, .button--right > *, .button--middle > *, .button--float > *, .button--left > *, .button--inline > *, .button--flex-width > *, .button--square > *, .button--form > * { padding-left: calc(var(--gap) / 2); padding-right: calc(var(--gap) / 2); box-sizing: content-box; } .button__can-redo { opacity: 0.7; } .button__no-min-width { min-width: unset; } .button__icon, .button__icon--right { display: inline-block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; line-height: 1; margin: -50% 0; background-position: center; background-size: 100%; background-repeat: no-repeat; transform-origin: center; } .button__icon > .svg-icon, .button__icon--right > .svg-icon { transform: scale(1.8); transform-origin: 47.5% 44.5%; } .button__desc { font-size: 0.938rem; left: 8.125rem; right: 8.125rem; margin: 0; overflow: hidden; padding: 0.625rem; position: absolute; text-align: center; text-overflow: ellipsis; white-space: nowrap; } @media screen and (min-width: 720px) { .button__desc { left: 25vw; right: 25vw; } } .button__desc.is-inactive { opacity: 0.5; } .button__desc--left { left: 2.313rem; } .button__desc--right { right: 2.313rem; } .button--rotate { animation: rotate 1s linear infinite; -webkit-animation: rotate 1s linear infinite; } /*======================================================== button_behaviour ======================================================== */ .button--align-left { text-align: left; } .button--form { margin-left: auto; margin-right: auto; margin-top: 0.75rem; --button-padding: 0.625rem; width: 10rem; } .button--form:first-child { margin-top: 0; } .button--square { height: 2.313rem; width: 2.313rem; } /*======================================================== button_position ======================================================== */ .button--flex-width { width: auto; max-width: 85%; --button-padding: 0.625rem 0.938rem; } .button--inline { display: inline-flex; margin-left: 1rem; } @media screen and (min-width: 720px) { .button--inline { margin-left: 10vw; } } .button--inline:first-child { margin-left: 0; } .button--left { float: left; } @media screen and (min-width: 720px) { .button--left { width: 22.5vw; } } .button--middle, .button--float { margin-left: auto; margin-right: auto; } .button--right { float: right; } @media screen and (min-width: 720px) { .button--right { width: 22.5vw; } } .button--full-width { margin-left: auto; margin-right: auto; width: 90vw; min-width: 90vw !important; max-width: 90vw !important; } .button--float { --button-bg-color: var(--color-accent-dark); --width: 100px; width: var(--width); width: 100px; height: var(--width); display: flex; flex-direction: column; gap: 0; font-size: 0.8em; border-radius: 99rem; position: fixed; bottom: 5%; left: calc(50% - var(--width) / 2); z-index: 9; transition: transform 0.3s linear, opacity 0.3s linear; overflow: hidden; } .button--float .material-icons { font-size: calc(var(--width) * 0.6); } .main-pane.is-revealed .button--float, .main-pane.reveal-navigation .button--float { transform: translateX(30vw); opacity: 0; pointer-events: none; } .main-pane.is-covered .button--float { transform: translateX(0); pointer-events: auto; } .main-pane .slider .button--float { transform: translateX(100vw); opacity: 0; } .main-pane .slider.is-showing-right .button--float { transform: translateX(0); opacity: 1; transition: transform 0.3s linear, opacity 0.3s 0.3s linear; } /*======================================================== button_themes ======================================================== */ .button--action { padding: 0.25rem 0.5rem; } .button:disabled, .button--form:disabled, .button--square:disabled, .button--flex-width:disabled, .button--inline:disabled, .button--left:disabled, .button--middle:disabled, .button--right:disabled, .button--full-width:disabled, .button--float:disabled { opacity: 0.3; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Icon Media: screen Responsive: smartphone --------------------------------------------------- */ .icon { width: 2.938rem; height: 2.938rem; background-size: 100%; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Table Media: screen Responsive: smartphone --------------------------------------------------- */ .table { width: 100%; padding: 0; margin: 0; border-spacing: 0; border-bottom: 2px solid; } .table__row { width: 100%; } .table__column { border-bottom: 2px solid; border-right: 2px solid; padding: 0.375rem 0.625rem; box-sizing: border-box; vertical-align: top; } .table__column:last-child { border-right: none; } .table__column .svg-icon { width: 2.2rem; margin: 0.3rem 0.35rem 0; float: left; } .table__text { margin: 0; } .table__text--with-icon { margin: 0 0 0 3.125rem; } .table__text--with-icon:first-of-type { margin-top: 0.375rem; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Text Media: screen Responsive: smartphone --------------------------------------------------- */ .text { font-size: 1rem; line-height: 1.1; } .text--small { line-height: 1.4; font-size: 0.75rem; } .text--medium { font-size: 0.875rem; } .dash { padding: 0 0.938rem; } .almost-hidden-build-number { opacity: 0.1; line-height: 0rem; font-size: 0.6rem; float: right; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Message Box Media: screen Responsive: smartphone --------------------------------------------------- */ .message-box { position: absolute; left: 0; top: 2.813rem; right: 0; height: 3.75rem; text-align: center; transition: background-color 300ms linear; box-sizing: border-box; z-index: 1; } .message-box--timetracking { position: relative; top: 0; height: 5.625rem; padding: 0.375rem; z-index: 0; } .message-box__loader-fog { width: 100%; height: 100%; background-color: #bfbfbf; } .message-box__loader { position: absolute; top: 25%; left: 50%; margin-left: -1.25rem; margin-top: -0.188rem; } .message-box__entry { line-height: 3.75rem; font-size: 0.938em; margin: 0; padding: 0 1em; } .message-box__entry--small-font { font-size: 0.75em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .message-box__entry--two-rows { font-size: 0.938em; line-height: 1; margin-bottom: 0.375rem; margin-top: 0; } .message-box__entry--two-rows:first-child { margin-top: 0.75rem; } .message-box__entry--two-rows:last-child { margin-bottom: 0.75rem; } .message-box__entry--timetracking { line-height: 1.375rem; font-size: 0.938em; margin: 0.375rem 0; } .message-box__entry--timetracking:first-child { margin-top: 0; } .message-box__entry--timetracking:last-child { margin-bottom: 0; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Image Media: screen Responsive: smartphone --------------------------------------------------- */ .image { width: 100%; display: block; } .takePhotoCanvas { position: absolute; display: none; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Html Media: screen Responsive: smartphone --------------------------------------------------- */ .html { margin: 1rem; line-height: 150%; } .html--dashboard { margin: 0; } .html--item { margin: -0.625rem 0; } .html h1, .separator h1 { font-family: "Roboto", "Arial", sans-serif; font-size: 1.25rem; font-weight: 500; margin: 1rem 0; } .html h2, .separator h2 { font-family: "Roboto", "Arial", sans-serif; font-size: 1.125rem; font-weight: 500; margin: 0.67rem 0; } .html h3, .separator h3 { font-weight: 400; margin: 0.67rem 0; } .html p, .separator p { margin: 0.67rem 0; word-wrap: break-word; } .html a, .separator a { text-decoration: none; } .html ul, .separator ul { margin: 0 1.25rem; padding: 0; } .html ol, .separator ol { margin: 0 1.5rem; padding: 0; } .html li, .separator li { padding: 0 0.313rem; } .html img, .separator img { max-width: 100%; margin: 1rem 0; display: block; } .html table, .separator table { width: 100%; padding: 0; margin: 0.67rem 0; border-spacing: 0; } .html tr, .separator tr { width: 100%; } .html th, .html td, .separator th, .separator td { text-align: left; padding: 0; /*padding: 0.375rem 0.625rem;*/ box-sizing: border-box; } .html th:last-child, .html td:last-child, .separator th:last-child, .separator td:last-child { border-right: none; } .html hr, .separator hr { border: none; border-bottom: 1px solid; margin: 0.625rem -0.625rem 0.5rem -0.625rem; } .link-to-route, .action-to-server, .action-logout { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Filter Media: screen Responsive: smartphone --------------------------------------------------- */ .filter { position: absolute; top: 100%; width: 100%; height: 100%; z-index: 1; background-color: rgb(250, 250, 250); } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Item Media: screen Responsive: smartphone --------------------------------------------------- */ .item { position: relative; padding: 0.625rem; } .item:last-child { border-bottom: none; } @media screen and (min-width: 900px) { .item.fit-width { max-width: 900px; margin-left: calc(50% - 445px); margin-right: auto; } .item.fit-width .input--search { max-width: 900px; margin-left: calc(50% - 445px); margin-right: auto; width: 100%; } .item.fit-width .search-result-container { max-width: 900px; margin-left: calc(50% - 445px); margin-right: auto; } .item.fit-width .search-controls { max-width: 900px; margin-left: calc(50% - 445px); margin-right: auto; } .item.fit-width .button--inline { max-width: 225px; } .item.fit-width .button--full-width { max-width: 900px !important; margin-left: calc(50% - 445px); margin-right: auto; min-width: 100% !important; } } .item__select { width: 100%; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Separator Media: screen Responsive: smartphone --------------------------------------------------- */ .separator { padding: 0.625rem; line-height: 1.125rem; min-height: 1.125rem; } .separator p, .separator * { margin: 0; } .separator--item { margin: -0.625rem; margin-top: 0.125rem; margin-bottom: 0.125rem; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Label Media: screen Responsive: smartphone --------------------------------------------------- */ .label { display: inline-block; line-height: 1.125rem; max-width: 100%; } .label.is-inactive { opacity: 0.5; } .label.is-short-label { max-width: calc(100vw - 5rem); } .label.is-shortest-label { max-width: calc(100vw - 9.5rem); } .label--overlay { display: block; font-size: 0.75rem; margin-top: 1rem; } .label--overlay:first-of-type { margin-top: 0; } .radio-form-label { line-height: 1.125rem; overflow: visible; white-space: unset; text-overflow: unset; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Switch Media: screen Responsive: smartphone --------------------------------------------------- */ .switch { position: relative; width: 2.25rem; height: 1.5rem; border: 2px solid; border-radius: 500px; background: none; box-sizing: border-box; } .switch .switch__inner { position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; border-radius: 500px; transition-property: left, background-color; transition-duration: 0.3s; } .switch .switch__inner.is-switched-on { left: 0.75rem; } .switch:disabled { opacity: 0.5; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Header Media: screen Responsive: smartphone --------------------------------------------------- */ .header1 { font-family: "Roboto", "Arial", sans-serif; font-size: 1.25rem; font-weight: 500; margin: 1rem 0; } .header1:first-child { margin-top: 0.375rem; } .header1.is-darkmode { color: #babec3; } .header2 { font-family: "Roboto", "Arial", sans-serif; font-size: 1.125rem; font-weight: 500; margin: 0.67rem 0; } .search-result { position: absolute; display: flex; flex-direction: column; } .search-result-container { opacity: 1; background-color: var(--color-background); z-index: 1; max-height: 11.25rem; overflow-y: scroll; border-top: 1px solid #BFBFBF !important; border-left: 2px solid #BFBFBF !important; border-right: 2px solid #BFBFBF !important; border-bottom: 2px solid #BFBFBF !important; margin-left: 0.5rem; width: calc(100vw - 2.25rem); border-color: var(--color-search-results) !important; } @media screen and (min-width: 800px) { .search-result-container { margin-left: unset; width: calc(100vw - 1.25rem); } } .icon--search-check { width: 1.469rem; height: 1.469rem; background-size: 100%; } .search-container { margin-top: 0.75rem; } .search-container .svg-icon { position: absolute; width: 2rem; margin: 0.3rem 1rem; } .search-container .loader--icon { right: 2rem; bottom: 1.3rem; } .search-container .loader--icon .svg-icon { position: absolute; width: inherit; margin: 0; } .search-label { max-width: 85vw; } @media screen and (min-width: 800px) { .search-label { max-width: 96.5vw; } } .input--search_icon { display: inline-block; position: relative; margin-left: 1rem; opacity: 0.5; top: 3rem; } .search-result-item { background-color: var(--color-background, #ffffff); border-color: transparent !important; min-height: auto; } .search-result-item.is-deactivated { opacity: 1; } .search-result-item p { margin-left: 1rem; } @media screen and (min-width: 800px) { .search-result-item p { margin-left: 1.875rem; } } .button-send-search { top: 5px; } .search-controls { background-color: var(--color-search-results); z-index: 1; height: 3.5rem; margin-top: -1px; margin-right: -1px; border-top: 0; border-left: 2px solid #BFBFBF; border-right: 2px solid #BFBFBF; border-bottom: 2px solid #BFBFBF; width: calc(100vw - 2.25rem); margin-left: 0.5rem; border-color: var(--color-search-results) !important; border-radius: 0 0 2px 2px; padding: 0.3rem 0.75rem 0.3rem 0; } @media screen and (min-width: 800px) { .search-controls { margin-left: unset; width: calc(100vw - 1.25rem); } } .search-controls p { margin-left: 1.5rem; margin-right: -8rem; margin-top: 1rem; } @media screen and (min-width: 800px) { .search-controls p { margin-left: 4rem; } } .selection-pinned { opacity: 1 !important; pointer-events: inherit !important; } .selection-pinned .svg-icon { right: 0.3rem; margin: 0; width: 2.4rem; top: -0.1rem; } .control { border: 1px solid var(--control-border-color, var(--control-bg-color, #ffffff)); background-color: transparent; float: right; margin-top: -0.2rem; padding: 0; height: 1.5rem; width: 1.5rem; border-radius: var(--control-border-radius, 2px); } .control .svg-icon { width: 1.191rem; margin: auto; height: 1.191rem; } .control-inactive { opacity: 0.25; } .signature-modal { position: fixed; width: 100vw; height: 100vh; background-color: rgba(54, 57, 60, 0.95); top: 0; left: 0; z-index: 10; } .signature-modal-title { position: relative; background: var(--color-bg-signature-modal-title, #621764); color: #f9fafb; left: 5vw; padding: 0.5rem; font-size: 1.25rem; width: 90vw !important; max-width: 90vw !important; } @media (orientation: portrait) { .signature-modal-title { top: 9vh; } } @media (orientation: landscape) { .signature-modal-title { top: 15vh; } } @media screen and (min-width: 850px) { .signature-modal-title { left: 5vw; top: 2.5vh; min-width: fit-content; min-width: -moz-fit-content; min-width: -webkit-fit-content; } } @media screen and (min-width: 750px) and (orientation: landscape) { .signature-modal-title { top: 4vh; } } @media screen and (min-width: 1020px) and (min-height: 740px) and (orientation: landscape) { .signature-modal-title { top: 6.5vh; } } .signature-canvas { position: relative; background-color: white; left: 5vw; width: 90vw; } @media (orientation: portrait) { .signature-canvas { top: 10vh; margin-bottom: 5rem; height: 69vh; } } @media (orientation: landscape) { .signature-canvas { top: 16vh; margin-bottom: 4.75rem; height: 50vh; } } @media screen and (min-width: 760px) and (orientation: portrait) { .signature-canvas { margin-bottom: 7rem; } } @media screen and (max-width: 600px) and (orientation: landscape) { .signature-canvas { margin-bottom: 3.75rem; } } @media screen and (max-width: 350px) and (orientation: portrait) { .signature-canvas { top: 10vh; margin-bottom: 4rem; height: 69vh; } } @media screen and (max-width: 350px) and (orientation: landscape) { .signature-canvas { top: 16vh; margin-bottom: 3.25rem; height: 50vh; } } @media screen and (min-width: 750px) and (orientation: landscape) { .signature-canvas { top: 5vh; margin-bottom: 1.5rem; height: 65vh; } } @media screen and (min-width: 850px) { .signature-canvas { left: 5vw; top: 2.5vh; } } @media screen and (min-width: 850px) and (orientation: portrait) { .signature-canvas { top: 3vh; margin-bottom: 2rem; height: 81.125vh; } } @media screen and (min-width: 850px) and (orientation: landscape) { .signature-canvas { top: 3.5vh; margin-bottom: 1.25rem; height: 70vh; } } @media screen and (min-height: 1000px) and (orientation: portrait) { .signature-canvas { margin-bottom: 7rem; } } @media screen and (min-height: 1200px) and (orientation: portrait) { .signature-canvas { margin-bottom: 8rem; } } @media screen and (min-width: 1000px) and (orientation: landscape) { .signature-canvas { margin-bottom: 2.25rem; } } @media screen and (min-width: 1020px) and (min-height: 740px) and (orientation: landscape) { .signature-canvas { top: 7.5vh; margin-bottom: 4.25rem; } } .signature-modal-button-group { position: relative; left: 5vw; background: var(--color-bg-signature-modal-button-group, #ffffff); max-width: 90vw; padding: 2vw 5vw; } .signature-modal-button { position: relative; display: inline-block; width: 44.5%; } .signature-modal-button:last-child { float: right; right: 0; } .scroller-overflow-override { overflow-x: visible !important; overflow-y: visible !important; } .modalcontainer { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 1; } .modal { position: absolute; width: 70vw; height: 35vh; background-color: #FFF; top: 10vh; left: 15vw; border-radius: 5px; } @media (orientation: portrait) { .modal { height: 50vh; } } @media (orientation: landscape) { .modal { width: 50vw; height: 70vh; left: 25vw; } } .modal .content { padding: 30px; padding-top: unset; } .modal .close { cursor: pointer; color: #FFF; width: 50px; height: 50px; text-align: center; line-height: 50px; position: absolute; right: 0; color: #999; font-size: 40px; } .modal .close span { transform: rotate(45deg); display: block; } /*======================================================== routes ======================================================== */ /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Products: Intrakey Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS products html_modifier --------------------------------------------------- */ /*======================================================== products ======================================================== */ .products { height: 100%; overflow: hidden; width: 100%; display: flex; flex-direction: column; } .products__item { display: flex; width: 100%; height: 100%; border-bottom: 1px solid #ffffff; background-size: cover; background-position: center center; background-repeat: no-repeat; } .products__item--logo { max-height: 16%; background-color: var(--color-background); } .products__item:last-child { border-bottom: none; } .products__button { position: relative; width: 100%; height: 100%; background: none; border: none; padding: 0; } .products__overlay, .products__overlay--top, .products__overlay--bottom { height: 3.75rem; background-color: #ffffff; position: absolute; opacity: 0.5; } .products__overlay--bottom { bottom: 0; right: 0; left: 0; } .products__overlay--top { top: 0; right: 0; left: 0; } .products__emblem, .products__emblem--icon, .products__emblem--top-right, .products__emblem--bottom-left { position: absolute; padding: 0 1.563rem; height: 1.875rem; line-height: 1.875rem; font-size: 0.938rem; color: #ffffff; box-sizing: border-box; border-radius: 2px; } .products__emblem--bottom-left { bottom: 0.938rem; left: 0.938rem; } .products__emblem--top-right { top: 0.938rem; right: 0.938rem; } .products__emblem--icon { padding: 0 1.563rem 0 3.75rem; } .products__emblem--icon .svg-icon { width: 2.75rem; height: 2.75rem; left: 3%; position: absolute; top: -23%; --icon-color-navi: #ffffff; --icon-color-accent-navi: #ffffff; } .home--detail__logo { display: block; background-repeat: no-repeat; background-position: center; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Timejournal Media: screen Responsive: smartphone --------------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS timejournal day entry --------------------------------------------------- */ /*======================================================== timejournal ======================================================== */ .timejournal__item { line-height: 2.5rem; } .timejournal__weekday { display: inline-block; text-transform: uppercase; width: 2.5rem; } .timejournal__status { line-height: 2.5rem; } /*======================================================== day ======================================================== */ .day__item { height: 1.875rem; line-height: 1.875rem; } .day__time { position: relative; display: inline-block; width: 2.5rem; } .day__icon { position: absolute; right: -0.5em; top: -0.25rem; display: block; width: 0.625rem; height: 0.625rem; background-size: 100%; background-repeat: no-repeat; } .day__icon .svg-icon { width: 0.875rem; } /*======================================================== entry ======================================================== */ .entry { display: block; width: 33.333%; border: none; padding: 0.625rem 0; box-sizing: border-box; font-size: 12px; } @media screen and (min-width: 600px) { .entry { font-size: 14px; } } @media screen and (min-width: 900px) { .entry { width: 25%; font-size: 16px; } } @media screen and (min-width: 1200px) { .entry { width: 20%; } } .entry.is-selected { color: #ffffff; } .entry:nth-child(n) { border-top: 2px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; border-radius: 5px; } .entry__icon { display: block; width: 4.125rem; height: 4.125rem; margin: -0.3rem auto -0.2rem auto; background-size: 100%; } @media screen and (min-width: 600px) { .timekey__block { max-width: 70vw; margin-left: 15vw; } } @media screen and (min-width: 900px) { .timekey__block { max-width: 70vw; margin-left: 15vw; } } @media screen and (min-width: 1200px) { .timekey__block { max-width: 66vw; margin-left: 17vw; } } @media screen and (min-width: 1500px) { .timekey__block { max-width: 60vw; margin-left: 20vw; } } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Maintenance Media: screen Responsive: smartphone --------------------------------------------------- */ .maintenance { margin: 1rem; line-height: 150%; } .maintenance__value { margin-top: -0.67rem; } /*======================================================== utilities ======================================================== */ /* ------------------------------------------- Author: click solutions GmbH Enrico Biermann Project: Intrakey-App Media: screen Responsive: no ------------------------------------------- TABLE OF CONTENT :: STYLE SECTIONS Devicestate Devicestate_Barrier Devicestate_Locker Devicestate_Tank Common Alert Devicestate_Availability Devicestate_Gender Devicestate_Controller Action Navi Timekey Devicestate_Battery Button Button_Content Devicestate_Door Presence_State Devicestate_Signal Checkmark devicestate_wash ------------------------------------------- */ /*======================================================== icon_fonts ======================================================== */ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: local("Material Icons"), local("MaterialIconsRound-Regular"), url("fonts/MaterialIconsRound-Regular.otf") format("opentype"); } .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 18px; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; vertical-align: text-bottom; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: "liga"; } .vert-align-bot { vertical-align: bottom; } .vert-align-mid { vertical-align: middle; } /* ======================================================== Common ======================================================== */ .common_clock2 { background-image: url("images/common/common_clock2.png"); } .common_note4 { background-image: url("images/common/common_note4.png"); } .common_door1 { background-image: url("images/common/common_door1.png"); } .common_note1 { background-image: url("images/common/common_note1.png"); } .common_hidden { background-image: url("images/common/common_hidden.png"); } .common_calendar { background-image: url("images/common/common_calendar.png"); } .common_lamp { background-image: url("images/common/common_lamp.png"); } .common_carwash { background-image: url("images/common/common_carwash.png"); } .common_parking { background-image: url("images/common/common_parking.png"); } .common_home { background-image: url("images/common/common_home.png"); } .common_hint3 { background-image: url("images/common/common_hint3.png"); } .common_auditorium { background-image: url("images/common/common_auditorium.png"); } .common_time_tracking { background-image: url("images/common/common_time_tracking.png"); } .common_idcard { background-image: url("images/common/common_idcard.png"); } .common_imprint { background-image: url("images/common/common_imprint.png"); } .common_grid { background-image: url("images/common/common_grid.png"); } .common_euro2 { background-image: url("images/common/common_euro2.png"); } .common_fleet_management { background-image: url("images/common/common_fleet_management.png"); } .common_controller { background-image: url("images/common/common_controller.png"); } .common_access_control { background-image: url("images/common/common_access_control.png"); } .common_book { background-image: url("images/common/common_book.png"); } .common_applications { background-image: url("images/common/common_applications.png"); } .common_keylock_open { background-image: url("images/common/common_keylock_open.png"); } .common_recruitment { background-image: url("images/common/common_recruitment.png"); } .common_schedule1 { background-image: url("images/common/common_schedule1.png"); } .common_lunch { background-image: url("images/common/common_lunch.png"); } .common_euro1 { background-image: url("images/common/common_euro1.png"); } .common_alarm { background-image: url("images/common/common_alarm.png"); } .common_note2 { background-image: url("images/common/common_note2.png"); } .common_person2 { background-image: url("images/common/common_person2.png"); } .common_schedule3 { background-image: url("images/common/common_schedule3.png"); } .common_print { background-image: url("images/common/common_print.png"); } .common_event { background-image: url("images/common/common_event.png"); } .common_train { background-image: url("images/common/common_train.png"); } .common_keylock_closed { background-image: url("images/common/common_keylock_closed.png"); } .common_person1 { background-image: url("images/common/common_person1.png"); } .common_map { background-image: url("images/common/common_map.png"); } .common_hint1 { background-image: url("images/common/common_hint1.png"); } .common_settings { background-image: url("images/common/common_settings.png"); } .common_pump { background-image: url("images/common/common_pump.png"); } .common_lockers { background-image: url("images/common/common_lockers.png"); } .common_card { background-image: url("images/common/common_card.png"); } .common_tank { background-image: url("images/common/common_tank.png"); } .common_battery { background-image: url("images/common/common_battery.png"); } .common_note3 { background-image: url("images/common/common_note3.png"); } .common_hint2 { background-image: url("images/common/common_hint2.png"); } .common_idcard2 { background-image: url("images/common/common_idcard2.png"); } .common_door2 { background-image: url("images/common/common_door2.png"); } .common_schedule2 { background-image: url("images/common/common_schedule2.png"); } .common_info { background-image: url("images/common/common_info.png"); } .common_canteen { background-image: url("images/common/common_canteen.png"); } .common_licence { background-image: url("images/common/common_licence.png"); } .common_purse { background-image: url("images/common/common_purse.png"); } .common_charge { background-image: url("images/common/common_charge.png"); } .common_transactions { background-image: url("images/common/common_transactions.png"); } .common_payment { background-image: url("images/common/common_payment.png"); } .common_ebike { background-image: url("images/common/common_ebike.png"); } .common_approval { background-image: url("images/common/common_approval.png"); } .common_request { background-image: url("images/common/common_request.png"); } .common_wash { background-image: url("images/common/common_wash.png"); } .common_projects { background-image: url("images/common/common_projects.png"); } .common_tasklist { background-image: url("images/common/common_tasklist.png"); } .common_timer { background-image: url("images/common/common_timer.png"); } .common_qr-code { background-image: url("images/common/common_qr-code.png"); } .common_qr-code--white { background-image: url("images/common/common_qr-code_white.png"); } .common_sign { background-image: url("images/common/common_sign.png"); } .common_sign--white { background-image: url("images/common/common_sign_white.png"); } /* ======================================================== Action ======================================================== */ .action_read { background-image: url("images/action_72/action_read.png"); } .action_attachment { background-image: url("images/action_72/action_attachment.png"); } .action_delete { background-image: url("images/action_72/action_delete.png"); } .action_more { background-image: url("images/action_72/action_more.png"); } .action_open { background-image: url("images/action_72/action_open.png"); } .action_open--light { background-image: url("images/action_72/action_open_light.png"); } .action_scan { background-image: url("images/action_72/action_scan.png"); } .action_filter { background-image: url("images/action_72/action_filter.png"); } .action_nofilter { background-image: url("images/action_72/action_filter.png"); } .action_search { background-image: url("images/action_72/action_search.png"); } .action_search--light { background-image: url("images/action_72/action_search_light.png"); } .action_forward { background-image: url("images/action_72/action_forward.png"); } .action_video { background-image: url("images/action_72/action_video.png"); } .action_video--light { background-image: url("images/action_72/action_video_light.png"); } /* ======================================================== Button_Content ======================================================== */ .button_abort_content { background-image: url("images/content_60/button_abort_content.png"); } .button_forward_arrow_content { background-image: url("images/content_60/button_forward_arrow_content.png"); } .button_forward_content { background-image: url("images/content_60/button_forward_content.png"); } .button_check_content { background-image: url("images/content_60/button_check_content.png"); } .button_choose_content { background-image: url("images/content_60/button_choose_content.png"); } .button_refresh_content { background-image: url("images/content_60/button_refresh_content.png"); } .button_refresh_button { background-image: url("images/content_60/button_refresh_button.png"); } .button_select_box { background-image: url("images/content_60/button_select_box.png"); } /* ======================================================== Checkmark ======================================================== */ .checkmark_active { background-image: url("images/checkmark_60/checkmark_active.png"); } .checkmark_inactive { background-image: url("images/checkmark_60/checkmark_inactive.png"); } .checkmark_active { background-image: url("images/checkmark_60/checkmark_invalid.png"); } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Floats Media: screen Responsive: smartphone --------------------------------------------------- */ .float-left { float: left; } .float-right { float: right; } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Animations Media: screen Responsive: smartphone --------------------------------------------------- */ @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } /* -------------------------------------------------- Author: click solutions GmbH Thomas Langemann Enrico Biermann Project: IntraKey App File: Display utils Media: screen Responsive: smartphone --------------------------------------------------- */ .is-hidden { display: none; } .is-blocked { opacity: 0; pointer-events: none; } .is-deactivated { opacity: 0.5; pointer-events: none; } .padding-one-rem { padding: 1rem; } .background-size-28px { background-size: 28px; } .d-flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .align-items-center { align-items: center; } .justify-content-between { justify-content: space-between; } .flex-column { flex-direction: column; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-1 { flex-shrink: 1; } .d-grid { display: grid; } .col-2 { grid-template-columns: 50% 50%; } .col-4 { grid-template-columns: 25% 25% 25% 25%; } .padding-right-5-percent { padding-right: 5%; } .padding-top-1-rem { padding-top: 1rem; } .margin-0 { margin: 0; } .margin-1-rem { margin: 1rem; } .margin-top-0 { margin-top: 0; } .margin-top-0-5-rem { margin-top: 0.5rem; } .margin-top-1-rem { margin-top: 1rem; } .margin-left-0 { margin-left: 0 !important; } .margin-left-auto { margin-left: auto; } .margin-left-1-5-rem { margin-left: 1.5rem; } .margin-left-5-rem { margin-left: 5rem; } .margin-left-6-rem { margin-left: 6rem; } .margin-left-7-rem { margin-left: 7rem; } .margin-left-8-rem { margin-left: 8rem; } .margin-left-9-rem { margin-left: 9rem; } .margin-right-1-5-rem { margin-right: 1.5rem; } .min-width-5-rem { min-width: 5rem; } .min-width-6-rem { min-width: 6rem; } .border-radius-6-px { border-radius: 6px; } .background-no-repeat { background-repeat: no-repeat; }