@charset "UTF-8"; /** * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) * * @author John Molakvoæ (skjnldsv) * * @license GNU AGPL version 3 or any later version * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as * published by the Free Software Foundation, either version 3 of the * License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Affero General Public License for more details. * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . * */ /** * @copyright Copyright (c) 2016, John Molakvoæ * @copyright Copyright (c) 2016, Morris Jobke * @copyright Copyright (c) 2016, Joas Schilling * @copyright Copyright (c) 2016, Julius Haertl * @copyright Copyright (c) 2016, jowi * @copyright Copyright (c) 2015, Joas Schilling * @copyright Copyright (c) 2015, Hendrik Leppelsack * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt * * @license GNU AGPL version 3 or any later version * */ /** * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) * * @author John Molakvoæ (skjnldsv) * * @license GNU AGPL version 3 or any later version * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as * published by the Free Software Foundation, either version 3 of the * License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Affero General Public License for more details. * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . * */ /** * @see core/src/icons.js */ /** * SVG COLOR API * * @param string $icon the icon filename * @param string $dir the icon folder within /core/img if $core or app name * @param string $color the desired color in hexadecimal * @param int $version the version of the file * @param bool [$core] search icon in core * * @returns A background image with the url to the set to the requested icon. */ /* Specifically override browser styles */ input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] { font-family: var(--font-face); } .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget { font-family: var(--font-face) !important; } .select2-container.select2-drop-above .select2-choice { background-image: unset !important; } /* Simple selector to allow easy overriding */ select, button:not(.button-vue, [class^=vs__]), input, textarea, div[contenteditable=true], div[contenteditable=false] { width: 130px; min-height: 36px; box-sizing: border-box; } /** * color-text-lighter normal state * color-text-lighter active state * color-text-maxcontrast disabled state */ input:not([type=range]) { outline: none; } /* Default global values */ div.select2-drop .select2-search input, input[type=submit], input[type=button], input[type=reset], button:not(.button-vue, [class^=vs__]), .button, .pager li a { margin: 3px 3px 3px 0; padding: 7px 14px; font-size: 13px; background-color: var(--color-main-background); color: var(--color-main-text); border: 1px solid var(--color-border-dark); font-size: var(--default-font-size); outline: none; border-radius: var(--border-radius); cursor: text; /* Primary action button, use sparingly */ } div.select2-drop .select2-search input:not(:disabled):not(.primary):hover, div.select2-drop .select2-search input:not(:disabled):not(.primary):focus, div.select2-drop .select2-search input:not(:disabled):not(.primary).active, input[type=submit]:not(:disabled):not(.primary):hover, input[type=submit]:not(:disabled):not(.primary):focus, input[type=submit]:not(:disabled):not(.primary).active, input[type=button]:not(:disabled):not(.primary):hover, input[type=button]:not(:disabled):not(.primary):focus, input[type=button]:not(:disabled):not(.primary).active, input[type=reset]:not(:disabled):not(.primary):hover, input[type=reset]:not(:disabled):not(.primary):focus, input[type=reset]:not(:disabled):not(.primary).active, button:not(.button-vue, [class^=vs__]):not(:disabled):not(.primary):hover, button:not(.button-vue, [class^=vs__]):not(:disabled):not(.primary):focus, button:not(.button-vue, [class^=vs__]):not(:disabled):not(.primary).active, .button:not(:disabled):not(.primary):hover, .button:not(:disabled):not(.primary):focus, .button:not(:disabled):not(.primary).active, .pager li a:not(:disabled):not(.primary):hover, .pager li a:not(:disabled):not(.primary):focus, .pager li a:not(:disabled):not(.primary).active { /* active class used for multiselect */ border-color: var(--color-primary-element); outline: none; } div.select2-drop .select2-search input:not(:disabled):not(.primary):active, input[type=submit]:not(:disabled):not(.primary):active, input[type=button]:not(:disabled):not(.primary):active, input[type=reset]:not(:disabled):not(.primary):active, button:not(.button-vue, [class^=vs__]):not(:disabled):not(.primary):active, .button:not(:disabled):not(.primary):active, .pager li a:not(:disabled):not(.primary):active { outline: none; background-color: var(--color-main-background); color: var(--color-text-light); } div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visible, input[type=submit]:not(:disabled):not(.primary):focus-visible, input[type=button]:not(:disabled):not(.primary):focus-visible, input[type=reset]:not(:disabled):not(.primary):focus-visible, button:not(.button-vue, [class^=vs__]):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible, .pager li a:not(:disabled):not(.primary):focus-visible { box-shadow: 0 0 0 2px var(--color-primary); } div.select2-drop .select2-search input:disabled, input[type=submit]:disabled, input[type=button]:disabled, input[type=reset]:disabled, button:not(.button-vue, [class^=vs__]):disabled, .button:disabled, .pager li a:disabled { background-color: var(--color-background-dark); color: var(--color-main-text); cursor: default; opacity: 0.5; } div.select2-drop .select2-search input:required, input[type=submit]:required, input[type=button]:required, input[type=reset]:required, button:not(.button-vue, [class^=vs__]):required, .button:required, .pager li a:required { box-shadow: none; } div.select2-drop .select2-search input:user-invalid, input[type=submit]:user-invalid, input[type=button]:user-invalid, input[type=reset]:user-invalid, button:not(.button-vue, [class^=vs__]):user-invalid, .button:user-invalid, .pager li a:user-invalid { box-shadow: 0 0 0 2px var(--color-error) !important; } div.select2-drop .select2-search input.primary, input[type=submit].primary, input[type=button].primary, input[type=reset].primary, button:not(.button-vue, [class^=vs__]).primary, .button.primary, .pager li a.primary { background-color: var(--color-primary-element); border-color: var(--color-primary-element); color: var(--color-primary-text); cursor: pointer; /* Apply border to primary button if on log in page (and not in a dark container) or if in header */ } #body-login :not(.body-login-container) div.select2-drop .select2-search input.primary, #header div.select2-drop .select2-search input.primary, #body-login :not(.body-login-container) input[type=submit].primary, #header input[type=submit].primary, #body-login :not(.body-login-container) input[type=button].primary, #header input[type=button].primary, #body-login :not(.body-login-container) input[type=reset].primary, #header input[type=reset].primary, #body-login :not(.body-login-container) button:not(.button-vue, [class^=vs__]).primary, #header button:not(.button-vue, [class^=vs__]).primary, #body-login :not(.body-login-container) .button.primary, #header .button.primary, #body-login :not(.body-login-container) .pager li a.primary, #header .pager li a.primary { border-color: var(--color-primary-text); } div.select2-drop .select2-search input.primary:not(:disabled):hover, div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):active, input[type=submit].primary:not(:disabled):hover, input[type=submit].primary:not(:disabled):focus, input[type=submit].primary:not(:disabled):active, input[type=button].primary:not(:disabled):hover, input[type=button].primary:not(:disabled):focus, input[type=button].primary:not(:disabled):active, input[type=reset].primary:not(:disabled):hover, input[type=reset].primary:not(:disabled):focus, input[type=reset].primary:not(:disabled):active, button:not(.button-vue, [class^=vs__]).primary:not(:disabled):hover, button:not(.button-vue, [class^=vs__]).primary:not(:disabled):focus, button:not(.button-vue, [class^=vs__]).primary:not(:disabled):active, .button.primary:not(:disabled):hover, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):active, .pager li a.primary:not(:disabled):hover, .pager li a.primary:not(:disabled):focus, .pager li a.primary:not(:disabled):active { background-color: var(--color-primary-element-hover); border-color: var(--color-primary-element-hover); } div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):focus-visible, input[type=submit].primary:not(:disabled):focus, input[type=submit].primary:not(:disabled):focus-visible, input[type=button].primary:not(:disabled):focus, input[type=button].primary:not(:disabled):focus-visible, input[type=reset].primary:not(:disabled):focus, input[type=reset].primary:not(:disabled):focus-visible, button:not(.button-vue, [class^=vs__]).primary:not(:disabled):focus, button:not(.button-vue, [class^=vs__]).primary:not(:disabled):focus-visible, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):focus-visible, .pager li a.primary:not(:disabled):focus, .pager li a.primary:not(:disabled):focus-visible { box-shadow: 0 0 0 2px var(--color-main-text); } div.select2-drop .select2-search input.primary:not(:disabled):active, input[type=submit].primary:not(:disabled):active, input[type=button].primary:not(:disabled):active, input[type=reset].primary:not(:disabled):active, button:not(.button-vue, [class^=vs__]).primary:not(:disabled):active, .button.primary:not(:disabled):active, .pager li a.primary:not(:disabled):active { color: var(--color-primary-text-dark); } div.select2-drop .select2-search input.primary:disabled, input[type=submit].primary:disabled, input[type=button].primary:disabled, input[type=reset].primary:disabled, button:not(.button-vue, [class^=vs__]).primary:disabled, .button.primary:disabled, .pager li a.primary:disabled { background-color: var(--color-primary-element); color: var(--color-primary-text-dark); cursor: default; } div[contenteditable=false] { margin: 3px 3px 3px 0; padding: 7px 6px; font-size: 13px; background-color: var(--color-main-background); color: var(--color-text-lighter); border: 1px solid var(--color-background-darker); outline: none; border-radius: var(--border-radius); background-color: var(--color-background-dark); color: var(--color-text-lighter); cursor: default; opacity: 0.5; } /* Specific override */ input { /* Color input doesn't respect the initial height so we need to set a custom one */ } input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]):not([type=color]):not([type=file]):not([type=image]) { -webkit-appearance: textfield; -moz-appearance: textfield; height: 36px; } input[type=radio], input[type=checkbox], input[type=file], input[type=image] { height: auto; width: auto; } input[type=color] { margin: 3px; padding: 0 2px; min-height: 30px; width: 40px; cursor: pointer; } input[type=hidden] { height: 0; width: 0; } input[type=time] { width: initial; } /* 'Click' inputs */ select, button:not(.button-vue, [class^=vs__]), .button, input[type=button], input[type=submit], input[type=reset] { padding: 8px 14px; font-size: var(--default-font-size); width: auto; min-height: 36px; cursor: pointer; box-sizing: border-box; background-color: var(--color-background-dark); } select:disabled, button:not(.button-vue, [class^=vs__]):disabled, .button:disabled, input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled { cursor: default; } input:not([type=range], .input-field__input, [type=submit], [type=button], [type=reset], .multiselect__input, .select2-input, .action-input__input, [class^=vs__]), select, div[contenteditable=true], textarea { margin: 3px 3px 3px 0; padding: 0 12px; font-size: var(--default-font-size); background-color: var(--color-main-background); color: var(--color-main-text); border: 2px solid var(--color-border-maxcontrast); height: 36px; outline: none; border-radius: var(--border-radius-large); text-overflow: ellipsis; cursor: pointer; } input:not([type=range], .input-field__input, [type=submit], [type=button], [type=reset], .multiselect__input, .select2-input, .action-input__input, [class^=vs__]):not(:disabled):hover, input:not([type=range], .input-field__input, [type=submit], [type=button], [type=reset], .multiselect__input, .select2-input, .action-input__input, [class^=vs__]):not(:disabled):focus, input:not([type=range], .input-field__input, [type=submit], [type=button], [type=reset], .multiselect__input, .select2-input, .action-input__input, [class^=vs__]):not(:disabled):active, select:not(:disabled):hover, select:not(:disabled):focus, select:not(:disabled):active, div[contenteditable=true]:not(:disabled):hover, div[contenteditable=true]:not(:disabled):focus, div[contenteditable=true]:not(:disabled):active, textarea:not(:disabled):hover, textarea:not(:disabled):focus, textarea:not(:disabled):active { border-color: var(--color-primary-element); } input:not([type=range], .input-field__input, [type=submit], [type=button], [type=reset], .multiselect__input, .select2-input, .action-input__input, [class^=vs__]):not(:disabled):focus, select:not(:disabled):focus, div[contenteditable=true]:not(:disabled):focus, textarea:not(:disabled):focus { cursor: text; } .multiselect__input, .select2-input { background-color: var(--color-main-background); color: var(--color-main-text); } textarea, div[contenteditable=true] { padding: 12px; height: auto; } /* Override the ugly select arrow */ select { background: var(--icon-triangle-s-dark) no-repeat right 8px center; appearance: none; background-color: var(--color-main-background); padding-right: 28px !important; } select *, button:not(.button-vue, [class^=vs__]) *, .button * { cursor: pointer; } select:disabled *, button:not(.button-vue, [class^=vs__]):disabled *, .button:disabled * { cursor: default; } /* Buttons */ button:not(.button-vue, [class^=vs__]), .button, input[type=button], input[type=submit], input[type=reset] { font-weight: bold; border-radius: var(--border-radius-pill); /* Get rid of the inside dotted line in Firefox */ } button:not(.button-vue, [class^=vs__])::-moz-focus-inner, .button::-moz-focus-inner, input[type=button]::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=reset]::-moz-focus-inner { border: 0; } button:not(.button-vue, [class^=vs__]).error, .button.error, input[type=button].error, input[type=submit].error, input[type=reset].error { background-color: var(--color-error) !important; border-color: var(--color-error) !important; color: #fff !important; } button:not(.button-vue, .action-button, [class^=vs__]) > span, .button > span { /* icon position inside buttons */ } button:not(.button-vue, .action-button, [class^=vs__]) > span[class^=icon-], button:not(.button-vue, .action-button, [class^=vs__]) > span[class*=" icon-"], .button > span[class^=icon-], .button > span[class*=" icon-"] { display: inline-block; vertical-align: text-bottom; opacity: 0.5; } /* Confirm inputs */ input[type=text], input[type=password], input[type=email] { /* only show confirm borders if input is not focused */ } input[type=text] + .icon-confirm, input[type=password] + .icon-confirm, input[type=email] + .icon-confirm { margin-left: -13px !important; border-left-color: transparent !important; border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important; border-width: 2px; background-clip: padding-box; /* Avoid background under border */ background-color: var(--color-main-background) !important; opacity: 1; height: 36px; width: 36px; padding: 7px 6px; cursor: pointer; margin-right: 0; } input[type=text] + .icon-confirm:disabled, input[type=password] + .icon-confirm:disabled, input[type=email] + .icon-confirm:disabled { cursor: default; /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ background-image: var(--icon-confirm-fade-dark); } input[type=text]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm, input[type=password]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm, input[type=email]:not(:active):not(:hover):not(:focus):invalid + .icon-confirm { border-color: var(--color-error); } input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:active, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus { border-color: var(--color-primary-element) !important; border-radius: var(--border-radius) !important; } input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=text]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=password]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:active:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:hover:disabled, input[type=email]:not(:active):not(:hover):not(:focus) + .icon-confirm:focus:disabled { border-color: var(--color-background-darker) !important; } input[type=text]:active + .icon-confirm, input[type=text]:hover + .icon-confirm, input[type=text]:focus + .icon-confirm, input[type=password]:active + .icon-confirm, input[type=password]:hover + .icon-confirm, input[type=password]:focus + .icon-confirm, input[type=email]:active + .icon-confirm, input[type=email]:hover + .icon-confirm, input[type=email]:focus + .icon-confirm { border-color: var(--color-primary-element) !important; border-left-color: transparent !important; /* above previous input */ z-index: 2; } /* Various Fixes */ button img, .button img { cursor: pointer; } select, .button.multiselect { font-weight: normal; } /* Radio & Checkboxes */ input[type=checkbox], input[type=radio] { /* We do not use the variables as we keep the colours as white for this variant */ } input[type=checkbox].radio, input[type=checkbox].checkbox, input[type=radio].radio, input[type=radio].checkbox { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } input[type=checkbox].radio + label, input[type=checkbox].checkbox + label, input[type=radio].radio + label, input[type=radio].checkbox + label { user-select: none; } input[type=checkbox].radio:disabled + label, input[type=checkbox].radio:disabled + label:before, input[type=checkbox].checkbox:disabled + label, input[type=checkbox].checkbox:disabled + label:before, input[type=radio].radio:disabled + label, input[type=radio].radio:disabled + label:before, input[type=radio].checkbox:disabled + label, input[type=radio].checkbox:disabled + label:before { cursor: default; } input[type=checkbox].radio + label:before, input[type=checkbox].checkbox + label:before, input[type=radio].radio + label:before, input[type=radio].checkbox + label:before { content: ""; display: inline-block; height: 14px; width: 14px; vertical-align: middle; border-radius: 50%; margin: 0 6px 3px 3px; border: 1px solid var(--color-text-lighter); } input[type=checkbox].radio:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].radio:focus + label:before, input[type=checkbox].checkbox:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].checkbox:focus + label:before, input[type=radio].radio:not(:disabled):not(:checked) + label:hover:before, input[type=radio].radio:focus + label:before, input[type=radio].checkbox:not(:disabled):not(:checked) + label:hover:before, input[type=radio].checkbox:focus + label:before { border-color: var(--color-primary-element); } input[type=checkbox].radio:focus-visible + label, input[type=checkbox].checkbox:focus-visible + label, input[type=radio].radio:focus-visible + label, input[type=radio].checkbox:focus-visible + label { outline-style: solid; outline-color: var(--color-main-text); outline-width: 1px; outline-offset: 2px; } input[type=checkbox].radio:checked + label:before, input[type=checkbox].radio.checkbox:indeterminate + label:before, input[type=checkbox].checkbox:checked + label:before, input[type=checkbox].checkbox.checkbox:indeterminate + label:before, input[type=radio].radio:checked + label:before, input[type=radio].radio.checkbox:indeterminate + label:before, input[type=radio].checkbox:checked + label:before, input[type=radio].checkbox.checkbox:indeterminate + label:before { /* ^ :indeterminate have a strange behavior on radio, so we respecified the checkbox class again to be safe */ box-shadow: inset 0px 0px 0px 2px var(--color-main-background); background-color: var(--color-primary-element); border-color: var(--color-primary-element); } input[type=checkbox].radio:disabled + label:before, input[type=checkbox].checkbox:disabled + label:before, input[type=radio].radio:disabled + label:before, input[type=radio].checkbox:disabled + label:before { border: 1px solid var(--color-text-lighter); background-color: var(--color-text-maxcontrast) !important; /* override other status */ } input[type=checkbox].radio:checked:disabled + label:before, input[type=checkbox].checkbox:checked:disabled + label:before, input[type=radio].radio:checked:disabled + label:before, input[type=radio].checkbox:checked:disabled + label:before { background-color: var(--color-text-maxcontrast); } input[type=checkbox].radio + label ~ em, input[type=checkbox].checkbox + label ~ em, input[type=radio].radio + label ~ em, input[type=radio].checkbox + label ~ em { display: inline-block; margin-left: 25px; } input[type=checkbox].radio + label ~ em:last-of-type, input[type=checkbox].checkbox + label ~ em:last-of-type, input[type=radio].radio + label ~ em:last-of-type, input[type=radio].checkbox + label ~ em:last-of-type { margin-bottom: 14px; } input[type=checkbox].checkbox + label:before, input[type=radio].checkbox + label:before { border-radius: 1px; height: 14px; width: 14px; box-shadow: none !important; background-position: center; } input[type=checkbox].checkbox:checked + label:before, input[type=radio].checkbox:checked + label:before { background-image: url("../img/actions/checkbox-mark.svg"); } input[type=checkbox].checkbox:indeterminate + label:before, input[type=radio].checkbox:indeterminate + label:before { background-image: url("../img/actions/checkbox-mixed.svg"); } input[type=checkbox].radio--white + label:before, input[type=checkbox].radio--white:focus + label:before, input[type=checkbox].checkbox--white + label:before, input[type=checkbox].checkbox--white:focus + label:before, input[type=radio].radio--white + label:before, input[type=radio].radio--white:focus + label:before, input[type=radio].checkbox--white + label:before, input[type=radio].checkbox--white:focus + label:before { border-color: #bababa; } input[type=checkbox].radio--white:not(:disabled):not(:checked) + label:hover:before, input[type=checkbox].checkbox--white:not(:disabled):not(:checked) + label:hover:before, input[type=radio].radio--white:not(:disabled):not(:checked) + label:hover:before, input[type=radio].checkbox--white:not(:disabled):not(:checked) + label:hover:before { border-color: #fff; } input[type=checkbox].radio--white:checked + label:before, input[type=checkbox].checkbox--white:checked + label:before, input[type=radio].radio--white:checked + label:before, input[type=radio].checkbox--white:checked + label:before { box-shadow: inset 0px 0px 0px 2px var(--color-main-background); background-color: #dbdbdb; border-color: #dbdbdb; } input[type=checkbox].radio--white:disabled + label:before, input[type=checkbox].checkbox--white:disabled + label:before, input[type=radio].radio--white:disabled + label:before, input[type=radio].checkbox--white:disabled + label:before { background-color: #bababa !important; /* override other status */ border-color: rgba(255, 255, 255, 0.4) !important; /* override other status */ } input[type=checkbox].radio--white:checked:disabled + label:before, input[type=checkbox].checkbox--white:checked:disabled + label:before, input[type=radio].radio--white:checked:disabled + label:before, input[type=radio].checkbox--white:checked:disabled + label:before { box-shadow: inset 0px 0px 0px 2px var(--color-main-background); border-color: rgba(255, 255, 255, 0.4) !important; /* override other status */ background-color: #bababa; } input[type=checkbox].checkbox--white:checked + label:before, input[type=checkbox].checkbox--white:indeterminate + label:before, input[type=radio].checkbox--white:checked + label:before, input[type=radio].checkbox--white:indeterminate + label:before { background-color: transparent !important; /* Override default checked */ border-color: #fff !important; /* Override default checked */ background-image: url("../img/actions/checkbox-mark-white.svg"); } input[type=checkbox].checkbox--white:indeterminate + label:before, input[type=radio].checkbox--white:indeterminate + label:before { background-image: url("../img/actions/checkbox-mixed-white.svg"); } input[type=checkbox].checkbox--white:disabled + label:before, input[type=radio].checkbox--white:disabled + label:before { opacity: 0.7; /* No other choice for white background image */ } /* Select2 overriding. Merged to core with vendor stylesheet */ div.select2-drop { margin-top: -2px; background-color: var(--color-main-background); } div.select2-drop.select2-drop-active { border-color: var(--color-border-dark); } div.select2-drop .avatar { display: inline-block; margin-right: 8px; vertical-align: middle; } div.select2-drop .avatar img { cursor: pointer; } div.select2-drop .select2-search input { min-height: auto; background: var(--icon-search-dark) no-repeat right center !important; background-origin: content-box !important; } div.select2-drop .select2-results { max-height: 250px; margin: 0; padding: 0; } div.select2-drop .select2-results .select2-result-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div.select2-drop .select2-results .select2-result-label span { cursor: pointer; } div.select2-drop .select2-results .select2-result-label span em { cursor: inherit; background: unset; } div.select2-drop .select2-results .select2-result, div.select2-drop .select2-results .select2-no-results, div.select2-drop .select2-results .select2-searching { position: relative; display: list-item; padding: 12px; background-color: transparent; cursor: pointer; color: var(--color-text-lighter); } div.select2-drop .select2-results .select2-result.select2-selected { background-color: var(--color-background-dark); } div.select2-drop .select2-results .select2-highlighted { background-color: var(--color-background-dark); color: var(--color-main-text); } .select2-chosen .avatar, .select2-chosen .avatar img, #select2-drop .avatar, #select2-drop .avatar img { cursor: pointer; } div.select2-container-multi .select2-choices, div.select2-container-multi.select2-container-active .select2-choices { box-shadow: none; white-space: nowrap; text-overflow: ellipsis; background: var(--color-main-background); color: var(--color-text-lighter) !important; box-sizing: content-box; border-radius: var(--border-radius-large); border: 2px solid var(--color-border-dark); margin: 0; padding: 6px; min-height: 44px; } div.select2-container-multi .select2-choices:focus-within, div.select2-container-multi.select2-container-active .select2-choices:focus-within { border-color: var(--color-primary); } div.select2-container-multi .select2-choices .select2-search-choice, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice { line-height: 20px; padding-left: 5px; } div.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-focus, div.select2-container-multi .select2-choices .select2-search-choice:hover, div.select2-container-multi .select2-choices .select2-search-choice:active, div.select2-container-multi .select2-choices .select2-search-choice, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice.select2-search-choice-focus, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:hover, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:active, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice { background-image: none; background-color: var(--color-main-background); color: var(--color-text-lighter); border: 1px solid var(--color-border-dark); } div.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close { display: none; } div.select2-container-multi .select2-choices .select2-search-field input, div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input { line-height: 20px; min-height: 28px; max-height: 28px; color: var(--color-main-text); } div.select2-container-multi .select2-choices .select2-search-field input.select2-active, div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input.select2-active { background: none !important; } div.select2-container { margin: 3px 3px 3px 0; } div.select2-container.select2-container-multi .select2-choices { display: flex; flex-wrap: wrap; } div.select2-container.select2-container-multi .select2-choices li { float: none; } div.select2-container a.select2-choice { box-shadow: none; white-space: nowrap; text-overflow: ellipsis; background: var(--color-main-background); color: var(--color-text-lighter) !important; box-sizing: content-box; border-radius: var(--border-radius-large); border: 2px solid var(--color-border-dark); margin: 0; padding: 6px 12px; min-height: 44px; } div.select2-container a.select2-choice:focus-within { border-color: var(--color-primary); } div.select2-container a.select2-choice .select2-search-choice { line-height: 20px; padding-left: 5px; background-image: none; background-color: var(--color-background-dark); border-color: var(--color-background-dark); } div.select2-container a.select2-choice .select2-search-choice .select2-search-choice-close { display: none; } div.select2-container a.select2-choice .select2-search-choice.select2-search-choice-focus, div.select2-container a.select2-choice .select2-search-choice:hover { background-color: var(--color-border); border-color: var(--color-border); } div.select2-container a.select2-choice .select2-arrow { background: none; border-radius: 0; border: none; } div.select2-container a.select2-choice .select2-arrow b { background: var(--icon-triangle-s-dark) no-repeat center !important; opacity: 0.5; } div.select2-container a.select2-choice:hover .select2-arrow b, div.select2-container a.select2-choice:focus .select2-arrow b, div.select2-container a.select2-choice:active .select2-arrow b { opacity: 0.7; } div.select2-container a.select2-choice .select2-search-field input { line-height: 20px; } /* Vue v-select */ .v-select { margin: 3px 3px 3px 0; display: inline-block; } .v-select .dropdown-toggle { display: flex !important; flex-wrap: wrap; } .v-select .dropdown-toggle .selected-tag { line-height: 20px; padding-left: 5px; background-image: none; background-color: var(--color-main-background); color: var(--color-text-lighter); border: 1px solid var(--color-border-dark); display: inline-flex; align-items: center; } .v-select .dropdown-toggle .selected-tag .close { margin-left: 3px; } .v-select .dropdown-menu { padding: 0; } .v-select .dropdown-menu li { padding: 5px; position: relative; display: list-item; background-color: transparent; cursor: pointer; color: var(--color-text-lighter); } .v-select .dropdown-menu li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 25px; padding: 3px 7px 4px 2px; margin: 0; cursor: pointer; min-height: 1em; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-flex; align-items: center; background-color: transparent !important; color: inherit !important; } .v-select .dropdown-menu li a::before { content: " "; background-image: var(--icon-checkmark-dark); background-repeat: no-repeat; background-position: center; min-width: 16px; min-height: 16px; display: block; opacity: 0.5; margin-right: 5px; visibility: hidden; } .v-select .dropdown-menu li.highlight { color: var(--color-main-text); } .v-select .dropdown-menu li.active > a { background-color: var(--color-background-dark); color: var(--color-main-text); } .v-select .dropdown-menu li.active > a::before { visibility: visible; } /* Progressbar */ progress:not(.vue) { display: block; width: 100%; padding: 0; border: 0 none; background-color: var(--color-background-dark); border-radius: var(--border-radius); flex-basis: 100%; height: 5px; overflow: hidden; } progress:not(.vue).warn::-moz-progress-bar { background: var(--color-error); } progress:not(.vue).warn::-webkit-progress-value { background: var(--color-error); } progress:not(.vue)::-webkit-progress-bar { background: transparent; } progress:not(.vue)::-moz-progress-bar { border-radius: var(--border-radius); background: var(--color-primary); transition: 250ms all ease-in-out; } progress:not(.vue)::-webkit-progress-value { border-radius: var(--border-radius); background: var(--color-primary); transition: 250ms all ease-in-out; } /* Animation */ @keyframes shake { 10%, 90% { transform: translate(-1px); } 20%, 80% { transform: translate(2px); } 30%, 50%, 70% { transform: translate(-4px); } 40%, 60% { transform: translate(4px); } } .shake { animation-name: shake; animation-duration: 0.7s; animation-timing-function: ease-out; } label.infield { position: absolute; left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; } ::placeholder, ::-ms-input-placeholder, ::-webkit-input-placeholder { color: var(--color-text-maxcontrast); font-size: var(--default-font-size); } /*# sourceMappingURL=inputs.css.map */