diff options
26 files changed, 341 insertions, 655 deletions
diff --git a/apps/files_sharing/css/authenticate.css b/apps/files_sharing/css/authenticate.css index 55a40cf508d..16687916ac4 100644 --- a/apps/files_sharing/css/authenticate.css +++ b/apps/files_sharing/css/authenticate.css @@ -9,12 +9,8 @@ input[type='submit'] { margin: 6px; } -#body-login input[type='submit'] { - position: absolute; - top: 0; - border: none; -} - fieldset > p { position: relative; + display: flex; + align-items: center; } diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css index 94183cf0057..70df204a696 100644 --- a/apps/files_sharing/css/public.css +++ b/apps/files_sharing/css/public.css @@ -107,29 +107,30 @@ thead { max-width: 90%; } +/* header buttons */ +#details { + display: inline-flex; +} +#details button, +#details input, +#details .button { + margin: 0 5px; + line-height: normal; +} +#details button:hover, +#details input:hover, +#details .button:hover { + /* No */ + border-color: rgba(0,0,0,0.3) !important; +} + /* within #save */ #save .save-form { position: relative; } #remote_address { - margin: 0; - width: 130px; - height: 14px; - padding: 6px; - padding-right: 24px; -} - -.ie8 #remote_address { - padding-right: 30px; -} - -#save #save-button, -#save #save-button-confirm { - margin: 0 5px; - height: 28px; - padding-bottom: 4px; - line-height: 14px; + width: 200px; } #save-button-confirm { @@ -137,31 +138,9 @@ thead { background-color: transparent; border: none; margin: 2px 4px !important; - right: 0; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); - opacity: .5; -} - -.ie8 #save-button-confirm { - margin: 2px 0 !important; -} - -#save-button-confirm:disabled, -#save-button-confirm:disabled:hover, -#save-button-confirm:disabled:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; - filter: alpha(opacity=20); - opacity: .2; - cursor: default; -} - -#save-button-confirm:hover, -#save-button-confirm:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; - cursor: pointer; + right: 4px; + box-shadow: none; + height: 30px; } #public-upload .avatardiv { diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js index 0045c7156d2..ad3ef856f23 100644 --- a/apps/files_sharing/js/public.js +++ b/apps/files_sharing/js/public.js @@ -259,7 +259,7 @@ OCA.Sharing.PublicApp = { $('.save-form').submit(function (event) { event.preventDefault(); - var remote = $(this).find('input[type="text"]').val(); + var remote = $(this).find('input[type="email"]').val(); var token = $('#sharingToken').val(); var owner = $('#save').data('owner'); var ownerDisplayName = $('#save').data('owner-display-name'); diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php index 32e4f3d3dd6..2c321f2a398 100644 --- a/apps/files_sharing/templates/public.php +++ b/apps/files_sharing/templates/public.php @@ -58,13 +58,13 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size); data-owner-display-name="<?php p($_['displayName']) ?>" data-owner="<?php p($_['owner']) ?>" data-name="<?php p($_['filename']) ?>"> <button id="save-button"><?php p($l->t('Add to your Nextcloud')) ?></button> <form class="save-form hidden" action="#"> - <input type="text" id="remote_address" placeholder="user@yourNextcloud.org"/> + <input type="email" id="remote_address" placeholder="user@yourNextcloud.org"/> <button id="save-button-confirm" class="icon-confirm svg" disabled></button> </form> </span> <?php } ?> <a href="<?php p($_['downloadURL']); ?>" id="download" class="button"> - <img class="svg" alt="" src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>"/> + <span class="icon icon-download"></span> <span id="download-text"><?php p($l->t('Download'))?></span> </a> <?php } ?> @@ -89,8 +89,8 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size); <div id="imgframe"></div> <?php endif; ?> <div class="directDownload"> - <a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button"> - <img class="svg" alt="" src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>"/> + <a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button primary"> + <span class="icon icon-download"></span> <?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>) </a> </div> diff --git a/core/css/apps.scss b/core/css/apps.scss index 93e60fbfbf1..17eb2c1f9ad 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -214,7 +214,8 @@ em { top: 0; bottom: 0; font-size: 12px; - button, .counter { + button, + .counter { width: 44px; height: 44px; padding-top: 12px; @@ -258,6 +259,7 @@ em { height: 100%; width: 100%; margin: 0; + box-shadow: none; } .app-navigation-entry-utils-menu-button { button { @@ -620,6 +622,7 @@ em { height: auto; margin: 0; font-weight: inherit; + box-shadow: none; /* prevent .action class to break the design */ &.action { padding: inherit !important; diff --git a/core/css/inputs.scss b/core/css/inputs.scss index aa9c841f2b2..a1af00298e5 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -1,163 +1,194 @@ -/* INPUTS */ - -/* specifically override browser styles */ - +/* 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 { +/* Simple selector to allow easy overriding */ +select, +button, +input, +textarea { 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; - } + min-height: 32px; + box-sizing: border-box; } -#quota, .pager li a { - width: 130px; +/* Default global values */ +select, +button, .button, +input:not([type='range']), +textarea, +#quota, .pager li a { margin: 3px 3px 3px 0; - padding: 7px 6px 5px; + padding: 7px 6px; font-size: 13px; background-color: #fff; color: #333; border: 1px solid #ddd; outline: none; border-radius: 3px; -} - -input { - &[type='hidden'] { - height: 0; - width: 0; + &:not(:disabled):not(.primary) { + /* no border on quota */ + &:not(#quota):hover, + &:focus, + &.active { + /* active class used for multiselect */ + border-color: #0082c9; + outline: none; + } + &:active { + outline: none; + background-color: #fff; + } } - &[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 */ + &:disabled { + background-color: #eee; + color: #999; + cursor: default; + opacity: 0.5; + } + /* Primary action button, use sparingly */ + &.primary { + border: 1px solid #0082c9; + background-color: #00a2e9; + color: #fff; + cursor: pointer; + &:not(:disabled) { + &:hover, + &:focus { + background-color: #0092d9; + } + &:active { + background-color: #00a2e9; + } + } + &:disabled { + background-color: #00a2e9; + color: #bbb; + } } } -textarea { - background: #fff; - color: #555; - cursor: text; - font-family: inherit; - /* use default ownCloud font instead of default textarea monospace */ -} - +/* Specific override */ input { - &[type='text'], &[type='password'], &[type='search'], &[type='number'], &[type='email'], &[type='tel'], &[type='url'], &[type='time'] { + &: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; - 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='radio'], + &[type='checkbox'], + &[type='file'], + &[type='image'] { + height: auto; + width: auto; } - &[type='tel'] { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; - } + /* Color input doesn't respect the initial height + so we need to set a custom one */ + &[type='color'] { + margin: 3px; + padding: 0 2px; + min-height: 30px; + width: 40px; + cursor: pointer; } - &[type='url'] { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; - } + &[type='hidden'] { + height: 0; + width: 0; } &[type='time'] { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; + width: initial; + } +} + +/* 'Click' inputs */ +select, +button, .button, +input[type='button'], +input[type='submit'], +input[type='reset'] { + padding: 6px 12px; + width: auto; + min-height: 34px; + cursor: pointer; + box-sizing: border-box; + background-color: #fafafa; + box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15); + &:active, + &.active { + box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); + } +} + +/* Buttons */ +button, .button, +input[type='button'], +input[type='submit'], +input[type='reset'] { + font-weight: bold; + /* Get rid of the ugly firefox dotted line */ + &::-moz-focus-inner { + border: 0; + } +} +button, .button { + > span { + /* icon position inside buttons */ + &[class^='icon-'], + &[class*=' icon-'] { + display: inline-block; + vertical-align: text-bottom; + opacity: 0.5; } } } textarea { - &:hover, &:focus, &:active { - color: #333; - -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; - opacity: 1; + color: #555; + cursor: text; + font-family: inherit; + height: auto; + &:not(:disabled) { + &:active, + &:hover, + &:focus { + border-color: #ddd !important; + background-color: #fff !important; + } } } +/* Override the ugly select arrow */ +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: url('../img/actions/triangle-s.svg') no-repeat right 4px center; + background-color: inherit; + outline: 0; + padding-right: 24px !important; +} + +/* Various Fixes */ +button img, +.button img { + cursor: pointer; +} +#quota { + color: #555; +} +select, +.button.multiselect { + font-weight: 400; +} + +/* Radio & Checkboxes */ input { - &[type='checkbox'] { + &[type='checkbox'], + &[type='radio'] { + &.radio, &.checkbox { position: absolute; left: -10000px; @@ -165,126 +196,109 @@ input { width: 1px; height: 1px; overflow: hidden; + + label { + user-select: none; + } + &:disabled + label, + &:disabled + label:before { + cursor: default; + } + label:before { content: ''; display: inline-block; - height: 20px; - width: 20px; + height: 12px; + width: 12px; vertical-align: middle; - background: url('../img/actions/checkbox.svg') left top no-repeat; - } - &:disabled + label:before { - opacity: .6; + border-radius: 50%; + margin: 3px; + margin-top: 1px; + border: 1px solid #888; } - &.u-left + label:before { - float: left; + &:not(:disabled):not(:checked) + label:hover:before, + &:focus + label:before { + border-color: #0082c9; } - &.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'); + &:checked + label:before, + &.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 #fff; + background-color: #0082c9; + border-color: #0082c9 } &:disabled + label:before { - background-image: url('../img/actions/checkbox-disabled.svg'); + background-color: #ccc !important; /* override other status */ } &: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'); + box-shadow: inset 0px 0px 0px 2px #fff; + border-color: #aaa; + background-color: #bbb; } } - &.checkbox--white { + &.checkbox { + label:before { - background-image: url('../img/actions/checkbox-white.svg'); + border-radius: 1px; + height: 10px; + width: 10px; + box-shadow: none !important; + background-position: center; } &:checked + label:before { - background-image: url('../img/actions/checkbox-checked-white.svg'); + background-image: url('../img/actions/checkbox-mark.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'); + background-image: url('../img/actions/checkbox-mixed.svg'); } &:indeterminate:disabled + label:before { - background-image: url('../img/actions/checkbox-mixed-disabled.svg'); + border-color: #888; } } - &.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; + &.radio--white, + &.checkbox--white { + label:before { - content: ''; - display: inline-block; - height: 20px; - width: 20px; - vertical-align: middle; - background: url('../img/actions/radio.svg') left top no-repeat; + border-color: #aaa; } - &:checked + label:before { - background-image: url('../img/actions/radio-checked.svg'); + &:not(:disabled):not(:checked) + label:hover:before, + &:focus + label:before { + border-color: #fff; + } + &:checked + label:before, + &.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 #000; + background-color: #eee; + border-color: #eee } &:disabled + label:before { - background-image: url('../img/actions/radio-disabled.svg'); + background-color: #666 !important; /* override other status */ + border-color: #999 !important; /* override other status */ } &:checked:disabled + label:before { - background-image: url('../img/actions/radio-checked-disabled.svg'); + box-shadow: inset 0px 0px 0px 2px #000; + border-color: #666; + background-color: #222; } } - &.radio--white { - + label:before { - background-image: url('../img/actions/radio-white.svg'); - } + &.checkbox--white { &:checked + label:before { - background-image: url('../img/actions/radio-checked-white.svg'); + background-image: url('../img/actions/checkbox-mark-white.svg'); } - &:disabled + label:before { - background-image: url('../img/actions/radio-disabled.svg'); + &:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed-white.svg'); } - &:checked:disabled + label:before { - background-image: url('../img/actions/radio-checked-disabled.svg'); + &:checked:disabled + label:after { + border-color: #aaa; + } + &:indeterminate:disabled + label:after { + background-color: #aaa; } } } - &[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 { +/* Select2 overriding. Merged to core with vendor stylesheet */ +.select2-drop { margin-top: -2px; &.select2-drop-active { border-color: #ddd; @@ -297,15 +311,7 @@ select { 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; @@ -322,7 +328,9 @@ select { cursor: pointer; } } - .select2-result, .select2-no-results, .select2-searching { + .select2-result, + .select2-no-results, + .select2-searching { position: relative; display: list-item; padding: 12px; @@ -341,9 +349,16 @@ select { } } } - +.select2-chosen, +#select2-drop { + .avatar, + .avatar img { + cursor: pointer; + } +} .select2-container-multi { - .select2-choices, &.select2-container-active .select2-choices { + .select2-choices, + &.select2-container-active .select2-choices { box-shadow: none; white-space: nowrap; text-overflow: ellipsis; @@ -355,83 +370,28 @@ select { 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-search-choice { + line-height: 20px; + padding-left: 5px; + &.select2-search-choice-focus, + &:hover, + &:active, + & { + background-image: none; + background-color: #fff; + color: #333; + border: 1px solid #ddd; + } + .select2-search-choice-close { + display: none; + } } - } - &.select2-container-active .select2-choices .select2-search-choice { - &.select2-search-choice-focus, &:hover { - background-color: #f0f0f0; - border-color: #f0f0f0; + .select2-search-field input { + line-height: 20px; } } } - -.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; @@ -441,7 +401,33 @@ select { } } .select2-choice { - padding-left: 38px; + 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; + padding-left: 6px; + min-height: auto; + .select2-search-choice { + line-height: 20px; + padding-left: 5px; + background-image: none; + background-color: #f8f8f8; + border-color: #f8f8f8; + .select2-search-choice-close { + display: none; + } + &.select2-search-choice-focus, + &:hover { + background-color: #f0f0f0; + border-color: #f0f0f0; + } + } .select2-arrow { background: none; border-radius: 0; @@ -451,14 +437,19 @@ select { opacity: .5; } } - &:hover .select2-arrow b, &:focus .select2-arrow b, &:active .select2-arrow b { + &:hover .select2-arrow b, + &:focus .select2-arrow b, + &:active .select2-arrow b { opacity: .7; } + .select2-search-field input { + line-height: 20px; + } } } -/* jQuery UI fixes */ - +/* Select menus - TODO: move to jquery-ui-fixes.css +----------------------------------*/ .ui-menu { padding: 0; .ui-menu-item a { @@ -485,298 +476,28 @@ select { 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; -} - +/* Animation */ @keyframes shake { - 0% { - transform: translate(-5px, 0); + 10%, + 90% { + transform: translate(-1px); } - - 20% { - transform: translate(5px, 0); + 20%, + 80% { + transform: translate(2px); } - - 40% { - transform: translate(-5px, 0); + 30%, + 50%, + 70% { + transform: translate(-4px); } - + 40%, 60% { - transform: translate(5px, 0); - } - - 80% { - transform: translate(-5px, 0); - } - - 100% { - transform: translate(5px, 0); + transform: translate(4px); } } - - .shake { animation-name: shake; - animation-duration: .3s; + animation-duration: .7s; animation-timing-function: ease-out; } diff --git a/core/css/styles.scss b/core/css/styles.scss index affaec14342..27ce681391a 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -567,14 +567,13 @@ label.infield { } #pass2, input[name='personal-password-clone'] { - padding: .6em 2.5em .4em .4em; - width: 8em; + padding-right: 30px; } #personal-show + label { height: 14px; margin-top: -25px; - left: 295px; + left: 267px; display: block; } @@ -724,9 +723,9 @@ label.infield { #body-login input { font-size: 20px; margin: 5px; - padding: 11px 10px 9px; + padding: 10px 10px 8px; &[type='text'], &[type='password'] { - width: 249px; + width: calc(100% - 10px); /* 5px margin */ } &.login { width: 269px; diff --git a/core/img/actions/checkbox-checked-disabled.svg b/core/img/actions/checkbox-checked-disabled.svg deleted file mode 100644 index 8b0118da343..00000000000 --- a/core/img/actions/checkbox-checked-disabled.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#969696"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-checked-white.svg b/core/img/actions/checkbox-checked-white.svg deleted file mode 100644 index 8043bd463be..00000000000 --- a/core/img/actions/checkbox-checked-white.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-checked.svg b/core/img/actions/checkbox-checked.svg deleted file mode 100644 index bd9241d664c..00000000000 --- a/core/img/actions/checkbox-checked.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm8.924 2.066l1.433 1.432-6.365 6.365L2.75 7.62l1.414-1.415 2.828 2.83 4.932-4.97z" fill="#0082c9"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-disabled-white.svg b/core/img/actions/checkbox-disabled-white.svg deleted file mode 100644 index c5cf4a66585..00000000000 --- a/core/img/actions/checkbox-disabled-white.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-disabled.svg b/core/img/actions/checkbox-disabled.svg deleted file mode 100644 index fa73b4f4352..00000000000 --- a/core/img/actions/checkbox-disabled.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-mark-white.svg b/core/img/actions/checkbox-mark-white.svg new file mode 100644 index 00000000000..8407898164b --- /dev/null +++ b/core/img/actions/checkbox-mark-white.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-mark.svg b/core/img/actions/checkbox-mark.svg new file mode 100644 index 00000000000..1013b6cc3f2 --- /dev/null +++ b/core/img/actions/checkbox-mark.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-mixed-disabled.svg b/core/img/actions/checkbox-mixed-disabled.svg deleted file mode 100644 index 2e8e98fb9fc..00000000000 --- a/core/img/actions/checkbox-mixed-disabled.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#dcdcdc"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/><path d="M4 7h8v2H4z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-mixed-white.svg b/core/img/actions/checkbox-mixed-white.svg index ca7d92bbeed..c66636717be 100644 --- a/core/img/actions/checkbox-mixed-white.svg +++ b/core/img/actions/checkbox-mixed-white.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm1 5h8v2H4V7z" fill="#fff"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7v2h8V7H4z"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-mixed.svg b/core/img/actions/checkbox-mixed.svg index 8a1412bf849..308baae3920 100644 --- a/core/img/actions/checkbox-mixed.svg +++ b/core/img/actions/checkbox-mixed.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm1 5h8v2H4V7z" fill="#969696"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7v2h8V7H4z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox-white.svg b/core/img/actions/checkbox-white.svg deleted file mode 100644 index 1a0cd569e1c..00000000000 --- a/core/img/actions/checkbox-white.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/core/img/actions/checkbox.svg b/core/img/actions/checkbox.svg deleted file mode 100644 index 46cad084ab5..00000000000 --- a/core/img/actions/checkbox.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2.5 2.5h11v11h-11z" fill="#fff"/><path d="M3 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h10c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1H3zm0 1h10v10H3V3z" fill="#969696"/></svg>
\ No newline at end of file diff --git a/core/img/actions/radio-checked-disabled.svg b/core/img/actions/radio-checked-disabled.svg deleted file mode 100644 index 470293c2960..00000000000 --- a/core/img/actions/radio-checked-disabled.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#969696"/></svg>
\ No newline at end of file diff --git a/core/img/actions/radio-checked-white.svg b/core/img/actions/radio-checked-white.svg deleted file mode 100644 index d024c91ff19..00000000000 --- a/core/img/actions/radio-checked-white.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/core/img/actions/radio-checked.svg b/core/img/actions/radio-checked.svg deleted file mode 100644 index bb4c622a9f7..00000000000 --- a/core/img/actions/radio-checked.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#0082c9"/></svg>
\ No newline at end of file diff --git a/core/img/actions/radio-disabled.svg b/core/img/actions/radio-disabled.svg deleted file mode 100644 index e6bf778f192..00000000000 --- a/core/img/actions/radio-disabled.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#dcdcdc"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#969696"/></svg>
\ No newline at end of file diff --git a/core/img/actions/radio-white.svg b/core/img/actions/radio-white.svg deleted file mode 100644 index 0eda991c4d3..00000000000 --- a/core/img/actions/radio-white.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/core/img/actions/radio.svg b/core/img/actions/radio.svg deleted file mode 100644 index 31a364b88e0..00000000000 --- a/core/img/actions/radio.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z" fill="#fff"/><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z" fill="#969696"/></svg>
\ No newline at end of file diff --git a/settings/css/settings.css b/settings/css/settings.css index 557395c5717..bdeca980781 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -399,7 +399,7 @@ table.grid th, table.grid td { font-weight: normal; } td.name, td.password { padding-left:.8em; } -td.password>img,td.displayName>img, td.remove>a, td.quota>img { visibility:hidden; } +td.password>img,td.displayName>img, td.remove>a, td.quota>img { visibility:hidden; vertical-align: middle;} td.password, td.quota, td.displayName { width:12em; cursor:pointer; } td.password>span, td.quota>span, rd.displayName>span { margin-right: 1.2em; color: #C7C7C7; } span.usersLastLoginTooltip { white-space: nowrap; } @@ -804,9 +804,9 @@ span.indeterminate { /* PASSWORD */ #passwordform .strengthify-wrapper { position: absolute; - left: 186px; - width: 131px; - margin-top: -7px; + left: 166px; + width: 130px; + margin-top: -6px; } /* OPERA hack for strengthify*/ |
