@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; } /* Simple selector to allow easy overriding */ select, button:not(.button-vue), input, textarea, div[contenteditable=true], div[contenteditable=false] { width: 130px; min-height: 34px; box-sizing: border-box; } /** * color-text-lighter normal state * color-text-lighter active state * color-text-maxcontrast disabled state */ /* Default global values */ div.select2-drop .select2-search input, select, button:not(.button-vue), .button, input:not([type=range]), textarea, div[contenteditable=true], .pager li a { margin: 3px 3px 3px 0; padding: 7px 6px; font-size: 13px; background-color: var(--color-main-background); color: var(--color-main-text); border: 1px solid var(--color-border-dark); 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, select:not(:disabled):not(.primary):hover, select:not(:disabled):not(.primary):focus, select:not(:disabled):not(.primary).active, button:not(.button-vue):not(:disabled):not(.primary):hover, button:not(.button-vue):not(:disabled):not(.primary):focus, button:not(.button-vue):not(:disabled):not(.primary).active, .button:not(:disabled):not(.primary):hover, .button:not(:disabled):not(.primary):focus, .button:not(:disabled):not(.primary).active, input:not([type=range]):not(:disabled):not(.primary):hover, input:not([type=range]):not(:disabled):not(.primary):focus, input:not([type=range]):not(:disabled):not(.primary).active, textarea:not(:disabled):not(.primary):hover, textarea:not(:disabled):not(.primary):focus, textarea:not(:disabled):not(.primary).active, div[contenteditable=true]:not(:disabled):not(.primary):hover, div[contenteditable=true]:not(:disabled):not(.primary):focus, div[contenteditable=true]: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, select:not(:disabled):not(.primary):active, button:not(.button-vue):not(:disabled):not(.primary):active, .button:not(:disabled):not(.primary):active, input:not([type=range]):not(:disabled):not(.primary):active, textarea:not(:disabled):not(.primary):active, div[contenteditable=true]: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, select:not(:disabled):not(.primary):focus-visible, button:not(.button-vue):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible, input:not([type=range]):not(:disabled):not(.primary):focus-visible, textarea:not(:disabled):not(.primary):focus-visible, div[contenteditable=true]: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, select:disabled, button:not(.button-vue):disabled, .button:disabled, input:not([type=range]):disabled, textarea:disabled, div[contenteditable=true]: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, select:required, button:not(.button-vue):required, .button:required, input:not([type=range]):required, textarea:required, div[contenteditable=true]:required, .pager li a:required { box-shadow: none; } div.select2-drop .select2-search input:user-invalid, select:user-invalid, button:not(.button-vue):user-invalid, .button:user-invalid, input:not([type=range]):user-invalid, textarea:user-invalid, div[contenteditable=true]:user-invalid, .pager li a:user-invalid { box-shadow: 0 0 0 2px var(--color-error) !important; } div.select2-drop .select2-search input.primary, select.primary, button:not(.button-vue).primary, .button.primary, input:not([type=range]).primary, textarea.primary, div[contenteditable=true].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) select.primary, #header select.primary, #body-login :not(.body-login-container) button:not(.button-vue).primary, #header button:not(.button-vue).primary, #body-login :not(.body-login-container) .button.primary, #header .button.primary, #body-login :not(.body-login-container) input:not([type=range]).primary, #header input:not([type=range]).primary, #body-login :not(.body-login-container) textarea.primary, #header textarea.primary, #body-login :not(.body-login-container) div[contenteditable=true].primary, #header div[contenteditable=true].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, select.primary:not(:disabled):hover, select.primary:not(:disabled):focus, select.primary:not(:disabled):active, button:not(.button-vue).primary:not(:disabled):hover, button:not(.button-vue).primary:not(:disabled):focus, button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):hover, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):active, input:not([type=range]).primary:not(:disabled):hover, input:not([type=range]).primary:not(:disabled):focus, input:not([type=range]).primary:not(:disabled):active, textarea.primary:not(:disabled):hover, textarea.primary:not(:disabled):focus, textarea.primary:not(:disabled):active, div[contenteditable=true].primary:not(:disabled):hover, div[contenteditable=true].primary:not(:disabled):focus, div[contenteditable=true].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, select.primary:not(:disabled):focus, select.primary:not(:disabled):focus-visible, button:not(.button-vue).primary:not(:disabled):focus, button:not(.button-vue).primary:not(:disabled):focus-visible, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):focus-visible, input:not([type=range]).primary:not(:disabled):focus, input:not([type=range]).primary:not(:disabled):focus-visible, textarea.primary:not(:disabled):focus, textarea.primary:not(:disabled):focus-visible, div[contenteditable=true].primary:not(:disabled):focus, div[contenteditable=true].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, select.primary:not(:disabled):active, button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):active, input:not([type=range]).primary:not(:disabled):active, textarea.primary:not(:disabled):active, div[contenteditable=true].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, select.primary:disabled, button:not(.button-vue).primary:disabled, .button.primary:disabled, input:not([type=range]).primary:disabled, textarea.primary:disabled, div[contenteditable=true].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: 34px; } 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), .button, input[type=button], input[type=submit], input[type=reset] { padding: 6px 16px; width: auto; min-height: 34px; cursor: pointer; box-sizing: border-box; background-color: var(--color-background-dark); } select:disabled, button:not(.button-vue):disabled, .button:disabled, input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled { cursor: default; } select *, button:not(.button-vue) *, .button * { cursor: pointer; } select:disabled *, button:not(.button-vue):disabled *, .button:disabled * { cursor: default; } /* Buttons */ button:not(.button-vue), .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)::-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).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):not(.action-button) > span, .button > span { /* icon position inside buttons */ } button:not(.button-vue):not(.action-button) > span[class^=icon-], button:not(.button-vue):not(.action-button) > span[class*=" icon-"], .button > span[class^=icon-], .button > span[class*=" icon-"] { display: inline-block; vertical-align: text-bottom; opacity: 0.5; } textarea, div[contenteditable=true] { color: var(--color-main-text); cursor: text; font-family: inherit; height: auto; } textarea:not(:disabled):active, textarea:not(:disabled):hover, textarea:not(:disabled):focus, div[contenteditable=true]:not(:disabled):active, div[contenteditable=true]:not(:disabled):hover, div[contenteditable=true]:not(:disabled):focus { border-color: var(--color-background-darker) !important; background-color: var(--color-main-background) !important; } div[contenteditable=false] { color: var(--color-text-lighter); font-family: inherit; height: auto; } /* Override the ugly select arrow */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--icon-triangle-s-dark) no-repeat right 4px center; background-color: inherit; outline: 0; padding-right: 24px !important; height: 34px; } /* 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: -8px !important; border-left-color: transparent !important; border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; background-clip: padding-box; /* Avoid background under border */ background-color: var(--color-main-background) !important; opacity: 1; height: 34px; width: 34px; 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); border: 1px solid var(--color-border-dark); margin: 0; padding: 2px 0; min-height: auto; } 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; } 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); border: 1px solid var(--color-border-dark); margin: 0; padding: 2px 0; padding-left: 6px; min-height: auto; } 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; } /* Vue multiselect */ .multiselect.multiselect-vue { margin: 1px 2px; padding: 0 !important; display: inline-block; width: 160px; position: relative; background-color: var(--color-main-background); /* results wrapper */ } .multiselect.multiselect-vue.multiselect--active { /* Opened: force display the input */ } .multiselect.multiselect-vue.multiselect--active input.multiselect__input { opacity: 1 !important; cursor: text !important; } .multiselect.multiselect-vue.multiselect--disabled, .multiselect.multiselect-vue.multiselect--disabled .multiselect__single { background-color: var(--color-background-dark) !important; } .multiselect.multiselect-vue .multiselect__tags { /* space between tags and limit tag */ display: flex; flex-wrap: nowrap; overflow: hidden; border: 1px solid var(--color-border-dark); cursor: pointer; position: relative; border-radius: var(--border-radius); height: 34px; /* tag wrapper */ /* Single select default value */ /* displayed text if tag limit reached */ /* default multiselect input for search and placeholder */ } .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap { align-items: center; display: inline-flex; overflow: hidden; max-width: 100%; position: relative; padding: 3px 5px; flex-grow: 1; /* no tags or simple select? Show input directly input is used to display single value */ /* selected tag */ } .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap:empty ~ input.multiselect__input { opacity: 1 !important; /* hide default empty text, show input instead */ } .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap:empty ~ input.multiselect__input + span:not(.multiselect__single) { display: none; } .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag { flex: 1 0 0; line-height: 20px; padding: 1px 5px; background-image: none; color: var(--color-text-lighter); border: 1px solid var(--color-border-dark); display: inline-flex; align-items: center; border-radius: var(--border-radius); /* require to override the default width and force the tag to shring properly */ min-width: 0; max-width: 50%; max-width: fit-content; max-width: -moz-fit-content; /* css hack, detect if more than two tags if so, flex-basis is set to half */ /* ellipsis the groups to be sure we display at least two of them */ } .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag:only-child { flex: 0 1 auto; } .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag:not(:last-child) { margin-right: 5px; } .multiselect.multiselect-vue .multiselect__tags .multiselect__tags-wrap .multiselect__tag > span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .multiselect.multiselect-vue .multiselect__tags .multiselect__single { padding: 8px 10px; flex: 0 0 100%; z-index: 1; /* above input */ background-color: var(--color-main-background); cursor: pointer; line-height: 17px; } .multiselect.multiselect-vue .multiselect__tags .multiselect__strong, .multiselect.multiselect-vue .multiselect__tags .multiselect__limit { flex: 0 0 auto; line-height: 20px; color: var(--color-text-lighter); display: inline-flex; align-items: center; opacity: 0.7; margin-right: 5px; /* above the input */ z-index: 5; } .multiselect.multiselect-vue .multiselect__tags input.multiselect__input { width: 100% !important; position: absolute !important; margin: 0; opacity: 0; /* let's leave it on top of tags but hide it */ height: 100%; border: none; /* override hide to force show the placeholder */ display: block !important; /* only when not active */ cursor: pointer; } .multiselect.multiselect-vue .multiselect__content-wrapper { position: absolute; width: 100%; margin-top: -1px; border: 1px solid var(--color-border-dark); background: var(--color-main-background); z-index: 50; max-height: 175px !important; overflow-y: auto; } .multiselect.multiselect-vue .multiselect__content-wrapper .multiselect__content { width: 100%; padding: 5px 0; } .multiselect.multiselect-vue .multiselect__content-wrapper li { padding: 5px; position: relative; display: flex; align-items: center; background-color: transparent; } .multiselect.multiselect-vue .multiselect__content-wrapper li, .multiselect.multiselect-vue .multiselect__content-wrapper li span { cursor: pointer; } .multiselect.multiselect-vue .multiselect__content-wrapper li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 20px; margin: 0; 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: var(--color-text-lighter); width: 100%; /* selected checkmark icon */ /* add the prop tag-placeholder="create" to add the + * icon on top of an unknown-and-ready-to-be-created entry */ } .multiselect.multiselect-vue .multiselect__content-wrapper li > span::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; } .multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--disabled { background-color: var(--color-background-dark); opacity: 0.5; } .multiselect.multiselect-vue .multiselect__content-wrapper li > span[data-select=create]::before { background-image: var(--icon-add-dark); visibility: visible; } .multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--highlight { color: var(--color-main-text); } .multiselect.multiselect-vue .multiselect__content-wrapper li > span:not(.multiselect__option--disabled):hover::before { opacity: 0.3; } .multiselect.multiselect-vue .multiselect__content-wrapper li > span.multiselect__option--selected::before, .multiselect.multiselect-vue .multiselect__content-wrapper li > span:not(.multiselect__option--disabled):hover::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); } /*# sourceMappingURL=inputs.css.map */