/* INPUTS */ /* specifically override browser styles */ input, textarea, select, button { font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; } .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget { font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important; } input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="time"], input[type="date"], textarea, select, button, .button, input[type="submit"], input[type="button"], #quota, .pager li a { width: 130px; margin: 3px 3px 3px 0; padding: 7px 6px 5px; font-size: 13px; background-color: #fff; color: #333; border: 1px solid #ddd; outline: none; border-radius: 3px; } input[type="hidden"] { height: 0; width: 0; } input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="time"], textarea { background: #fff; color: #555; cursor: text; font-family: inherit; /* use default ownCloud font instead of default textarea monospace */ } input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="time"] { -webkit-appearance:textfield; -moz-appearance:textfield; box-sizing:content-box; } input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active, input[type="password"]:hover, input[type="password"]:focus, input[type="password"]:active, input[type="number"]:hover, input[type="number"]:focus, input[type="number"]:active, input[type="search"]:hover, input[type="search"]:focus, input[type="search"]:active, input[type="email"]:hover, input[type="email"]:focus, input[type="email"]:active, input[type="tel"]:hover, input[type="tel"]:focus, input[type="tel"]:active, input[type="url"]:hover, input[type="url"]:focus, input[type="url"]:active, input[type="time"]:hover, input[type="time"]:focus, input[type="time"]:active, textarea:hover, textarea:focus, textarea:active { color: #333; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } input[type="checkbox"].checkbox { position: absolute; left:-10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } input[type="checkbox"].checkbox + label:before { content: ""; display: inline-block; height: 20px; width: 20px; vertical-align: middle; background: url('../img/actions/checkbox.svg') left top no-repeat; } input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; } input[type="checkbox"].checkbox.u-left +label:before { float: left; } input[type="checkbox"].checkbox.u-hidden + label:before { display: none; } input[type="checkbox"].checkbox:checked + label:before { background-image: url('../img/actions/checkbox-checked.svg'); } input[type="checkbox"].checkbox:indeterminate + label:before { background-image: url('../img/actions/checkbox-mixed.svg'); } input[type="checkbox"].checkbox:disabled + label:before { background-image: url('../img/actions/checkbox-disabled.svg'); } input[type="checkbox"].checkbox:checked:disabled + label:before { background-image: url('../img/actions/checkbox-checked-disabled.svg'); } input[type="checkbox"].checkbox:indeterminate:disabled + label:before { background-image: url('../img/actions/checkbox-mixed-disabled.svg'); } input[type="checkbox"].checkbox--white + label:before { background-image: url('../img/actions/checkbox-white.svg'); } input[type="checkbox"].checkbox--white:checked + label:before { background-image: url('../img/actions/checkbox-checked-white.svg'); } input[type="checkbox"].checkbox--white:indeterminate + label:before { background-image: url('../img/actions/checkbox-mixed-white.svg'); } input[type="checkbox"].checkbox--white:disabled + label:before { background-image: url('../img/actions/checkbox-disabled-white.svg'); } input[type="checkbox"].checkbox--white:checked:disabled + label:before { background-image: url('../img/actions/checkbox-checked-disabled.svg'); } input[type="checkbox"].checkbox--white:indeterminate:disabled + label:before { background-image: url('../img/actions/checkbox-mixed-disabled.svg'); } input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before { color:#111 !important; } input[type="radio"].radio { position: absolute; left:-10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } input[type="radio"].radio + label:before { content: ""; display: inline-block; height: 20px; width: 20px; vertical-align: middle; background: url('../img/actions/radio.svg') left top no-repeat; } input[type="radio"].radio:checked + label:before { background-image: url('../img/actions/radio-checked.svg'); } input[type="radio"].radio:disabled + label:before { background-image: url('../img/actions/radio-disabled.svg'); } input[type="radio"].radio:checked:disabled + label:before { background-image: url('../img/actions/radio-checked-disabled.svg'); } input[type="radio"].radio--white + label:before { background-image: url('../img/actions/radio-white.svg'); } input[type="radio"].radio--white:checked + label:before { background-image: url('../img/actions/radio-checked-white.svg'); } input[type="radio"].radio--white:disabled + label:before { background-image: url('../img/actions/radio-disabled.svg'); } input[type="radio"].radio--white:checked:disabled + label:before { background-image: url('../img/actions/radio-checked-disabled.svg'); } input[type="time"] { width: initial; height: 31px; box-sizing: border-box; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(240, 240, 240, 0.90); outline: 0; padding-right: 24px !important; } select:hover { background-color: #fefefe; } /* select2 adjustments */ #select2-drop { margin-top: -2px; } #select2-drop.select2-drop-active { border-color: #ddd; } #select2-drop .avatar { display: inline-block; margin-right: 8px; vertical-align: middle; } #select2-drop .avatar img, .select2-chosen .avatar img, #select2-drop .avatar, .select2-chosen .avatar { cursor: pointer; } #select2-drop .select2-search input { width: calc(100% - 14px); min-height: auto; background: url('../img/actions/search.svg') no-repeat right center !important; background-origin: content-box !important; } #select2-drop .select2-results { max-height: 250px; margin: 0; padding: 0; } #select2-drop .select2-results .select2-result-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #select2-drop .select2-results .select2-result-label span { cursor: pointer; } #select2-drop .select2-results .select2-result, #select2-drop .select2-results .select2-no-results, #select2-drop .select2-results .select2-searching { position: relative; display: list-item; padding: 12px; background-color: #fff; cursor: pointer; color: #222; } #select2-drop .select2-results .select2-result.select2-selected { background-color: #f8f8f8; } #select2-drop .select2-results .select2-result.select2-highlighted { background-color: #f8f8f8; color: #000; } .select2-container-multi .select2-choices, .select2-container-multi.select2-container-active .select2-choices, .select2-container .select2-choice { box-shadow: none; white-space: nowrap; text-overflow: ellipsis; background: #fff; color: #555; box-sizing: content-box; border-radius: 3px; border: 1px solid #ddd; margin: 0; padding: 2px 0; min-height: auto; } .select2-container-multi .select2-choices .select2-search-choice, .select2-container-multi.select2-container-active .select2-choices .select2-search-choice, .select2-container .select2-choice .select2-search-choice { line-height: 20px; padding-left: 5px; background-image: none; background-color: #f8f8f8; border-color: #f8f8f8; } .select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-focus, .select2-container-multi .select2-choices .select2-search-choice:hover, .select2-container-multi.select2-container-active .select2-choices .select2-search-choice.select2-search-choice-focus, .select2-container-multi.select2-container-active .select2-choices .select2-search-choice:hover, .select2-container .select2-choice .select2-search-choice.select2-search-choice-focus, .select2-container .select2-choice .select2-search-choice:hover { background-color: #f0f0f0; border-color: #f0f0f0; } .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close, .select2-container-multi.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close, .select2-container .select2-choice .select2-search-choice .select2-search-choice-close { display: none; } .select2-container-multi .select2-choices .select2-search-field input, .select2-container-multi.select2-container-active .select2-choices .select2-search-field input, .select2-container .select2-choice .select2-search-field input { line-height: 20px; } .select2-container { margin: 3px 3px 3px 0; } .select2-container.select2-container-multi .select2-choices { display: flex; flex-wrap: wrap; } .select2-container.select2-container-multi .select2-choices li { float: none; } .select2-container .select2-choice { padding-left: 38px; } .select2-container .select2-choice .select2-arrow { background: none; border-radius: 0; border: none; } .select2-container .select2-choice .select2-arrow b { background: url('../img/actions/triangle-s.svg') no-repeat center !important; opacity: .5; } .select2-container .select2-choice:hover .select2-arrow b, .select2-container .select2-choice:focus .select2-arrow b, .select2-container .select2-choice:active .select2-arrow b { opacity: .7; } /* jQuery UI fixes */ .ui-menu { padding: 0 !important; } .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { font-weight: inherit !important; margin: 0 !important; } .ui-widget-content { background: #fff !important; border-top: none !important; } .ui-corner-all { border-radius: 0 !important; border-bottom-left-radius: 3px !important; border-bottom-right-radius: 3px !important; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: none !important; background: #f8f8f8 !important; } /* correctly align images inside of buttons */ input img, button img, .button img { vertical-align: text-bottom; } input[type="submit"].enabled { background-color: #66f866; border: 1px solid #5e5; } .input-button-inline { position: absolute !important; right: 0; background-color: transparent !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; opacity: .3; } /* BUTTONS */ input[type="submit"], input[type="button"], button, .button, #quota, select, .pager li a { width: auto; min-width: 25px; padding: 5px; background-color: rgba(240,240,240,.9); font-weight: 600; color: #555; border: 1px solid rgba(240,240,240,.9); cursor: pointer; } select, .button.multiselect { font-weight: 400; } input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, button:hover, button:focus, .button:hover, .button:focus, .button a:focus, select:hover, select:focus, select:active { background-color: rgba(255, 255, 255, .95); color: #111; } input[type="submit"] img, input[type="button"] img, button img, .button img { cursor:pointer; } #header .button { border: none; box-shadow: none; } /* disabled input fields and buttons */ input:disabled, input:disabled:hover, input:disabled:focus, button:disabled, button:disabled:hover, button:disabled:focus, .button:disabled, .button:disabled:hover, .button:disabled:focus, a.disabled, a.disabled:hover, a.disabled:focus, textarea:disabled { background-color: rgba(230,230,230,.9); color: #999; cursor: default; } input:disabled+label, input:disabled:hover+label, input:disabled:focus+label { color: #999 !important; cursor: default; } /* Primary action button, use sparingly */ .primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary { border: 1px solid #0082c9; background-color: #00a2e9; color: #fff; } .primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover, .primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus { background-color: #0092d9; color: #fff; } .primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active, .primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled, .primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus { background-color: #00a2e9; color: #bbb; } @keyframes shake { 0% { transform: translate(-5px, 0); } 20% { transform: translate(5px, 0); } 40% { transform: translate(-5px, 0); } 60% { transform: translate(5px, 0); } 80% { transform: translate(-5px, 0); } 100% { transform: translate(5px, 0); } } .shake { animation-name: shake; animation-duration: .3s; animation-timing-function: ease-out; }