/* 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-container { margin: 3px 3px 3px 0 !important; } #select2-drop { margin-top: -4px; } .select2-container .select2-choice, .select2-container .select2-default { border: none !important; border-radius: 0; background: transparent !important; box-shadow: none !important; line-height: 32px !important; padding-left: 38px; background-color: transparent; } .select2-selected { display: list-item !important; background-color: #f8f8f8 !important; } .select2-highlighted, .select2-selected.select2-highlighted { background: #f8f8f8 !important; color: #000 !important; } .select2-result { position: relative !important; } .select2-results { max-height: 250px !important; margin: 0 !important; padding: 0 !important; } .select2-results .select2-result-label { padding: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select2-choices { white-space: nowrap !important; text-overflow: ellipsis !important; background: #fff !important; color: #555 !important; box-sizing: content-box !important; border-radius: 3px !important; border: 1px solid #ddd !important; margin: 0 !important; padding: 2px 0 !important; min-height: auto !important; } .select2-dropdown-open .select2-choices { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .select2-search { padding: 0 !important; } .select2-search input { background-position: 100% -21px !important; padding: 12px !important; border-radius: 0 !important; border: none !important; } .select2-choices .select2-search-choice { line-height: 20px !important; padding-left: 5px !important; } .select2-choices .select2-search-choice-close { display: none !important; } .select2-choices .select2-search-field input { line-height: 20px !important; } .select2-container-multi .select2-choices .select2-search-choice { background-color: #f8f8f8 !important; border-color: #f8f8f8 !important; box-shadow: none !important; background-image: none !important; } .select2-results .select2-highlighted { background-color: #f8f8f8 !important; color: #000 !important; } .select2-container-multi.select2-container-active .select2-choices, .select2-drop-active { border-color: #ddd !important; } .select2-container-multi.select2-container-active .select2-choices { -webkit-box-shadow: none !important; box-shadow: none !important; } #select2-drop .avatar, .select2-chosen .avatar { display: inline-block; margin-right: 8px; vertical-align: middle; } .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit { background: #fff !important; padding: 12px !important; } /* 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; }