--- /dev/null
+/* 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'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'], &[type='date'] {
+ 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;
+ }
+}
+
+textarea, select, button, .button {
+ 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='submit'], &[type='button'] {
+ 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;
+ }
+}
+
+#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;
+ }
+ &[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'] {
+ background: #fff;
+ color: #555;
+ cursor: text;
+ font-family: inherit;
+ /* use default ownCloud font instead of default textarea monospace */
+ }
+}
+
+textarea {
+ background: #fff;
+ color: #555;
+ cursor: text;
+ font-family: inherit;
+ /* use default ownCloud font instead of default textarea monospace */
+}
+
+input {
+ &[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ box-sizing: content-box;
+ }
+ &[type='text'] {
+ &:hover, &:focus, &:active {
+ color: #333;
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
+ }
+ &[type='password'] {
+ &:hover, &:focus, &:active {
+ color: #333;
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
+ }
+ &[type='number'] {
+ &:hover, &:focus, &:active {
+ color: #333;
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
+ }
+ &[type='search'] {
+ &:hover, &:focus, &:active {
+ color: #333;
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
+ }
+ &[type='email'] {
+ &:hover, &:focus, &:active {
+ color: #333;
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
+ }
+ &[type='tel'] {
+ &:hover, &:focus, &:active {
+ color: #333;
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
+ }
+ &[type='url'] {
+ &:hover, &:focus, &:active {
+ color: #333;
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
+ }
+ &[type='time'] {
+ &:hover, &:focus, &:active {
+ color: #333;
+ -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
+ opacity: 1;
+ }
+ }
+}
+
+textarea {
+ &:hover, &:focus, &: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;
+ + label:before {
+ content: '';
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ vertical-align: middle;
+ background: url('../img/actions/checkbox.svg') left top no-repeat;
+ }
+ &:disabled + label:before {
+ opacity: .6;
+ }
+ &.u-left + label:before {
+ float: left;
+ }
+ &.u-hidden + label:before {
+ display: none;
+ }
+ &:checked + label:before {
+ background-image: url('../img/actions/checkbox-checked.svg');
+ }
+ &:indeterminate + label:before {
+ background-image: url('../img/actions/checkbox-mixed.svg');
+ }
+ &:disabled + label:before {
+ background-image: url('../img/actions/checkbox-disabled.svg');
+ }
+ &:checked:disabled + label:before {
+ background-image: url('../img/actions/checkbox-checked-disabled.svg');
+ }
+ &:indeterminate:disabled + label:before {
+ background-image: url('../img/actions/checkbox-mixed-disabled.svg');
+ }
+ }
+ &.checkbox--white {
+ + label:before {
+ background-image: url('../img/actions/checkbox-white.svg');
+ }
+ &:checked + label:before {
+ background-image: url('../img/actions/checkbox-checked-white.svg');
+ }
+ &:indeterminate + label:before {
+ background-image: url('../img/actions/checkbox-mixed-white.svg');
+ }
+ &:disabled + label:before {
+ background-image: url('../img/actions/checkbox-disabled-white.svg');
+ }
+ &:checked:disabled + label:before {
+ background-image: url('../img/actions/checkbox-checked-disabled.svg');
+ }
+ &:indeterminate:disabled + label:before {
+ background-image: url('../img/actions/checkbox-mixed-disabled.svg');
+ }
+ }
+ &.checkbox:hover + label:before, &:focus + label:before {
+ color: #111 !important;
+ }
+ }
+ &[type='radio'] {
+ &.radio {
+ position: absolute;
+ left: -10000px;
+ top: auto;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ + label:before {
+ content: '';
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ vertical-align: middle;
+ background: url('../img/actions/radio.svg') left top no-repeat;
+ }
+ &:checked + label:before {
+ background-image: url('../img/actions/radio-checked.svg');
+ }
+ &:disabled + label:before {
+ background-image: url('../img/actions/radio-disabled.svg');
+ }
+ &:checked:disabled + label:before {
+ background-image: url('../img/actions/radio-checked-disabled.svg');
+ }
+ }
+ &.radio--white {
+ + label:before {
+ background-image: url('../img/actions/radio-white.svg');
+ }
+ &:checked + label:before {
+ background-image: url('../img/actions/radio-checked-white.svg');
+ }
+ &:disabled + label:before {
+ background-image: url('../img/actions/radio-disabled.svg');
+ }
+ &:checked:disabled + label:before {
+ background-image: url('../img/actions/radio-checked-disabled.svg');
+ }
+ }
+ }
+ &[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.9);
+ outline: 0;
+ padding-right: 24px !important;
+ &:hover {
+ background-color: #fefefe;
+ }
+}
+
+/* select2 adjustments */
+
+#select2-drop {
+ margin-top: -2px;
+ &.select2-drop-active {
+ border-color: #ddd;
+ }
+ .avatar {
+ display: inline-block;
+ margin-right: 8px;
+ vertical-align: middle;
+ img {
+ cursor: pointer;
+ }
+ }
+}
+
+.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-results {
+ max-height: 250px;
+ margin: 0;
+ padding: 0;
+ .select2-result-label {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ span {
+ cursor: pointer;
+ }
+ }
+ .select2-result, .select2-no-results, .select2-searching {
+ position: relative;
+ display: list-item;
+ padding: 12px;
+ background-color: #fff;
+ cursor: pointer;
+ color: #222;
+ }
+ .select2-result {
+ &.select2-selected {
+ background-color: #f8f8f8;
+ }
+ &.select2-highlighted {
+ background-color: #f8f8f8;
+ color: #000;
+ }
+ }
+ }
+}
+
+.select2-container-multi {
+ .select2-choices, &.select2-container-active .select2-choices {
+ 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 .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-active .select2-choices .select2-search-choice {
+ line-height: 20px;
+ padding-left: 5px;
+ background-image: none;
+ background-color: #f8f8f8;
+ border-color: #f8f8f8;
+ }
+}
+
+.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, &:hover {
+ background-color: #f0f0f0;
+ border-color: #f0f0f0;
+ }
+ }
+ &.select2-container-active .select2-choices .select2-search-choice {
+ &.select2-search-choice-focus, &:hover {
+ background-color: #f0f0f0;
+ border-color: #f0f0f0;
+ }
+ }
+}
+
+.select2-container .select2-choice .select2-search-choice {
+ &.select2-search-choice-focus, &:hover {
+ background-color: #f0f0f0;
+ border-color: #f0f0f0;
+ }
+}
+
+.select2-container-multi {
+ .select2-choices .select2-search-choice .select2-search-choice-close, &.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close {
+ display: none;
+ }
+}
+
+.select2-container .select2-choice .select2-search-choice .select2-search-choice-close {
+ display: none;
+}
+
+.select2-container-multi {
+ .select2-choices .select2-search-field input, &.select2-container-active .select2-choices .select2-search-field input {
+ line-height: 20px;
+ }
+}
+
+.select2-container {
+ .select2-choice .select2-search-field input {
+ line-height: 20px;
+ }
+ margin: 3px 3px 3px 0;
+ &.select2-container-multi .select2-choices {
+ display: flex;
+ flex-wrap: wrap;
+ li {
+ float: none;
+ }
+ }
+ .select2-choice {
+ padding-left: 38px;
+ .select2-arrow {
+ background: none;
+ border-radius: 0;
+ border: none;
+ b {
+ background: url('../img/actions/triangle-s.svg') no-repeat center !important;
+ opacity: .5;
+ }
+ }
+ &:hover .select2-arrow b, &:focus .select2-arrow b, &:active .select2-arrow b {
+ opacity: .7;
+ }
+ }
+}
+
+/* jQuery UI fixes */
+
+.ui-menu {
+ padding: 0;
+ .ui-menu-item a {
+ &.ui-state-focus, &.ui-state-active {
+ font-weight: inherit;
+ margin: 0;
+ }
+ }
+}
+
+.ui-widget-content {
+ background: #fff;
+ border-top: none;
+}
+
+.ui-corner-all {
+ border-radius: 0;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+.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;
+ background: #f8f8f8;
+}
+
+/* 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'], &[type='button'] {
+ width: auto;
+ min-width: 25px;
+ padding: 5px;
+ background-color: rgba(240, 240, 240, 0.9);
+ font-weight: 600;
+ color: #555;
+ border: 1px solid rgba(240, 240, 240, 0.9);
+ cursor: pointer;
+ }
+}
+
+button, .button, #quota, select, .pager li a {
+ width: auto;
+ min-width: 25px;
+ padding: 5px;
+ background-color: rgba(240, 240, 240, 0.9);
+ font-weight: 600;
+ color: #555;
+ border: 1px solid rgba(240, 240, 240, 0.9);
+ cursor: pointer;
+}
+
+select, .button.multiselect {
+ font-weight: 400;
+}
+
+input {
+ &[type='submit'] {
+ &:hover, &:focus {
+ background-color: rgba(255, 255, 255, 0.95);
+ color: #111;
+ }
+ }
+ &[type='button'] {
+ &:hover, &:focus {
+ background-color: rgba(255, 255, 255, 0.95);
+ color: #111;
+ }
+ }
+}
+
+button {
+ &:hover, &:focus {
+ background-color: rgba(255, 255, 255, 0.95);
+ color: #111;
+ }
+}
+
+.button {
+ &:hover, &:focus, a:focus {
+ background-color: rgba(255, 255, 255, 0.95);
+ color: #111;
+ }
+}
+
+select {
+ &:hover, &:focus, &:active {
+ background-color: rgba(255, 255, 255, 0.95);
+ color: #111;
+ }
+}
+
+input {
+ &[type='submit'] img, &[type='button'] img {
+ cursor: pointer;
+ }
+}
+
+button img, .button img {
+ cursor: pointer;
+}
+
+#header .button {
+ border: none;
+ box-shadow: none;
+}
+
+/* disabled input fields and buttons */
+
+input:disabled {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+ &:hover, &:focus {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+ }
+}
+
+button:disabled {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+ &:hover, &:focus {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+ }
+}
+
+.button:disabled {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+ &:hover, &:focus {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+ }
+}
+
+a.disabled {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+ &:hover, &:focus {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+ }
+}
+
+textarea:disabled {
+ background-color: rgba(230, 230, 230, 0.9);
+ color: #999;
+ cursor: default;
+}
+
+input:disabled {
+ + label, &:hover + label, &:focus + label {
+ color: #999 !important;
+ cursor: default;
+ }
+}
+
+/* Primary action button, use sparingly */
+
+.primary {
+ border: 1px solid #0082c9;
+ background-color: #00a2e9;
+ color: #fff;
+}
+
+input {
+ &[type='submit'].primary, &[type='button'].primary {
+ border: 1px solid #0082c9;
+ background-color: #00a2e9;
+ color: #fff;
+ }
+}
+
+button.primary, .button.primary {
+ border: 1px solid #0082c9;
+ background-color: #00a2e9;
+ color: #fff;
+}
+
+.primary:hover {
+ background-color: #0092d9;
+ color: #fff;
+}
+
+input {
+ &[type='submit'].primary:hover, &[type='button'].primary:hover {
+ background-color: #0092d9;
+ color: #fff;
+ }
+}
+
+button.primary:hover, .button.primary:hover, .primary:focus {
+ background-color: #0092d9;
+ color: #fff;
+}
+
+input {
+ &[type='submit'].primary:focus, &[type='button'].primary:focus {
+ background-color: #0092d9;
+ color: #fff;
+ }
+}
+
+button.primary:focus, .button.primary:focus {
+ background-color: #0092d9;
+ color: #fff;
+}
+
+.primary:active {
+ background-color: #00a2e9;
+ color: #bbb;
+}
+
+input {
+ &[type='submit'].primary:active, &[type='button'].primary:active {
+ background-color: #00a2e9;
+ color: #bbb;
+ }
+}
+
+button.primary:active, .button.primary:active, .primary:disabled {
+ background-color: #00a2e9;
+ color: #bbb;
+}
+
+input {
+ &[type='submit'].primary:disabled, &[type='button'].primary:disabled {
+ background-color: #00a2e9;
+ color: #bbb;
+ }
+}
+
+button.primary:disabled, .button.primary:disabled, .primary:disabled:hover {
+ background-color: #00a2e9;
+ color: #bbb;
+}
+
+input {
+ &[type='submit'].primary:disabled:hover, &[type='button'].primary:disabled:hover {
+ background-color: #00a2e9;
+ color: #bbb;
+ }
+}
+
+button.primary:disabled:hover, .button.primary:disabled:hover, .primary:disabled:focus {
+ background-color: #00a2e9;
+ color: #bbb;
+}
+
+input {
+ &[type='submit'].primary:disabled:focus, &[type='button'].primary:disabled:focus {
+ background-color: #00a2e9;
+ color: #bbb;
+ }
+}
+
+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;
+}
projects / nextcloud-server.git / commitdiff