diff options
Diffstat (limited to 'app/assets/stylesheets/startup/startup-signin.scss')
-rw-r--r-- | app/assets/stylesheets/startup/startup-signin.scss | 458 |
1 files changed, 402 insertions, 56 deletions
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index c0e2d8d44d4..edc579f48f6 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -11,6 +11,9 @@ html { font-family: sans-serif; line-height: 1.15; } +header { + display: block; +} body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, @@ -28,7 +31,8 @@ hr { height: 0; overflow: visible; } -h1 { +h1, +h3 { margin-top: 0; margin-bottom: 0.25rem; } @@ -49,26 +53,49 @@ img { vertical-align: middle; border-style: none; } +svg { + overflow: hidden; + vertical-align: middle; +} label { display: inline-block; margin-bottom: 0.5rem; } -input { +button { + border-radius: 0; +} +input, +button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } +button, input { overflow: visible; } +button { + text-transform: none; +} +[role="button"] { + cursor: pointer; +} +button:not(:disabled), +[type="button"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } +input[type="checkbox"] { + box-sizing: border-box; + padding: 0; +} fieldset { min-width: 0; padding: 0; @@ -78,7 +105,8 @@ fieldset { [hidden] { display: none !important; } -h1 { +h1, +h3 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; @@ -87,6 +115,9 @@ h1 { h1 { font-size: 2.1875rem; } +h3 { + font-size: 1.53125rem; +} hr { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -120,23 +151,42 @@ hr { max-width: 1140px; } } -.col-sm-12, -.col { +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} +.col-md-6, +.col-sm-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } -.col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.order-1 { + order: 1; +} +.order-12 { + order: 12; } @media (min-width: 576px) { .col-sm-12 { flex: 0 0 100%; max-width: 100%; } + .order-sm-1 { + order: 1; + } + .order-sm-12 { + order: 12; + } +} +@media (min-width: 768px) { + .col-md-6 { + flex: 0 0 50%; + max-width: 50%; + } } .form-control { display: block; @@ -169,16 +219,6 @@ hr { .form-group { margin-bottom: 1rem; } -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; -} -.form-row > .col { - padding-right: 5px; - padding-left: 5px; -} .btn { display: inline-block; font-weight: 400; @@ -204,6 +244,137 @@ hr { fieldset:disabled a.btn { pointer-events: none; } +.btn-block { + display: block; + width: 100%; +} +.btn-block + .btn-block { + margin-top: 0.5rem; +} +input.btn-block[type="submit"], +input.btn-block[type="button"] { + width: 100%; +} +.custom-control { + position: relative; + z-index: 1; + display: block; + min-height: 1.5rem; + padding-left: 1.5rem; + color-adjust: exact; +} +.custom-control-input { + position: absolute; + left: 0; + z-index: -1; + width: 1rem; + height: 1.25rem; + opacity: 0; +} +.custom-control-input:checked ~ .custom-control-label::before { + color: #fff; + border-color: #007bff; + background-color: #007bff; +} +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + color: #fff; + background-color: #b3d7ff; + border-color: #b3d7ff; +} +.custom-control-input:disabled ~ .custom-control-label { + color: #5e5e5e; +} +.custom-control-input:disabled ~ .custom-control-label::before { + background-color: #fafafa; +} +.custom-control-label { + position: relative; + margin-bottom: 0; + vertical-align: top; +} +.custom-control-label::before { + position: absolute; + top: 0.25rem; + left: -1.5rem; + display: block; + width: 1rem; + height: 1rem; + pointer-events: none; + content: ""; + background-color: #fff; + border: #666 solid 1px; +} +.custom-control-label::after { + position: absolute; + top: 0.25rem; + left: -1.5rem; + display: block; + width: 1rem; + height: 1rem; + content: ""; + background: no-repeat 50% / 50% 50%; +} +.custom-checkbox .custom-control-label::before { + border-radius: 0.25rem; +} +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); +} +.custom-checkbox + .custom-control-input:indeterminate + ~ .custom-control-label::before { + border-color: #007bff; + background-color: #007bff; +} +.custom-checkbox + .custom-control-input:indeterminate + ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); +} +.custom-checkbox + .custom-control-input:disabled:checked + ~ .custom-control-label::before { + background-color: rgba(0, 123, 255, 0.5); +} +.custom-checkbox + .custom-control-input:disabled:indeterminate + ~ .custom-control-label::before { + background-color: rgba(0, 123, 255, 0.5); +} +@media (prefers-reduced-motion: reduce) { +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0.25rem 0.5rem; +} +.navbar .container { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +.clearfix::after { + display: block; + clear: both; + content: ""; +} +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} .mt-3 { margin-top: 1rem !important; } @@ -213,8 +384,8 @@ fieldset:disabled a.btn { .text-nowrap { white-space: nowrap !important; } -.text-center { - text-align: center !important; +.font-weight-normal { + font-weight: 400 !important; } .gl-form-input, .gl-form-input.form-control { @@ -245,19 +416,109 @@ fieldset:disabled a.btn { .gl-form-input:disabled, .gl-form-input.form-control:disabled { cursor: not-allowed; - color: #868686; + color: #666; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { color: #868686; } +.gl-form-checkbox { + font-size: 0.875rem; + line-height: 1rem; + color: #303030; +} +.gl-form-checkbox .custom-control-input:disabled, +.gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label { + cursor: not-allowed; + color: #868686; +} +.gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label { + cursor: pointer; +} +.gl-form-checkbox.custom-control + .custom-control-input + ~ .custom-control-label::before, +.gl-form-checkbox.custom-control + .custom-control-input + ~ .custom-control-label::after { + top: 0; +} +.gl-form-checkbox.custom-control + .custom-control-input + ~ .custom-control-label::before { + background-color: #fff; + border-color: #868686; +} +.gl-form-checkbox.custom-control + .custom-control-input:checked + ~ .custom-control-label::before { + background-color: #1f75cb; + border-color: #1f75cb; +} +.gl-form-checkbox.custom-control + .custom-control-input[type="checkbox"]:checked + ~ .custom-control-label::after, +.gl-form-checkbox.custom-control + .custom-control-input[type="checkbox"]:indeterminate + ~ .custom-control-label::after { + background: none; + background-color: #fff; + mask-repeat: no-repeat; + mask-position: center center; +} +.gl-form-checkbox.custom-control + .custom-control-input[type="checkbox"]:checked + ~ .custom-control-label::after { + mask-image: url('data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 3.05299L2.99123 5L7 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A'); +} +.gl-form-checkbox.custom-control + .custom-control-input[type="checkbox"]:indeterminate + ~ .custom-control-label::after { + mask-image: url('data:image/svg+xml,%3Csvg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 1L8 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A'); +} +.gl-form-checkbox.custom-control.custom-checkbox + .custom-control-input:indeterminate + ~ .custom-control-label::before { + background-color: #1f75cb; + border-color: #1f75cb; +} +.gl-form-checkbox.custom-control + .custom-control-input:disabled + ~ .custom-control-label { + cursor: not-allowed; +} +.gl-form-checkbox.custom-control + .custom-control-input:disabled + ~ .custom-control-label::before { + background-color: #f0f0f0; + border-color: #dbdbdb; + pointer-events: auto; +} +.gl-form-checkbox.custom-control + .custom-control-input:checked:disabled + ~ .custom-control-label::before, +.gl-form-checkbox.custom-control + .custom-control-input:indeterminate:disabled + ~ .custom-control-label::before { + background-color: #dbdbdb; + border-color: #dbdbdb; +} +.gl-form-checkbox.custom-control + .custom-control-input:checked:disabled + ~ .custom-control-label::after, +.gl-form-checkbox.custom-control + .custom-control-input:indeterminate:disabled + ~ .custom-control-label::after { + background-color: #5e5e5e; +} .gl-button { display: inline-flex; } .gl-button:not(.btn-link):active { text-decoration: none; } -.gl-button.gl-button { +.gl-button.gl-button, +.gl-button.gl-button.btn-block { border-width: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -273,7 +534,8 @@ fieldset:disabled a.btn { font-size: 0.875rem; border-radius: 0.25rem; } -.gl-button.gl-button .gl-button-text { +.gl-button.gl-button .gl-button-text, +.gl-button.gl-button.btn-block .gl-button-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -282,29 +544,39 @@ fieldset:disabled a.btn { margin-top: -1px; margin-bottom: -1px; } -.gl-button.gl-button .gl-button-icon { +.gl-button.gl-button .gl-button-icon, +.gl-button.gl-button.btn-block .gl-button-icon { height: 1rem; width: 1rem; flex-shrink: 0; margin-right: 0.25rem; top: auto; } -.gl-button.gl-button.btn-default { +.gl-button.gl-button.btn-default, +.gl-button.gl-button.btn-block.btn-default { background-color: #fff; } -.gl-button.gl-button.btn-default:active { +.gl-button.gl-button.btn-default:active, +.gl-button.gl-button.btn-default.active, +.gl-button.gl-button.btn-block.btn-default:active, +.gl-button.gl-button.btn-block.btn-default.active { box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; background-color: #dbdbdb; } -.gl-button.gl-button.btn-confirm { +.gl-button.gl-button.btn-confirm, +.gl-button.gl-button.btn-block.btn-confirm { color: #fff; } -.gl-button.gl-button.btn-confirm { +.gl-button.gl-button.btn-confirm, +.gl-button.gl-button.btn-block.btn-confirm { background-color: #1f75cb; box-shadow: inset 0 0 0 1px #1068bf; } -.gl-button.gl-button.btn-confirm:active { +.gl-button.gl-button.btn-confirm:active, +.gl-button.gl-button.btn-confirm.active, +.gl-button.gl-button.btn-block.btn-confirm:active, +.gl-button.gl-button.btn-block.btn-confirm.active { box-shadow: inset 0 0 0 1px #033464, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; background-color: #0b5cad; @@ -312,10 +584,14 @@ fieldset:disabled a.btn { body { font-size: 0.875rem; } -[type="submit"] { +button, +html [type="button"], +[type="submit"], +[role="button"] { cursor: pointer; } -h1 { +h1, +h3 { margin-top: 20px; margin-bottom: 10px; } @@ -325,6 +601,9 @@ a { hr { overflow: hidden; } +svg { + vertical-align: baseline; +} .form-control { font-size: 0.875rem; } @@ -332,15 +611,9 @@ hr { display: none !important; visibility: hidden !important; } -.hide { - display: none; -} html { overflow-y: scroll; } -body { - text-decoration-skip: ink; -} body.navless { background-color: #fff !important; } @@ -375,13 +648,34 @@ body.navless { background-color: #f0f0f0; box-shadow: none; } -.btn:active { +.btn:active, +.btn.active { background-color: #eaeaea; border-color: #e3e3e3; color: #303030; } -.light { - color: #303030; +.btn svg { + height: 15px; + width: 15px; +} +.btn svg:not(:last-child) { + margin-right: 5px; +} +.btn-block { + width: 100%; + margin: 0; + margin-bottom: 1rem; +} +.btn-block.btn { + padding: 6px 0; +} +.tab-content { + overflow: visible; +} +@media (max-width: 767.98px) { + .tab-content { + isolation: isolate; + } } hr { margin: 1.5rem 0; @@ -419,6 +713,9 @@ input { label { font-weight: 600; } +label.custom-control-label { + font-weight: 400; +} label.label-bold { font-weight: 600; } @@ -432,8 +729,25 @@ label.label-bold { .gl-show-field-errors .form-control:not(textarea) { height: 34px; } -.gl-show-field-errors .gl-field-hint { - color: #303030; +.navbar-empty { + justify-content: center; + height: var(--header-height, 48px); + background: #fff; + border-bottom: 1px solid #dbdbdb; +} +.navbar-empty .tanuki-logo, +.navbar-empty .brand-header-logo { + max-height: 100%; +} +.tanuki-logo .tanuki { + fill: #e24329; +} +.tanuki-logo .left-cheek, +.tanuki-logo .right-cheek { + fill: #fc6d26; +} +.tanuki-logo .chin { + fill: #fca326; } input::-moz-placeholder { color: #868686; @@ -445,6 +759,9 @@ input::-ms-input-placeholder { input:-ms-input-placeholder { color: #868686; } +svg { + fill: currentColor; +} .login-page .container { max-width: 960px; } @@ -477,6 +794,10 @@ input:-ms-input-placeholder { .login-page p { font-size: 13px; } +.login-page .signin-text p { + margin-bottom: 0; + line-height: 1.5; +} .login-page .borderless .login-box, .login-page .borderless .omniauth-container { box-shadow: none; @@ -549,6 +870,16 @@ input:-ms-input-placeholder { border-top-right-radius: 4px; border-top-left-radius: 4px; } +.login-page .new-session-tabs.nav-links-unboxed { + border-color: transparent; + box-shadow: none; +} +.login-page .new-session-tabs.nav-links-unboxed .nav-item { + border-left: 0; + border-right: 0; + border-bottom: 1px solid #dbdbdb; + background-color: transparent; +} .login-page .new-session-tabs.custom-provider-tabs { flex-wrap: wrap; } @@ -648,14 +979,20 @@ input:-ms-input-placeholder { } } -.gl-text-green-600 { - color: #217645; +.gl-display-flex { + display: flex; } -.gl-text-red-500 { - color: #dd2b0e; +.gl-display-inline-block { + display: inline-block; } -.gl-display-block { - display: block; +.gl-flex-wrap { + flex-wrap: wrap; +} +.gl-justify-content-center { + justify-content: center; +} +.gl-float-right { + float: right; } .gl-w-10 { width: 3.5rem; @@ -674,14 +1011,18 @@ input:-ms-input-placeholder { width: 100%; } } -.gl-p-4 { - padding: 0.75rem; +.gl-p-5 { + padding: 1rem; +} +.gl-px-5 { + padding-left: 1rem; + padding-right: 1rem; } .gl-pt-5 { padding-top: 1rem; } -.gl-mt-2 { - margin-top: 0.25rem; +.gl-mt-3 { + margin-top: 0.5rem; } .gl-mt-5 { margin-top: 1rem; @@ -701,15 +1042,17 @@ input:-ms-input-placeholder { .gl-mb-3 { margin-bottom: 0.5rem; } -.gl-mb-5 { - margin-bottom: 1rem; -} .gl-ml-auto { margin-left: auto; } .gl-ml-2 { margin-left: 0.25rem; } +@media (min-width: 576px) { + .gl-sm-mt-0 { + margin-top: 0; + } +} .gl-text-center { text-align: center; } @@ -719,6 +1062,9 @@ input:-ms-input-placeholder { .gl-font-weight-normal { font-weight: 400; } +.gl-font-weight-bold { + font-weight: 600; +} @import "startup/cloaking"; @include cloak-startup-scss(none); |