From 0a4265406bf1ab797f1d41d8cb48dbde0f862b63 Mon Sep 17 00:00:00 2001 From: Kyle Wiebers <kwiebers@gitlab.com> Date: Wed, 2 Jun 2021 14:54:02 +0000 Subject: [PATCH] Revert "Merge branch 'ps-add-startup-css-check' into 'master'" This reverts merge request !62836 --- .gitlab/ci/frontend.gitlab-ci.yml | 27 - .gitlab/ci/rules.gitlab-ci.yml | 11 - .stylelintrc | 1 - app/assets/stylesheets/pages/login.scss | 4 - app/assets/stylesheets/pages/search.scss | 1 - .../stylesheets/startup/startup-dark.scss | 1615 ++++++------ .../stylesheets/startup/startup-general.scss | 1241 +++++----- .../stylesheets/startup/startup-signin.scss | 2197 ++++++++++++++--- app/views/layouts/_head.html.haml | 2 +- app/views/layouts/_startup_css.haml | 3 +- app/views/layouts/devise.html.haml | 2 +- .../stylesheets/startup/startup-dark.scss | 2118 ---------------- .../stylesheets/startup/startup-general.scss | 1901 -------------- .../stylesheets/startup/startup-signin.scss | 894 ------- package.json | 1 - scripts/frontend/startup_css/constants.js | 63 +- .../startup_css/startup_css_changed.sh | 36 - .../startup_css/write_startup_scss.js | 2 +- spec/frontend/fixtures/startup_css.rb | 14 +- 19 files changed, 3178 insertions(+), 6955 deletions(-) delete mode 100644 ee/app/assets/stylesheets/startup/startup-dark.scss delete mode 100644 ee/app/assets/stylesheets/startup/startup-general.scss delete mode 100644 ee/app/assets/stylesheets/startup/startup-signin.scss delete mode 100755 scripts/frontend/startup_css/startup_css_changed.sh diff --git a/.gitlab/ci/frontend.gitlab-ci.yml b/.gitlab/ci/frontend.gitlab-ci.yml index a772c1b847f11..33aab8554e732 100644 --- a/.gitlab/ci/frontend.gitlab-ci.yml +++ b/.gitlab/ci/frontend.gitlab-ci.yml @@ -317,30 +317,3 @@ bundle-size-review: expire_in: 31d paths: - bundle-size-review - -.startup-css-check-base: - extends: - - .frontend-test-base - script: - - *yarn-install - - run_timed_command "yarn generate:startup_css" - - yarn check:startup_css - -startup-css-check: - extends: - - .startup-css-check-base - - .frontend:rules:startup-css-check - needs: - - job: "compile-test-assets" - - job: "rspec frontend_fixture" - - job: "rspec-ee frontend_fixture" - optional: true - -startup-css-check as-if-foss: - extends: - - .startup-css-check-base - - .as-if-foss - - .frontend:rules:startup-css-check-as-if-foss - needs: - - job: "compile-test-assets as-if-foss" - - job: "rspec frontend_fixture as-if-foss" diff --git a/.gitlab/ci/rules.gitlab-ci.yml b/.gitlab/ci/rules.gitlab-ci.yml index 0a937f132cdc8..fbc010f90b5fa 100644 --- a/.gitlab/ci/rules.gitlab-ci.yml +++ b/.gitlab/ci/rules.gitlab-ci.yml @@ -485,17 +485,6 @@ changes: *frontend-build-patterns allow_failure: true -.frontend:rules:startup-css-check: - rules: - - changes: *code-backstage-qa-patterns - -.frontend:rules:startup-css-check-as-if-foss: - rules: - - <<: *if-not-ee - when: never - - <<: *if-merge-request - changes: *code-backstage-qa-patterns - ################ # Memory rules # ################ diff --git a/.stylelintrc b/.stylelintrc index a4331811eb30e..13ec6ea340b34 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -3,7 +3,6 @@ "ignoreFiles": [ "app/assets/stylesheets/pages/emojis.scss", "app/assets/stylesheets/startup/startup-*.scss", - "ee/app/assets/stylesheets/startup/startup-*.scss", "app/assets/stylesheets/lazy_bundles/select2.scss", "app/assets/stylesheets/highlight/themes/*.scss", "app/assets/stylesheets/lazy_bundles/cropper.css" diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index b537a46a6f21c..9d437531e6da5 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -106,10 +106,6 @@ width: 100%; } } - - .omniauth-btn { - width: 100%; - } } .new-session-tabs { diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 2ec2df4b817b2..f83ba89daae37 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -45,7 +45,6 @@ input[type='checkbox']:hover { margin: 0 8px; form { - display: block; margin: 0; padding: 4px; width: $search-input-width; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 652842790196b..9f7a8860e4d91 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -1,23 +1,4 @@ -// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" -// Please see the feedback issue for more details and help: -// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; -body.gl-dark { - --gray-50: #303030; - --gray-100: #404040; - --gray-200: #525252; - --gray-950: #fff; - --green-100: #0d532a; - --green-400: #108548; - --green-700: #91d4a8; - --blue-400: #1f75cb; - --orange-400: #ab6100; - --gl-text-color: #fafafa; - --border-color: #4f4f4f; -} -:root { - --white: #333; -} *, *::before, *::after { @@ -27,46 +8,68 @@ html { font-family: sans-serif; line-height: 1.15; } -aside, -header, -nav { + header, nav, section { display: block; } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fafafa; text-align: left; - background-color: #1f1f1f; + background-color: #2e2e2e; } -h1 { +h1, h2, h3 { margin-top: 0; margin-bottom: 0.25rem; } +p { + margin-top: 0; + margin-bottom: 1rem; +} + ul { margin-top: 0; margin-bottom: 1rem; } + ul ul { margin-bottom: 0; } + strong { font-weight: bolder; } +sub { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -.25em; +} a { color: #007bff; text-decoration: none; background-color: transparent; } -a:not([href]):not([class]) { +a:not([href]) { color: inherit; text-decoration: none; } +pre, +code { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + font-size: 1em; +} +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; +} img { vertical-align: middle; border-style: none; @@ -75,11 +78,18 @@ svg { overflow: hidden; vertical-align: middle; } +table { + border-collapse: collapse; +} +th { + text-align: inherit; +} button { border-radius: 0; } input, -button { +button, +textarea { margin: 0; font-family: inherit; font-size: inherit; @@ -92,20 +102,21 @@ input { button { text-transform: none; } -[role="button"] { - cursor: pointer; -} button:not(:disabled), [type="button"]:not(:disabled), -[type="submit"]:not(:disabled) { +[type="reset"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type="reset"]::-moz-focus-inner { padding: 0; border-style: none; } +textarea { + overflow: auto; + resize: vertical; +} [type="search"] { outline-offset: -2px; } @@ -113,24 +124,81 @@ summary { display: list-item; cursor: pointer; } +template { + display: none; +} [hidden] { display: none !important; } -h1, -.h1 { +h1, h2, h3, +.h1, .h2, .h3 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; color: #fafafa; } -h1, -.h1 { +h1, .h1 { font-size: 2.1875rem; } +h2, .h2 { + font-size: 1.75rem; +} +h3, .h3 { + font-size: 1.53125rem; +} .list-unstyled { padding-left: 0; list-style: none; } +code { + font-size: 90%; + color: #fff; + word-wrap: break-word; +} +a > code { + color: inherit; +} +pre { + display: block; + font-size: 90%; + color: #fafafa; +} +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} .container-fluid { width: 100%; padding-right: 15px; @@ -138,7 +206,48 @@ h1, margin-right: auto; margin-left: auto; } -.form-control { + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} +.table { + width: 100%; + margin-bottom: 0.5rem; + color: #fafafa; +} +.table th, +.table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid #4f4f4f; +} + .search form { display: block; width: 100%; height: 34px; @@ -147,27 +256,24 @@ h1, font-weight: 400; line-height: 1.5; color: #fafafa; - background-color: #333; + background-color: #4f4f4f; background-clip: padding-box; - border: 1px solid #404040; + border: 1px solid #4f4f4f; border-radius: 0.25rem; } + @media (prefers-reduced-motion: reduce) { } -.form-control:-moz-focusring { + .search form:-moz-focusring { color: transparent; text-shadow: 0 0 0 #fafafa; } -.form-control::-ms-input-placeholder { - color: #bfbfbf; - opacity: 1; -} -.form-control::placeholder { - color: #bfbfbf; + .search form::placeholder { + color: #ccc; opacity: 1; } -.form-control:disabled { - background-color: #303030; + .search form:disabled { + background-color: #2e2e2e; opacity: 1; } .form-inline { @@ -175,8 +281,9 @@ h1, flex-flow: row wrap; align-items: center; } + @media (min-width: 576px) { - .form-inline .form-control { + .form-inline .search form, .search .form-inline form { display: inline-block; width: auto; vertical-align: middle; @@ -188,7 +295,7 @@ h1, color: #fafafa; text-align: center; vertical-align: middle; - -moz-user-select: none; + cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -197,24 +304,26 @@ h1, line-height: 20px; border-radius: 0.25rem; } + @media (prefers-reduced-motion: reduce) { } -.btn:disabled { +.btn.disabled, .btn:disabled { opacity: 0.65; } -.btn:not(:disabled):not(.disabled) { - cursor: pointer; +a.btn.disabled { + pointer-events: none; } .collapse:not(.show) { display: none; } + .dropdown { position: relative; } -.dropdown-menu-toggle { + .dropdown-menu-toggle { white-space: nowrap; } -.dropdown-menu-toggle::after { + .dropdown-menu-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; @@ -224,7 +333,7 @@ h1, border-bottom: 0; border-left: 0.3em solid transparent; } -.dropdown-menu-toggle:empty::after { + .dropdown-menu-toggle:empty::after { margin-left: 0; } .dropdown-menu { @@ -246,6 +355,16 @@ h1, border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.25rem; } +.dropdown-menu-right { + right: 0; + left: auto; +} + .divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #4f4f4f; +} .dropdown-menu.show { display: block; } @@ -264,6 +383,7 @@ h1, justify-content: space-between; padding: 0.25rem 0.5rem; } +.navbar .container, .navbar .container-fluid { display: flex; flex-wrap: wrap; @@ -294,12 +414,15 @@ h1, border: 1px solid transparent; border-radius: 0.25rem; } + @media (max-width: 575.98px) { + .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0; padding-left: 0; } } + @media (min-width: 576px) { .navbar-expand-sm { flex-flow: row nowrap; @@ -311,6 +434,7 @@ h1, .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } + .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; } @@ -330,7 +454,7 @@ h1, word-wrap: break-word; background-color: #333; background-clip: border-box; - border: 1px solid #404040; + border: 1px solid #4f4f4f; border-radius: 0.25rem; } .badge { @@ -344,6 +468,7 @@ h1, vertical-align: baseline; border-radius: 0.25rem; } + @media (prefers-reduced-motion: reduce) { } .badge:empty { @@ -358,6 +483,10 @@ h1, padding-left: 0.6em; border-radius: 10rem; } +.media { + display: flex; + align-items: flex-start; +} .close { float: right; font-size: 1.5rem; @@ -365,15 +494,55 @@ h1, line-height: 1; color: #fff; text-shadow: 0 1px 0 #333; - opacity: 0.5; + opacity: .5; } button.close { padding: 0; background-color: transparent; border: 0; + appearance: none; +} +a.close.disabled { + pointer-events: none; +} +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } +} +.bg-transparent { + background-color: transparent !important; +} +.border { + border: 1px solid #4f4f4f !important; +} +.border-top { + border-top: 1px solid #4f4f4f !important; +} +.border-right { + border-right: 1px solid #4f4f4f !important; +} +.border-bottom { + border-bottom: 1px solid #4f4f4f !important; } -.rounded-circle { - border-radius: 50% !important; +.border-left { + border-left: 1px solid #4f4f4f !important; +} +.rounded { + border-radius: 0.25rem !important; +} +.clearfix::after { + display: block; + clear: both; + content: ""; } .d-none { display: none !important; @@ -384,16 +553,19 @@ button.close { .d-block { display: block !important; } + @media (min-width: 576px) { .d-sm-none { display: none !important; } } + @media (min-width: 768px) { .d-md-block { display: block !important; } } + @media (min-width: 992px) { .d-lg-none { display: none !important; @@ -402,11 +574,18 @@ button.close { display: block !important; } } + @media (min-width: 1200px) { .d-xl-block { display: block !important; } } +.flex-wrap { + flex-wrap: wrap !important; +} +.float-right { + float: right !important; +} .sr-only { position: absolute; width: 1px; @@ -421,59 +600,72 @@ button.close { .m-auto { margin: auto !important; } -.gl-button { - display: inline-flex; +.text-nowrap { + white-space: nowrap !important; } -.gl-button:not(.btn-link):active { - text-decoration: none; +.visible { + visibility: visible !important; } -.gl-button.gl-button { - border-width: 0; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - background-color: transparent; - line-height: 1rem; + .search form.focus { color: #fafafa; - fill: currentColor; - box-shadow: inset 0 0 0 1px #525252; - justify-content: center; - align-items: center; - font-size: 0.875rem; - border-radius: 0.25rem; -} -.gl-button.gl-button.btn-default { - background-color: #333; + background-color: #4f4f4f; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } -.gl-button.gl-button.btn-default:active, -.gl-button.gl-button.btn-default.active { - box-shadow: inset 0 0 0 2px #bfbfbf, 0 0 0 1px rgba(51, 51, 51, 0.4), - 0 0 0 4px rgba(66, 143, 220, 0.48); +.gl-badge { + display: inline-flex; + align-items: center; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; outline: none; - background-color: #404040; } -body, -.form-control, +body, .search form, .search form { font-size: 0.875rem; } button, -html [type="button"], -[type="submit"], -[role="button"] { +html [type='button'], +[type='reset'], +[role='button'] { cursor: pointer; } h1, -.h1 { +.h1, +h2, +.h2, +h3, +.h3 { margin-top: 20px; margin-bottom: 10px; } +input[type='file'] { + line-height: 1; +} + strong { font-weight: bold; } a { - color: #63a6e9; + color: #418cd8; +} +code { + padding: 2px 4px; + color: #fff; + background-color: #2e2e2e; + border-radius: 4px; +} +.code > code { + background-color: inherit; + padding: unset; +} +table { + border-spacing: 0; } .hidden { display: none !important; @@ -482,7 +674,7 @@ a { .hide { display: none; } -.dropdown-menu-toggle::after { + .dropdown-menu-toggle::after { display: none; } .badge:not(.gl-badge) { @@ -492,16 +684,13 @@ a { font-weight: 400; display: inline-block; } -.divider { - height: 0; - margin: 4px 0; - overflow: hidden; - border-top: 1px solid #404040; +pre code { + white-space: pre-wrap; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, .toggle-sidebar-button .icon-chevron-double-lg-right { - color: #999; + color: #bababa; } svg { vertical-align: baseline; @@ -512,23 +701,42 @@ html { body { text-decoration-skip: ink; } +.content-wrapper { + margin-top: 40px; + padding-bottom: 100px; +} +.container { + padding-top: 0; + z-index: 5; +} +.container .content { + margin: 0; +} + +@media (max-width: 575.98px) { + .container .content { + margin-top: 20px; + } +} + +@media (max-width: 575.98px) { + .container .container .title { + padding-left: 15px !important; + } +} .btn { border-radius: 4px; font-size: 0.875rem; font-weight: 400; padding: 6px 10px; background-color: #333; - border-color: #404040; + border-color: #4f4f4f; color: #fafafa; color: #fafafa; white-space: nowrap; } -.btn:active { - background-color: #303030; - box-shadow: none; -} -.btn:active, -.btn.active { +.btn:active, .btn.active { + box-shadow: rgba(0, 0, 0, 0.16); background-color: #444; border-color: #fafafa; color: #fafafa; @@ -537,19 +745,61 @@ body { height: 15px; width: 15px; } -.btn svg:not(:last-child) { +.btn svg:not(:last-child), +.btn .fa:not(:last-child) { margin-right: 5px; } .badge.badge-pill:not(.gl-badge) { font-weight: 400; - background-color: rgba(255, 255, 255, 0.07); - color: #dbdbdb; + background-color: rgba(0, 0, 0, 0.07); + color: #dfdfdf; vertical-align: baseline; } +.hint { + font-style: italic; + color: #707070; +} +.bold { + font-weight: 600; +} +pre.wrap { + word-break: break-word; + white-space: pre-wrap; +} +table a code { + position: relative; + top: -2px; + margin-right: 3px; +} +.loading { + margin: 20px auto; + height: 40px; + color: #dfdfdf; + font-size: 32px; + text-align: center; +} +.highlight { + text-shadow: none; +} .chart { overflow: hidden; height: 220px; } +.break-word { + word-wrap: break-word; +} +.center { + text-align: center; +} +.block { + display: block; +} +.flex { + display: flex; +} +.flex-grow { + flex-grow: 1; +} .dropdown { position: relative; } @@ -560,41 +810,47 @@ body { max-height: 312px; overflow-y: auto; } + @media (max-width: 575.98px) { .show.dropdown .dropdown-menu { width: 100%; } } -.show.dropdown .dropdown-menu-toggle, + .show.dropdown .dropdown-menu-toggle, .show.dropdown .dropdown-menu-toggle { border-color: #c4c4c4; } -.show.dropdown [data-toggle="dropdown"] { +.show.dropdown [data-toggle='dropdown'] { outline: 0; } .search-input-container .dropdown-menu { margin-top: 11px; } -.dropdown-menu-toggle { + .dropdown-menu-toggle { padding: 6px 8px 6px 10px; background-color: #333; color: #fafafa; font-size: 14px; text-align: left; - border: 1px solid #404040; + border: 1px solid #4f4f4f; border-radius: 0.25rem; white-space: nowrap; } -.no-outline.dropdown-menu-toggle { + .no-outline.dropdown-menu-toggle { outline: 0; } -.dropdown-menu-toggle.dropdown-menu-toggle { - justify-content: flex-start; - overflow: hidden; + .dropdown-menu-toggle .fa { + color: #c4c4c4; +} +.dropdown-menu-toggle { padding-right: 25px; position: relative; - text-overflow: ellipsis; width: 160px; + text-overflow: ellipsis; + overflow: hidden; +} +.dropdown-menu-toggle .fa { + position: absolute; } .dropdown-menu { display: none; @@ -610,7 +866,7 @@ body { font-weight: 400; padding: 8px 0; background-color: #333; - border: 1px solid #404040; + border: 1px solid #4f4f4f; border-radius: 0.25rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } @@ -641,68 +897,169 @@ body { text-align: left; width: 100%; } -.dropdown-menu li > a:active, -.dropdown-menu li button:active { - background-color: #4f4f4f; - color: #fafafa; - outline: 0; - text-decoration: none; -} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; padding: 0; - background-color: #404040; + background-color: #4f4f4f; } .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { margin-right: 40px; } +.dropdown-select { + width: 300px; +} + +@media (max-width: 767.98px) { + .dropdown-select { + width: 100%; + } +} +.dropdown-content { + max-height: 252px; + overflow-y: auto; +} +.dropdown-loading { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: none; + z-index: 9; + background-color: rgba(51, 51, 51, 0.6); + font-size: 28px; +} +.dropdown-loading .fa { + position: absolute; + top: 50%; + left: 50%; + margin-top: -14px; + margin-left: -14px; +} + @media (max-width: 575.98px) { .navbar-gitlab li.dropdown { position: static; } - .navbar-gitlab li.dropdown.user-counter { - margin-left: 8px !important; - } - .navbar-gitlab li.dropdown.user-counter > a { - padding: 0 4px !important; - } header.navbar-gitlab .dropdown .dropdown-menu { width: 100%; min-width: 100%; } } + @media (max-width: 767.98px) { .dropdown-menu-toggle { width: 100%; } } +textarea { + resize: vertical; +} input { border-radius: 0.25rem; color: #fafafa; - background-color: #333; + background-color: #4f4f4f; } -.form-control { + .search form { border-radius: 4px; padding: 6px 10px; } -.form-control::-ms-input-placeholder { - color: #868686; + .search form::placeholder { + color: #a7a7a7; } -.form-control::placeholder { - color: #868686; +body.ui-indigo .navbar-gitlab { + background-color: #292961; } -.navbar-gitlab { - padding: 0 16px; - z-index: 1000; - margin-bottom: 0; - min-height: 40px; - border: 0; - position: fixed; - top: 0; - left: 0; - right: 0; - border-radius: 0; +body.ui-indigo .navbar-gitlab .navbar-collapse { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler { + border-left: 1px solid #6868b9; +} +body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg { + fill: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > a, +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > button, body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a, +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button, +body.ui-indigo .navbar-gitlab .navbar-nav > li.active > a, +body.ui-indigo .navbar-gitlab .navbar-nav > li.active > button, +body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > a, +body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > button { + color: #292961; + background-color: #333; +} +body.ui-indigo .navbar-gitlab .navbar-sub-nav { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li > a.header-user-dropdown-toggle .header-user-avatar { + border-color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li.active > a, +body.ui-indigo .navbar-gitlab .nav > li.dropdown.show > a { + color: #292961; + background-color: #333; +} +body.ui-indigo .search form { + background-color: rgba(209, 209, 240, 0.2); +} +body.ui-indigo .search .search-input::placeholder { + color: rgba(209, 209, 240, 0.8); +} +body.ui-indigo .search .search-input-wrap .search-icon, +body.ui-indigo .search .search-input-wrap .clear-icon { + fill: rgba(209, 209, 240, 0.8); +} +body.ui-indigo .nav-sidebar li.active { + box-shadow: inset 4px 0 0 #4b4ba3; +} +body.ui-indigo .nav-sidebar li.active > a { + color: #393982; +} +body.ui-indigo .nav-sidebar li.active .nav-icon-container svg { + fill: #393982; +} +body.ui-indigo .sidebar-top-level-items > li.active .badge.badge-pill { + color: #393982; +} +body.gl-dark .logo-text svg { + fill: #fafafa; +} +body.gl-dark .navbar-gitlab { + background-color: #2e2e2e; + box-shadow: 0 1px 0 0 var(--gray-100); +} +body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a, +body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button, +body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > a, +body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > button, +body.gl-dark .navbar-gitlab .navbar-nav li.active > a, +body.gl-dark .navbar-gitlab .navbar-nav li.active > button, +body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > a, +body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > button { + color: #fafafa; + background-color: #707070; +} +body.gl-dark .navbar-gitlab .search form { + background-color: #4f4f4f; + box-shadow: inset 0 0 0 1px #4f4f4f; +} +.navbar-gitlab { + padding: 0 16px; + z-index: 1000; + margin-bottom: 0; + min-height: 40px; + border: 0; + border-bottom: 1px solid #4f4f4f; + position: fixed; + top: 0; + left: 0; + right: 0; + border-radius: 0; } .navbar-gitlab .logo-text { line-height: initial; @@ -747,6 +1104,9 @@ input { .navbar-gitlab .header-content .title img + .logo-text { margin-left: 8px; } +.navbar-gitlab .header-content .title.wrap { + white-space: normal; +} .navbar-gitlab .header-content .title a { display: flex; align-items: center; @@ -754,6 +1114,9 @@ input { margin: 5px 2px 5px -8px; border-radius: 4px; } +.navbar-gitlab .header-content .dropdown.open > a { + border-bottom-color: #333; +} .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } @@ -762,6 +1125,7 @@ input { border-top: 0; padding: 0; } + @media (max-width: 575.98px) { .navbar-gitlab .navbar-collapse { flex: 1 1 auto; @@ -770,6 +1134,7 @@ input { .navbar-gitlab .navbar-collapse .nav { flex-wrap: nowrap; } + @media (max-width: 575.98px) { .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { margin-left: 0; @@ -792,10 +1157,7 @@ input { text-align: center; color: currentColor; } -.navbar-gitlab .container-fluid .navbar-toggler.active { - color: currentColor; - background-color: transparent; -} + @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .navbar-nav { display: flex; @@ -803,14 +1165,11 @@ input { flex-direction: row; } } -.navbar-gitlab - .container-fluid - .navbar-nav - li - .badge.badge-pill:not(.merge-request-badge) { +.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { box-shadow: none; font-weight: 600; } + @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li.header-user { padding-left: 10px; @@ -822,6 +1181,7 @@ input { padding: 6px 8px; height: 32px; } + @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li > a { padding: 0; @@ -830,12 +1190,7 @@ input { .navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { margin-left: 2px; } -.navbar-gitlab - .container-fluid - .nav - > li - > a.header-user-dropdown-toggle - .header-user-avatar { +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar { margin-right: 0; } .navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { @@ -856,9 +1211,7 @@ input { height: 32px; font-weight: 600; } -.navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, -.navbar-nav > li .top-nav-toggle, .navbar-nav > li > button { background: transparent; border: 0; @@ -896,25 +1249,31 @@ input { font-weight: 400; margin-left: -6px; font-size: 11px; - color: var(--gray-950, #333); + color: #333; padding: 0 5px; line-height: 12px; border-radius: 7px; box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); } -.title-container .badge.badge-pill:not(.merge-request-badge).green-badge, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { - background-color: var(--green-400, #108548); +.title-container .badge.badge-pill.green-badge, +.navbar-nav .badge.badge-pill.green-badge { + background-color: #1aaa55; +} +.title-container .badge.badge-pill.merge-requests-count, +.navbar-nav .badge.badge-pill.merge-requests-count { + background-color: #fca429; } -.title-container - .badge.badge-pill:not(.merge-request-badge).merge-requests-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { - background-color: var(--orange-400, #ab6100); +.title-container .badge.badge-pill.todos-count, +.navbar-nav .badge.badge-pill.todos-count { + background-color: #1f78d1; } -.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { - background-color: var(--blue-400, #1f75cb); +.title-container .canary-badge .badge, +.navbar-nav .canary-badge .badge { + font-size: 12px; + line-height: 16px; + padding: 0 0.5rem; } + @media (max-width: 575.98px) { .navbar-gitlab .container-fluid { font-size: 18px; @@ -941,7 +1300,7 @@ input { } .header-user.show .dropdown-menu { margin-top: 4px; - color: var(--gl-text-color, #fafafa); + color: #fafafa; left: auto; max-height: 445px; } @@ -954,32 +1313,30 @@ input { border-radius: 50%; border: 1px solid #333; } -.notification-dot { - background-color: #9e5400; - height: 12px; - width: 12px; - margin-top: -15px; - pointer-events: none; - visibility: hidden; +.media { + display: flex; + align-items: flex-start; } -.top-nav-toggle .dropdown-icon { - margin-right: 0.5rem; +.card { + margin-bottom: 16px; } -.tanuki-logo .tanuki-left-ear, -.tanuki-logo .tanuki-right-ear, -.tanuki-logo .tanuki-nose { - fill: #e24329; +.content-wrapper { + width: 100%; } -.tanuki-logo .tanuki-left-eye, -.tanuki-logo .tanuki-right-eye { - fill: #fc6d26; +.content-wrapper .container-fluid { + padding: 0 16px; } -.tanuki-logo .tanuki-left-cheek, -.tanuki-logo .tanuki-right-cheek { - fill: #fca326; + +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 50px; + } } -.card { - margin-bottom: 16px; + +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } } .context-header { position: relative; @@ -1006,20 +1363,9 @@ input { overflow: hidden; text-overflow: ellipsis; } -@media (min-width: 768px) { - .page-with-contextual-sidebar { - padding-left: 50px; - } -} -@media (min-width: 1200px) { - .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - .page-with-icon-sidebar { - padding-left: 50px; - } +.context-header .sidebar-context-title.text-secondary { + font-weight: normal; + font-size: 0.8em; } .nav-sidebar { position: fixed; @@ -1028,13 +1374,14 @@ input { top: 40px; bottom: 0; left: 0; - background-color: #303030; - box-shadow: inset -1px 0 0 #404040; + background-color: #2e2e2e; + box-shadow: inset -1px 0 0 #4f4f4f; transform: translate3d(0, 0, 0); } + @media (min-width: 576px) and (max-width: 576px) { .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: inset -1px 0 0 #4f4f4f, 2px 1px 3px rgba(0, 0, 0, 0.1); } } .nav-sidebar.sidebar-collapsed-desktop { @@ -1044,6 +1391,7 @@ input { overflow-x: hidden; } .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), +.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title, .nav-sidebar.sidebar-collapsed-desktop .nav-item-name { border: 0; clip: rect(0, 0, 0, 0); @@ -1064,6 +1412,9 @@ input { .nav-sidebar.sidebar-collapsed-desktop .avatar-container { margin: 0 auto; } +.nav-sidebar.sidebar-expanded-mobile { + left: 0; +} .nav-sidebar a { text-decoration: none; } @@ -1078,7 +1429,7 @@ input { display: flex; align-items: center; padding: 12px 16px; - color: #999; + color: #bababa; } .nav-sidebar li .nav-item-name { flex: 1; @@ -1086,6 +1437,7 @@ input { .nav-sidebar li.active > a { font-weight: 600; } + @media (max-width: 767.98px) { .nav-sidebar { left: -220px; @@ -1102,6 +1454,7 @@ input { height: 16px; width: 16px; } + @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { width: 50px; @@ -1109,8 +1462,8 @@ input { .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; } - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), + .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title, .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { border: 0; clip: rect(0, 0, 0, 0); @@ -1138,21 +1491,7 @@ input { .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { display: none; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { @@ -1162,17 +1501,11 @@ input { padding: 16px; width: 49px; } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text, + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { display: none; } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1189,12 +1522,10 @@ input { .sidebar-sub-level-items > li a { padding: 8px 16px 8px 40px; } -.sidebar-sub-level-items > li.active a { - background: rgba(255, 255, 255, 0.04); -} .sidebar-top-level-items { margin-bottom: 60px; } + @media (min-width: 576px) { .sidebar-top-level-items > li > a { margin-right: 1px; @@ -1202,7 +1533,7 @@ input { } .sidebar-top-level-items > li .badge.badge-pill { background-color: rgba(255, 255, 255, 0.08); - color: #999; + color: #bababa; } .sidebar-top-level-items > li.active { background: rgba(255, 255, 255, 0.04); @@ -1214,28 +1545,23 @@ input { .sidebar-top-level-items > li.active .badge.badge-pill { font-weight: 600; } -.sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { +.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { display: block; } .toggle-sidebar-button, .close-nav-button { + width: 219px; + position: fixed; height: 48px; + bottom: 0; padding: 0 16px; - background-color: #303030; + background-color: #2e2e2e; border: 0; - color: #999; + border-top: 1px solid #4f4f4f; + color: #bababa; display: flex; align-items: center; } -.toggle-sidebar-button, -.close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #404040; -} .toggle-sidebar-button svg, .close-nav-button svg { margin-right: 8px; @@ -1255,21 +1581,7 @@ input { .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; } -.sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { +.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { display: none; } .sidebar-collapsed-desktop .nav-icon-container { @@ -1283,9 +1595,7 @@ input { .sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { display: none; } -.sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1301,6 +1611,7 @@ input { .close-nav-button { display: none; } + @media (max-width: 767.98px) { .close-nav-button { display: flex; @@ -1309,416 +1620,128 @@ input { display: none; } } -body.sidebar-refactoring.gl-dark .nav-sidebar li.active { - box-shadow: none; -} -body.sidebar-refactoring.gl-dark .nav-sidebar li a, -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right { - color: #c4c4c4; -} -body.sidebar-refactoring .nav-sidebar { - box-shadow: none; -} -body.sidebar-refactoring .nav-sidebar li.active { - background-color: transparent; - box-shadow: none; -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 50px; - } -} -@media (min-width: 1200px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-icon-sidebar { - padding-left: 50px; - } -} -body.sidebar-refactoring .nav-sidebar { - position: fixed; - z-index: 600; - width: 220px; - top: 40px; - bottom: 0; - left: 0; - background-color: #303030; - transform: translate3d(0, 0, 0); -} -@media (min-width: 576px) and (max-width: 576px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1); - } -} -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { - width: 50px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .nav-sidebar-inner-scroll { - overflow-x: hidden; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .badge.badge-pill:not(.fly-out-badge), -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - > a { - min-height: 45px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .fly-out-top-item { - display: block; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .avatar-container { - margin: 0 auto; +table.table { + margin-bottom: 16px; } -body.sidebar-refactoring .nav-sidebar a { +table.table .dropdown-menu a { text-decoration: none; - line-height: 1rem; - color: #2f2a6b; -} -body.sidebar-refactoring .nav-sidebar li { - white-space: nowrap; -} -body.sidebar-refactoring .nav-sidebar li .nav-item-name { - flex: 1; -} -body.sidebar-refactoring .nav-sidebar li > a { - margin-left: 0.25rem; - margin-right: 0.25rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - display: flex; - align-items: center; - border-radius: 0.25rem; - width: auto; - margin-bottom: 1px; -} -body.sidebar-refactoring .nav-sidebar li.active > a { - font-weight: 600; -} -body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) { - background-color: rgba(41, 41, 97, 0.08); -} -body.sidebar-refactoring .nav-sidebar ul { - padding-left: 0; - list-style: none; -} -@media (max-width: 767.98px) { - body.sidebar-refactoring .nav-sidebar { - left: -220px; - } -} -body.sidebar-refactoring .nav-sidebar .nav-icon-container { - display: flex; - margin-right: 8px; -} -body.sidebar-refactoring .nav-sidebar .fly-out-top-item { - display: none; -} -body.sidebar-refactoring .nav-sidebar svg { - height: 16px; - width: 16px; -} -@media (min-width: 768px) and (max-width: 1199px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - > a { - min-height: 45px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .fly-out-top-item { - display: block; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .avatar-container { - margin: 0 auto; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { - height: 60px; - width: 50px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { - padding: 10px 4px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-icon-container { - margin-right: 0; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button { - padding: 16px; - width: 49px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } -} -body.sidebar-refactoring .nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -body.sidebar-refactoring .sidebar-top-level-items { - margin-bottom: 60px; -} -body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { - border-radius: 0.5rem; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - background-color: #064787; - color: #9dc7f1; -} -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; -} -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .badge.badge-pill { - font-weight: 400; - color: #9dc7f1; -} -body.sidebar-refactoring .sidebar-sub-level-items { - padding-bottom: 0; - display: none; } -body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { - padding-left: 2.25rem; -} -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { - height: 48px; - padding: 0 16px; - background-color: #303030; - border: 0; - color: #999; - display: flex; - align-items: center; - background-color: #303030; - color: #2f2a6b; -} -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .collapse-text, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { - color: inherit; -} -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #404040; -} -body.sidebar-refactoring .toggle-sidebar-button svg, -body.sidebar-refactoring .close-nav-button svg { - margin-right: 8px; -} -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { - display: none; -} -body.sidebar-refactoring .collapse-text { - white-space: nowrap; - overflow: hidden; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { - height: 60px; - width: 50px; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { - padding: 10px 4px; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { - margin-right: 0; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { - padding: 16px; - width: 49px; +table.table .success, +table.table .info { + color: #333; } -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .collapse-text, -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; +table.table .success a:not(.btn), +table.table .info a:not(.btn) { + text-decoration: underline; + color: #333; } -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { +pre { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; display: block; - margin: 0; -} -body.sidebar-refactoring .close-nav-button { - display: none; + padding: 8px 12px; + margin: 0 0 8px; + font-size: 13px; + word-break: break-all; + word-wrap: break-word; + color: #fafafa; + background-color: #2e2e2e; + border: 1px solid #4f4f4f; + border-radius: 2px; } -@media (max-width: 767.98px) { - body.sidebar-refactoring .close-nav-button { - display: flex; - } - body.sidebar-refactoring .toggle-sidebar-button { - display: none; - } +.monospace { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; } -input::-moz-placeholder { - color: #868686; +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #a7a7a7; opacity: 1; } -input::-ms-input-placeholder { - color: #868686; +input::-ms-input-placeholder, +textarea::-ms-input-placeholder { + color: #a7a7a7; } -input:-ms-input-placeholder { - color: #868686; +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #a7a7a7; } svg { fill: currentColor; } + svg.s12 { width: 12px; height: 12px; } + svg.s16 { width: 16px; height: 16px; } + svg.s18 { width: 18px; height: 18px; } + svg.s12 { vertical-align: -1px; } + svg.s16 { vertical-align: -3px; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +table.code { + width: 100%; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + border: 0; + border-collapse: separate; + margin: 0; + padding: 0; + table-layout: fixed; + border-radius: 0 0 4px 4px; +} +.frame .badge.badge-pill { + position: absolute; + background-color: #1b69b6; + color: #333; + border: #333 1px solid; + min-height: 16px; + padding: 5px 8px; + border-radius: 12px; +} +.frame .badge.badge-pill { + transform: translate(-50%, -50%); +} +.color-label { + padding: 0 0.5rem; + line-height: 16px; + border-radius: 100px; + color: #333; +} +.label-link { + display: inline-flex; + vertical-align: text-bottom; +} +.milestones { + padding: 8px; + margin-top: 8px; + border-radius: 4px; + background-color: #4f4f4f; +} .search { margin: 0 8px; } .search form { - display: block; margin: 0; padding: 4px; width: 200px; @@ -1727,6 +1750,7 @@ svg.s16 { border: 0; border-radius: 4px; } + @media (min-width: 1200px) { .search form { width: 320px; @@ -1770,37 +1794,43 @@ svg.s16 { max-height: 400px; overflow: auto; } + @media (min-width: 1200px) { .search .search-input-wrap .dropdown-menu { width: 320px; } } -.search .identicon { - flex-basis: 16px; - flex-shrink: 0; - margin-right: 4px; +.search .search-input-wrap .dropdown-content { + max-height: 382px; } -.avatar, -.avatar-container { +.settings { + border-top: 1px solid #4f4f4f; +} +.settings:first-of-type { + margin-top: 10px; + border: 0; +} +.settings + div .settings:first-of-type { + margin-top: 0; + border-top: 1px solid #4f4f4f; +} +.avatar, .avatar-container { float: left; margin-right: 16px; border-radius: 50%; border: 1px solid #333; } -.avatar.s16, -.avatar-container.s16 { +.s16.avatar, .s16.avatar-container { width: 16px; height: 16px; margin-right: 8px; } -.avatar.s18, -.avatar-container.s18 { +.s18.avatar, .s18.avatar-container { width: 18px; height: 18px; margin-right: 8px; } -.avatar.s40, -.avatar-container.s40 { +.s40.avatar, .s40.avatar-container { width: 40px; height: 40px; margin-right: 8px; @@ -1814,45 +1844,15 @@ svg.s16 { overflow: hidden; border-color: rgba(255, 255, 255, 0.1); } +.avatar.center { + font-size: 14px; + line-height: 1.8em; + text-align: center; +} .avatar.avatar-tile { border-radius: 0; border: 0; } -.identicon { - text-align: center; - vertical-align: top; - color: #525252; - background-color: #eee; -} -.identicon.s16 { - font-size: 10px; - line-height: 16px; -} -.identicon.s40 { - font-size: 16px; - line-height: 38px; -} -.identicon.bg1 { - background-color: #ffebee; -} -.identicon.bg2 { - background-color: #f3e5f5; -} -.identicon.bg3 { - background-color: #e8eaf6; -} -.identicon.bg4 { - background-color: #e3f2fd; -} -.identicon.bg5 { - background-color: #e0f2f1; -} -.identicon.bg6 { - background-color: #fbe9e7; -} -.identicon.bg7 { - background-color: #eee; -} .avatar-container { overflow: hidden; display: flex; @@ -1887,207 +1887,6 @@ svg.s16 { .rect-avatar.s40 { border-radius: 4px; } -#content-body { - display: block; -} -body.gl-dark .navbar-gitlab { - background-color: #fafafa; -} -body.gl-dark .navbar-gitlab .navbar-collapse { - color: #fafafa; -} -body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler { - border-left: 1px solid #b3b3b3; -} -body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler svg { - fill: #fafafa; -} -body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a, -body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button, -body.gl-dark .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a, -body.gl-dark .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button, -body.gl-dark .navbar-gitlab .navbar-nav > li.active > a, -body.gl-dark .navbar-gitlab .navbar-nav > li.active > button, -body.gl-dark .navbar-gitlab .navbar-nav > li.dropdown.show > a, -body.gl-dark .navbar-gitlab .navbar-nav > li.dropdown.show > button { - color: #fafafa; - background-color: #333; -} -body.gl-dark .navbar-gitlab .navbar-sub-nav { - color: #fafafa; -} -body.gl-dark .navbar-gitlab .nav > li { - color: #fafafa; -} -body.gl-dark .navbar-gitlab .nav > li > a .notification-dot { - border: 2px solid #fafafa; -} -body.gl-dark - .navbar-gitlab - .nav - > li - > a.header-help-dropdown-toggle - .notification-dot { - background-color: #fafafa; -} -body.gl-dark - .navbar-gitlab - .nav - > li - > a.header-user-dropdown-toggle - .header-user-avatar { - border-color: #fafafa; -} -body.gl-dark .navbar-gitlab .nav > li.active > a, -body.gl-dark .navbar-gitlab .nav > li.dropdown.show > a { - color: #fafafa; - background-color: #333; -} -body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot, -body.gl-dark .navbar-gitlab .nav > li.dropdown.show > a .notification-dot { - border-color: #333; -} -body.gl-dark - .navbar-gitlab - .nav - > li.active - > a.header-help-dropdown-toggle - .notification-dot, -body.gl-dark - .navbar-gitlab - .nav - > li.dropdown.show - > a.header-help-dropdown-toggle - .notification-dot { - background-color: #fafafa; -} -body.gl-dark .search form { - background-color: rgba(250, 250, 250, 0.2); -} -body.gl-dark .search .search-input::-ms-input-placeholder { - color: rgba(250, 250, 250, 0.8); -} -body.gl-dark .search .search-input::placeholder { - color: rgba(250, 250, 250, 0.8); -} -body.gl-dark .search .search-input-wrap .search-icon, -body.gl-dark .search .search-input-wrap .clear-icon { - fill: rgba(250, 250, 250, 0.8); -} -body.gl-dark .nav-sidebar li.active { - box-shadow: inset 4px 0 0 #999; -} -body.gl-dark .nav-sidebar li.active > a { - color: #f0f0f0; -} -body.gl-dark .nav-sidebar li.active .nav-icon-container svg { - fill: #f0f0f0; -} -body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill { - color: #f0f0f0; -} -body.gl-dark .logo-text svg { - fill: var(--gl-text-color); -} -body.gl-dark .navbar-gitlab { - background-color: var(--gray-50); - box-shadow: 0 1px 0 0 var(--gray-100); -} -body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a, -body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button, -body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > a, -body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > button, -body.gl-dark .navbar-gitlab .navbar-nav li.active > a, -body.gl-dark .navbar-gitlab .navbar-nav li.active > button, -body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > a, -body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > button { - color: var(--gl-text-color); - background-color: var(--gray-200); -} -body.gl-dark .navbar-gitlab .search form { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--border-color); -} -body.gl-dark .navbar-gitlab .search form:active { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--blue-200); -} - -body.gl-dark { - --gray-10: #1f1f1f; - --gray-50: #303030; - --gray-100: #404040; - --gray-200: #525252; - --gray-300: #5e5e5e; - --gray-400: #868686; - --gray-500: #999; - --gray-600: #bfbfbf; - --gray-700: #dbdbdb; - --gray-800: #f0f0f0; - --gray-900: #fafafa; - --gray-950: #fff; - --green-50: #0a4020; - --green-100: #0d532a; - --green-200: #24663b; - --green-300: #217645; - --green-400: #108548; - --green-500: #2da160; - --green-600: #52b87a; - --green-700: #91d4a8; - --green-800: #c3e6cd; - --green-900: #ecf4ee; - --green-950: #f1fdf6; - --blue-50: #033464; - --blue-100: #064787; - --blue-200: #0b5cad; - --blue-300: #1068bf; - --blue-400: #1f75cb; - --blue-500: #428fdc; - --blue-600: #63a6e9; - --blue-700: #9dc7f1; - --blue-800: #cbe2f9; - --blue-900: #e9f3fc; - --blue-950: #f2f9ff; - --orange-50: #5c2900; - --orange-100: #703800; - --orange-200: #8f4700; - --orange-300: #9e5400; - --orange-400: #ab6100; - --orange-500: #c17d10; - --orange-600: #d99530; - --orange-700: #e9be74; - --orange-800: #f5d9a8; - --orange-900: #fdf1dd; - --orange-950: #fff4e1; - --red-50: #660e00; - --red-100: #8d1300; - --red-200: #ae1800; - --red-300: #c91c00; - --red-400: #dd2b0e; - --red-500: #ec5941; - --red-600: #f57f6c; - --red-700: #fcb5aa; - --red-800: #fdd4cd; - --red-900: #fcf1ef; - --red-950: #fff4f3; - --indigo-50: #1a1a40; - --indigo-100: #292961; - --indigo-200: #393982; - --indigo-300: #4b4ba3; - --indigo-400: #5b5bbd; - --indigo-500: #6666c4; - --indigo-600: #7c7ccc; - --indigo-700: #a6a6de; - --indigo-800: #d1d1f0; - --indigo-900: #ebebfa; - --indigo-950: #f7f7ff; - --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); - --gl-text-color: #fafafa; - --border-color: #4f4f4f; - --white: #333; - --black: #fff; - --svg-status-bg: #333; -} .tab-width-8 { -moz-tab-size: 8; tab-size: 8; @@ -2103,16 +1902,12 @@ body.gl-dark { white-space: nowrap; width: 1px; } -.gl-absolute { - position: absolute; -} .gl-ml-3 { margin-left: 0.5rem; } -.gl-mx-0\! { - margin-left: 0 !important; - margin-right: 0 !important; +.content-wrapper > .alert-wrapper, +#content-body, .modal-dialog { + display: block; } - -@import "startup/cloaking"; +@import 'cloaking'; @include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 35b18b2515804..44da509481dd7 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1,6 +1,3 @@ -// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" -// Please see the feedback issue for more details and help: -// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; *, *::before, @@ -11,16 +8,12 @@ html { font-family: sans-serif; line-height: 1.15; } -aside, -header, -nav { + header, nav, section { display: block; } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -28,29 +21,55 @@ body { text-align: left; background-color: #fff; } -h1 { +h1, h2, h3 { margin-top: 0; margin-bottom: 0.25rem; } +p { + margin-top: 0; + margin-bottom: 1rem; +} + ul { margin-top: 0; margin-bottom: 1rem; } + ul ul { margin-bottom: 0; } + strong { font-weight: bolder; } +sub { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -.25em; +} a { color: #007bff; text-decoration: none; background-color: transparent; } -a:not([href]):not([class]) { +a:not([href]) { color: inherit; text-decoration: none; } +pre, +code { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + font-size: 1em; +} +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; +} img { vertical-align: middle; border-style: none; @@ -59,11 +78,18 @@ svg { overflow: hidden; vertical-align: middle; } +table { + border-collapse: collapse; +} +th { + text-align: inherit; +} button { border-radius: 0; } input, -button { +button, +textarea { margin: 0; font-family: inherit; font-size: inherit; @@ -76,20 +102,21 @@ input { button { text-transform: none; } -[role="button"] { - cursor: pointer; -} button:not(:disabled), [type="button"]:not(:disabled), -[type="submit"]:not(:disabled) { +[type="reset"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type="reset"]::-moz-focus-inner { padding: 0; border-style: none; } +textarea { + overflow: auto; + resize: vertical; +} [type="search"] { outline-offset: -2px; } @@ -97,24 +124,81 @@ summary { display: list-item; cursor: pointer; } +template { + display: none; +} [hidden] { display: none !important; } -h1, -.h1 { +h1, h2, h3, +.h1, .h2, .h3 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; color: #303030; } -h1, -.h1 { +h1, .h1 { font-size: 2.1875rem; } +h2, .h2 { + font-size: 1.75rem; +} +h3, .h3 { + font-size: 1.53125rem; +} .list-unstyled { padding-left: 0; list-style: none; } +code { + font-size: 90%; + color: #1f1f1f; + word-wrap: break-word; +} +a > code { + color: inherit; +} +pre { + display: block; + font-size: 90%; + color: #303030; +} +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} .container-fluid { width: 100%; padding-right: 15px; @@ -122,7 +206,48 @@ h1, margin-right: auto; margin-left: auto; } -.form-control { + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} +.table { + width: 100%; + margin-bottom: 0.5rem; + color: #303030; +} +.table th, +.table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid #dbdbdb; +} + .search form { display: block; width: 100%; height: 34px; @@ -136,21 +261,18 @@ h1, border: 1px solid #dbdbdb; border-radius: 0.25rem; } + @media (prefers-reduced-motion: reduce) { } -.form-control:-moz-focusring { + .search form:-moz-focusring { color: transparent; text-shadow: 0 0 0 #303030; } -.form-control::-ms-input-placeholder { + .search form::placeholder { color: #5e5e5e; opacity: 1; } -.form-control::placeholder { - color: #5e5e5e; - opacity: 1; -} -.form-control:disabled { + .search form:disabled { background-color: #fafafa; opacity: 1; } @@ -159,8 +281,9 @@ h1, flex-flow: row wrap; align-items: center; } + @media (min-width: 576px) { - .form-inline .form-control { + .form-inline .search form, .search .form-inline form { display: inline-block; width: auto; vertical-align: middle; @@ -172,7 +295,7 @@ h1, color: #303030; text-align: center; vertical-align: middle; - -moz-user-select: none; + cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -181,24 +304,26 @@ h1, line-height: 20px; border-radius: 0.25rem; } + @media (prefers-reduced-motion: reduce) { } -.btn:disabled { +.btn.disabled, .btn:disabled { opacity: 0.65; } -.btn:not(:disabled):not(.disabled) { - cursor: pointer; +a.btn.disabled { + pointer-events: none; } .collapse:not(.show) { display: none; } + .dropdown { position: relative; } -.dropdown-menu-toggle { + .dropdown-menu-toggle { white-space: nowrap; } -.dropdown-menu-toggle::after { + .dropdown-menu-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; @@ -208,7 +333,7 @@ h1, border-bottom: 0; border-left: 0.3em solid transparent; } -.dropdown-menu-toggle:empty::after { + .dropdown-menu-toggle:empty::after { margin-left: 0; } .dropdown-menu { @@ -230,6 +355,16 @@ h1, border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } +.dropdown-menu-right { + right: 0; + left: auto; +} + .divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #dbdbdb; +} .dropdown-menu.show { display: block; } @@ -248,6 +383,7 @@ h1, justify-content: space-between; padding: 0.25rem 0.5rem; } +.navbar .container, .navbar .container-fluid { display: flex; flex-wrap: wrap; @@ -278,12 +414,15 @@ h1, border: 1px solid transparent; border-radius: 0.25rem; } + @media (max-width: 575.98px) { + .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0; padding-left: 0; } } + @media (min-width: 576px) { .navbar-expand-sm { flex-flow: row nowrap; @@ -295,6 +434,7 @@ h1, .navbar-expand-sm .navbar-nav .dropdown-menu { position: absolute; } + .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { flex-wrap: nowrap; } @@ -328,6 +468,7 @@ h1, vertical-align: baseline; border-radius: 0.25rem; } + @media (prefers-reduced-motion: reduce) { } .badge:empty { @@ -342,6 +483,10 @@ h1, padding-left: 0.6em; border-radius: 10rem; } +.media { + display: flex; + align-items: flex-start; +} .close { float: right; font-size: 1.5rem; @@ -349,15 +494,55 @@ h1, line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; - opacity: 0.5; + opacity: .5; } button.close { padding: 0; background-color: transparent; border: 0; + appearance: none; +} +a.close.disabled { + pointer-events: none; +} +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } +} +.bg-transparent { + background-color: transparent !important; +} +.border { + border: 1px solid #dbdbdb !important; +} +.border-top { + border-top: 1px solid #dbdbdb !important; +} +.border-right { + border-right: 1px solid #dbdbdb !important; +} +.border-bottom { + border-bottom: 1px solid #dbdbdb !important; +} +.border-left { + border-left: 1px solid #dbdbdb !important; } -.rounded-circle { - border-radius: 50% !important; +.rounded { + border-radius: 0.25rem !important; +} +.clearfix::after { + display: block; + clear: both; + content: ""; } .d-none { display: none !important; @@ -368,16 +553,19 @@ button.close { .d-block { display: block !important; } + @media (min-width: 576px) { .d-sm-none { display: none !important; } } + @media (min-width: 768px) { .d-md-block { display: block !important; } } + @media (min-width: 992px) { .d-lg-none { display: none !important; @@ -386,11 +574,18 @@ button.close { display: block !important; } } + @media (min-width: 1200px) { .d-xl-block { display: block !important; } } +.flex-wrap { + flex-wrap: wrap !important; +} +.float-right { + float: right !important; +} .sr-only { position: absolute; width: 1px; @@ -405,60 +600,73 @@ button.close { .m-auto { margin: auto !important; } -.gl-button { - display: inline-flex; +.text-nowrap { + white-space: nowrap !important; } -.gl-button:not(.btn-link):active { - text-decoration: none; +.visible { + visibility: visible !important; } -.gl-button.gl-button { - border-width: 0; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - background-color: transparent; - line-height: 1rem; + .search form.focus { color: #303030; - fill: currentColor; - box-shadow: inset 0 0 0 1px #bfbfbf; - justify-content: center; - align-items: center; - font-size: 0.875rem; - border-radius: 0.25rem; -} -.gl-button.gl-button.btn-default { background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } -.gl-button.gl-button.btn-default:active, -.gl-button.gl-button.btn-default.active { - box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); +.gl-badge { + display: inline-flex; + align-items: center; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; outline: none; - background-color: #dbdbdb; } -body, -.form-control, +body, .search form, .search form { font-size: 0.875rem; } button, -html [type="button"], -[type="submit"], -[role="button"] { +html [type='button'], +[type='reset'], +[role='button'] { cursor: pointer; } h1, -.h1 { +.h1, +h2, +.h2, +h3, +.h3 { margin-top: 20px; margin-bottom: 10px; } +input[type='file'] { + line-height: 1; +} + strong { font-weight: bold; } a { color: #1068bf; } +code { + padding: 2px 4px; + color: #1f1f1f; + background-color: #f0f0f0; + border-radius: 4px; +} +.code > code { + background-color: inherit; + padding: unset; +} +table { + border-spacing: 0; +} .hidden { display: none !important; visibility: hidden !important; @@ -466,7 +674,7 @@ a { .hide { display: none; } -.dropdown-menu-toggle::after { + .dropdown-menu-toggle::after { display: none; } .badge:not(.gl-badge) { @@ -476,11 +684,8 @@ a { font-weight: 400; display: inline-block; } -.divider { - height: 0; - margin: 4px 0; - overflow: hidden; - border-top: 1px solid #dbdbdb; +pre code { + white-space: pre-wrap; } .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-chevron-double-lg-left, @@ -496,6 +701,29 @@ html { body { text-decoration-skip: ink; } +.content-wrapper { + margin-top: 40px; + padding-bottom: 100px; +} +.container { + padding-top: 0; + z-index: 5; +} +.container .content { + margin: 0; +} + +@media (max-width: 575.98px) { + .container .content { + margin-top: 20px; + } +} + +@media (max-width: 575.98px) { + .container .container .title { + padding-left: 15px !important; + } +} .btn { border-radius: 4px; font-size: 0.875rem; @@ -507,12 +735,7 @@ body { color: #303030; white-space: nowrap; } -.btn:active { - background-color: #f0f0f0; - box-shadow: none; -} -.btn:active, -.btn.active { +.btn:active, .btn.active { background-color: #eaeaea; border-color: #e3e3e3; color: #303030; @@ -521,7 +744,8 @@ body { height: 15px; width: 15px; } -.btn svg:not(:last-child) { +.btn svg:not(:last-child), +.btn .fa:not(:last-child) { margin-right: 5px; } .badge.badge-pill:not(.gl-badge) { @@ -530,10 +754,51 @@ body { color: #525252; vertical-align: baseline; } +.hint { + font-style: italic; + color: #bfbfbf; +} +.bold { + font-weight: 600; +} +pre.wrap { + word-break: break-word; + white-space: pre-wrap; +} +table a code { + position: relative; + top: -2px; + margin-right: 3px; +} +.loading { + margin: 20px auto; + height: 40px; + color: #525252; + font-size: 32px; + text-align: center; +} +.highlight { + text-shadow: none; +} .chart { overflow: hidden; height: 220px; } +.break-word { + word-wrap: break-word; +} +.center { + text-align: center; +} +.block { + display: block; +} +.flex { + display: flex; +} +.flex-grow { + flex-grow: 1; +} .dropdown { position: relative; } @@ -544,22 +809,23 @@ body { max-height: 312px; overflow-y: auto; } + @media (max-width: 575.98px) { .show.dropdown .dropdown-menu { width: 100%; } } -.show.dropdown .dropdown-menu-toggle, + .show.dropdown .dropdown-menu-toggle, .show.dropdown .dropdown-menu-toggle { border-color: #c4c4c4; } -.show.dropdown [data-toggle="dropdown"] { +.show.dropdown [data-toggle='dropdown'] { outline: 0; } .search-input-container .dropdown-menu { margin-top: 11px; } -.dropdown-menu-toggle { + .dropdown-menu-toggle { padding: 6px 8px 6px 10px; background-color: #fff; color: #303030; @@ -569,16 +835,21 @@ body { border-radius: 0.25rem; white-space: nowrap; } -.no-outline.dropdown-menu-toggle { + .no-outline.dropdown-menu-toggle { outline: 0; } -.dropdown-menu-toggle.dropdown-menu-toggle { - justify-content: flex-start; - overflow: hidden; + .dropdown-menu-toggle .fa { + color: #c4c4c4; +} +.dropdown-menu-toggle { padding-right: 25px; position: relative; - text-overflow: ellipsis; width: 160px; + text-overflow: ellipsis; + overflow: hidden; +} +.dropdown-menu-toggle .fa { + position: absolute; } .dropdown-menu { display: none; @@ -625,13 +896,6 @@ body { text-align: left; width: 100%; } -.dropdown-menu li > a:active, -.dropdown-menu li button:active { - background-color: #eee; - color: #303030; - outline: 0; - text-decoration: none; -} .dropdown-menu .divider { height: 1px; margin: 0.25rem 0; @@ -641,39 +905,66 @@ body { .dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { margin-right: 40px; } +.dropdown-select { + width: 300px; +} + +@media (max-width: 767.98px) { + .dropdown-select { + width: 100%; + } +} +.dropdown-content { + max-height: 252px; + overflow-y: auto; +} +.dropdown-loading { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: none; + z-index: 9; + background-color: rgba(255, 255, 255, 0.6); + font-size: 28px; +} +.dropdown-loading .fa { + position: absolute; + top: 50%; + left: 50%; + margin-top: -14px; + margin-left: -14px; +} + @media (max-width: 575.98px) { .navbar-gitlab li.dropdown { position: static; } - .navbar-gitlab li.dropdown.user-counter { - margin-left: 8px !important; - } - .navbar-gitlab li.dropdown.user-counter > a { - padding: 0 4px !important; - } header.navbar-gitlab .dropdown .dropdown-menu { width: 100%; min-width: 100%; } } + @media (max-width: 767.98px) { .dropdown-menu-toggle { width: 100%; } } +textarea { + resize: vertical; +} input { border-radius: 0.25rem; color: #303030; background-color: #fff; } -.form-control { + .search form { border-radius: 4px; padding: 6px 10px; } -.form-control::-ms-input-placeholder { - color: #868686; -} -.form-control::placeholder { + .search form::placeholder { color: #868686; } .navbar-gitlab { @@ -682,6 +973,7 @@ input { margin-bottom: 0; min-height: 40px; border: 0; + border-bottom: 1px solid #dbdbdb; position: fixed; top: 0; left: 0; @@ -731,6 +1023,9 @@ input { .navbar-gitlab .header-content .title img + .logo-text { margin-left: 8px; } +.navbar-gitlab .header-content .title.wrap { + white-space: normal; +} .navbar-gitlab .header-content .title a { display: flex; align-items: center; @@ -738,6 +1033,9 @@ input { margin: 5px 2px 5px -8px; border-radius: 4px; } +.navbar-gitlab .header-content .dropdown.open > a { + border-bottom-color: #fff; +} .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } @@ -746,6 +1044,7 @@ input { border-top: 0; padding: 0; } + @media (max-width: 575.98px) { .navbar-gitlab .navbar-collapse { flex: 1 1 auto; @@ -754,6 +1053,7 @@ input { .navbar-gitlab .navbar-collapse .nav { flex-wrap: nowrap; } + @media (max-width: 575.98px) { .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { margin-left: 0; @@ -776,10 +1076,7 @@ input { text-align: center; color: currentColor; } -.navbar-gitlab .container-fluid .navbar-toggler.active { - color: currentColor; - background-color: transparent; -} + @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .navbar-nav { display: flex; @@ -787,14 +1084,11 @@ input { flex-direction: row; } } -.navbar-gitlab - .container-fluid - .navbar-nav - li - .badge.badge-pill:not(.merge-request-badge) { +.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { box-shadow: none; font-weight: 600; } + @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li.header-user { padding-left: 10px; @@ -806,6 +1100,7 @@ input { padding: 6px 8px; height: 32px; } + @media (max-width: 575.98px) { .navbar-gitlab .container-fluid .nav > li > a { padding: 0; @@ -814,12 +1109,7 @@ input { .navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { margin-left: 2px; } -.navbar-gitlab - .container-fluid - .nav - > li - > a.header-user-dropdown-toggle - .header-user-avatar { +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar { margin-right: 0; } .navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { @@ -840,9 +1130,7 @@ input { height: 32px; font-weight: 600; } -.navbar-sub-nav > li .top-nav-toggle, .navbar-sub-nav > li > button, -.navbar-nav > li .top-nav-toggle, .navbar-nav > li > button { background: transparent; border: 0; @@ -880,25 +1168,31 @@ input { font-weight: 400; margin-left: -6px; font-size: 11px; - color: var(--gray-950, #fff); + color: #fff; padding: 0 5px; line-height: 12px; border-radius: 7px; box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); } -.title-container .badge.badge-pill:not(.merge-request-badge).green-badge, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { - background-color: var(--green-400, #2da160); +.title-container .badge.badge-pill.green-badge, +.navbar-nav .badge.badge-pill.green-badge { + background-color: #108548; +} +.title-container .badge.badge-pill.merge-requests-count, +.navbar-nav .badge.badge-pill.merge-requests-count { + background-color: #de7e00; } -.title-container - .badge.badge-pill:not(.merge-request-badge).merge-requests-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { - background-color: var(--orange-400, #c17d10); +.title-container .badge.badge-pill.todos-count, +.navbar-nav .badge.badge-pill.todos-count { + background-color: #1f75cb; } -.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { - background-color: var(--blue-400, #428fdc); +.title-container .canary-badge .badge, +.navbar-nav .canary-badge .badge { + font-size: 12px; + line-height: 16px; + padding: 0 0.5rem; } + @media (max-width: 575.98px) { .navbar-gitlab .container-fluid { font-size: 18px; @@ -925,7 +1219,7 @@ input { } .header-user.show .dropdown-menu { margin-top: 4px; - color: var(--gl-text-color, #303030); + color: #303030; left: auto; max-height: 445px; } @@ -938,32 +1232,30 @@ input { border-radius: 50%; border: 1px solid #f5f5f5; } -.notification-dot { - background-color: #d99530; - height: 12px; - width: 12px; - margin-top: -15px; - pointer-events: none; - visibility: hidden; +.media { + display: flex; + align-items: flex-start; } -.top-nav-toggle .dropdown-icon { - margin-right: 0.5rem; +.card { + margin-bottom: 16px; } -.tanuki-logo .tanuki-left-ear, -.tanuki-logo .tanuki-right-ear, -.tanuki-logo .tanuki-nose { - fill: #e24329; +.content-wrapper { + width: 100%; } -.tanuki-logo .tanuki-left-eye, -.tanuki-logo .tanuki-right-eye { - fill: #fc6d26; +.content-wrapper .container-fluid { + padding: 0 16px; } -.tanuki-logo .tanuki-left-cheek, -.tanuki-logo .tanuki-right-cheek { - fill: #fca326; + +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 50px; + } } -.card { - margin-bottom: 16px; + +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } } .context-header { position: relative; @@ -990,20 +1282,9 @@ input { overflow: hidden; text-overflow: ellipsis; } -@media (min-width: 768px) { - .page-with-contextual-sidebar { - padding-left: 50px; - } -} -@media (min-width: 1200px) { - .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - .page-with-icon-sidebar { - padding-left: 50px; - } +.context-header .sidebar-context-title.text-secondary { + font-weight: normal; + font-size: 0.8em; } .nav-sidebar { position: fixed; @@ -1016,6 +1297,7 @@ input { box-shadow: inset -1px 0 0 #dbdbdb; transform: translate3d(0, 0, 0); } + @media (min-width: 576px) and (max-width: 576px) { .nav-sidebar:not(.sidebar-collapsed-desktop) { box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); @@ -1028,6 +1310,7 @@ input { overflow-x: hidden; } .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), +.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title, .nav-sidebar.sidebar-collapsed-desktop .nav-item-name { border: 0; clip: rect(0, 0, 0, 0); @@ -1048,6 +1331,9 @@ input { .nav-sidebar.sidebar-collapsed-desktop .avatar-container { margin: 0 auto; } +.nav-sidebar.sidebar-expanded-mobile { + left: 0; +} .nav-sidebar a { text-decoration: none; } @@ -1070,6 +1356,7 @@ input { .nav-sidebar li.active > a { font-weight: 600; } + @media (max-width: 767.98px) { .nav-sidebar { left: -220px; @@ -1086,6 +1373,7 @@ input { height: 16px; width: 16px; } + @media (min-width: 768px) and (max-width: 1199px) { .nav-sidebar:not(.sidebar-expanded-mobile) { width: 50px; @@ -1093,8 +1381,8 @@ input { .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; } - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), + .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title, .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { border: 0; clip: rect(0, 0, 0, 0); @@ -1122,21 +1410,7 @@ input { .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { display: none; } .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { @@ -1146,17 +1420,11 @@ input { padding: 16px; width: 49px; } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text, + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { display: none; } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1173,12 +1441,10 @@ input { .sidebar-sub-level-items > li a { padding: 8px 16px 8px 40px; } -.sidebar-sub-level-items > li.active a { - background: rgba(0, 0, 0, 0.04); -} .sidebar-top-level-items { margin-bottom: 60px; } + @media (min-width: 576px) { .sidebar-top-level-items > li > a { margin-right: 1px; @@ -1198,28 +1464,23 @@ input { .sidebar-top-level-items > li.active .badge.badge-pill { font-weight: 600; } -.sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { +.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { display: block; } .toggle-sidebar-button, .close-nav-button { + width: 219px; + position: fixed; height: 48px; + bottom: 0; padding: 0 16px; background-color: #fafafa; border: 0; + border-top: 1px solid #dbdbdb; color: #666; display: flex; align-items: center; } -.toggle-sidebar-button, -.close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #dbdbdb; -} .toggle-sidebar-button svg, .close-nav-button svg { margin-right: 8px; @@ -1239,21 +1500,7 @@ input { .sidebar-collapsed-desktop .context-header a { padding: 10px 4px; } -.sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { +.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { display: none; } .sidebar-collapsed-desktop .nav-icon-container { @@ -1267,9 +1514,7 @@ input { .sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { display: none; } -.sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -1285,6 +1530,7 @@ input { .close-nav-button { display: none; } + @media (max-width: 767.98px) { .close-nav-button { display: flex; @@ -1293,412 +1539,128 @@ input { display: none; } } -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right { - color: #c4c4c4; -} -body.sidebar-refactoring .nav-sidebar { - box-shadow: none; -} -body.sidebar-refactoring .nav-sidebar li.active { - background-color: transparent; - box-shadow: none; -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 50px; - } -} -@media (min-width: 1200px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-icon-sidebar { - padding-left: 50px; - } -} -body.sidebar-refactoring .nav-sidebar { - position: fixed; - z-index: 600; - width: 220px; - top: 40px; - bottom: 0; - left: 0; - background-color: #f0f0f0; - transform: translate3d(0, 0, 0); -} -@media (min-width: 576px) and (max-width: 576px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); - } -} -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { - width: 50px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .nav-sidebar-inner-scroll { - overflow-x: hidden; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .badge.badge-pill:not(.fly-out-badge), -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - > a { - min-height: 45px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .fly-out-top-item { - display: block; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .avatar-container { - margin: 0 auto; +table.table { + margin-bottom: 16px; } -body.sidebar-refactoring .nav-sidebar a { +table.table .dropdown-menu a { text-decoration: none; - line-height: 1rem; - color: #2f2a6b; -} -body.sidebar-refactoring .nav-sidebar li { - white-space: nowrap; -} -body.sidebar-refactoring .nav-sidebar li .nav-item-name { - flex: 1; -} -body.sidebar-refactoring .nav-sidebar li > a { - margin-left: 0.25rem; - margin-right: 0.25rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - display: flex; - align-items: center; - border-radius: 0.25rem; - width: auto; - margin-bottom: 1px; -} -body.sidebar-refactoring .nav-sidebar li.active > a { - font-weight: 600; -} -body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) { - background-color: rgba(41, 41, 97, 0.08); -} -body.sidebar-refactoring .nav-sidebar ul { - padding-left: 0; - list-style: none; -} -@media (max-width: 767.98px) { - body.sidebar-refactoring .nav-sidebar { - left: -220px; - } -} -body.sidebar-refactoring .nav-sidebar .nav-icon-container { - display: flex; - margin-right: 8px; -} -body.sidebar-refactoring .nav-sidebar .fly-out-top-item { - display: none; -} -body.sidebar-refactoring .nav-sidebar svg { - height: 16px; - width: 16px; -} -@media (min-width: 768px) and (max-width: 1199px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - > a { - min-height: 45px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .fly-out-top-item { - display: block; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .avatar-container { - margin: 0 auto; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { - height: 60px; - width: 50px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { - padding: 10px 4px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-icon-container { - margin-right: 0; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button { - padding: 16px; - width: 49px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } } -body.sidebar-refactoring .nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -body.sidebar-refactoring .sidebar-top-level-items { - margin-bottom: 60px; +table.table .success, +table.table .info { + color: #fff; } -body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { - border-radius: 0.5rem; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - background-color: #cbe2f9; - color: #0b5cad; +table.table .success a:not(.btn), +table.table .info a:not(.btn) { + text-decoration: underline; + color: #fff; } -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { +pre { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; display: block; -} -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .badge.badge-pill { - font-weight: 400; - color: #0b5cad; -} -body.sidebar-refactoring .sidebar-sub-level-items { - padding-bottom: 0; - display: none; -} -body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { - padding-left: 2.25rem; -} -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { - height: 48px; - padding: 0 16px; + padding: 8px 12px; + margin: 0 0 8px; + font-size: 13px; + word-break: break-all; + word-wrap: break-word; + color: #303030; background-color: #fafafa; - border: 0; - color: #666; - display: flex; - align-items: center; - background-color: #f0f0f0; - color: #2f2a6b; -} -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .collapse-text, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { - color: inherit; -} -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #dbdbdb; -} -body.sidebar-refactoring .toggle-sidebar-button svg, -body.sidebar-refactoring .close-nav-button svg { - margin-right: 8px; -} -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { - display: none; -} -body.sidebar-refactoring .collapse-text { - white-space: nowrap; - overflow: hidden; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { - height: 60px; - width: 50px; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { - padding: 10px 4px; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { - margin-right: 0; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { - padding: 16px; - width: 49px; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .collapse-text, -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; -} -body.sidebar-refactoring .close-nav-button { - display: none; + border: 1px solid #dbdbdb; + border-radius: 2px; } -@media (max-width: 767.98px) { - body.sidebar-refactoring .close-nav-button { - display: flex; - } - body.sidebar-refactoring .toggle-sidebar-button { - display: none; - } +.monospace { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; } -input::-moz-placeholder { +input::-moz-placeholder, +textarea::-moz-placeholder { color: #868686; opacity: 1; } -input::-ms-input-placeholder { +input::-ms-input-placeholder, +textarea::-ms-input-placeholder { color: #868686; } -input:-ms-input-placeholder { +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { color: #868686; } svg { fill: currentColor; } + svg.s12 { width: 12px; height: 12px; } + svg.s16 { width: 16px; height: 16px; } + svg.s18 { width: 18px; height: 18px; } + svg.s12 { vertical-align: -1px; } + svg.s16 { vertical-align: -3px; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +table.code { + width: 100%; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + border: 0; + border-collapse: separate; + margin: 0; + padding: 0; + table-layout: fixed; + border-radius: 0 0 4px 4px; +} +.frame .badge.badge-pill { + position: absolute; + background-color: #428fdc; + color: #fff; + border: #fff 1px solid; + min-height: 16px; + padding: 5px 8px; + border-radius: 12px; +} +.frame .badge.badge-pill { + transform: translate(-50%, -50%); +} +.color-label { + padding: 0 0.5rem; + line-height: 16px; + border-radius: 100px; + color: #fff; +} +.label-link { + display: inline-flex; + vertical-align: text-bottom; +} +.milestones { + padding: 8px; + margin-top: 8px; + border-radius: 4px; + background-color: #dbdbdb; +} .search { margin: 0 8px; } .search form { - display: block; margin: 0; padding: 4px; width: 200px; @@ -1707,6 +1669,7 @@ svg.s16 { border: 0; border-radius: 4px; } + @media (min-width: 1200px) { .search form { width: 320px; @@ -1750,37 +1713,43 @@ svg.s16 { max-height: 400px; overflow: auto; } + @media (min-width: 1200px) { .search .search-input-wrap .dropdown-menu { width: 320px; } } -.search .identicon { - flex-basis: 16px; - flex-shrink: 0; - margin-right: 4px; +.search .search-input-wrap .dropdown-content { + max-height: 382px; } -.avatar, -.avatar-container { +.settings { + border-top: 1px solid #dbdbdb; +} +.settings:first-of-type { + margin-top: 10px; + border: 0; +} +.settings + div .settings:first-of-type { + margin-top: 0; + border-top: 1px solid #dbdbdb; +} +.avatar, .avatar-container { float: left; margin-right: 16px; border-radius: 50%; border: 1px solid #f5f5f5; } -.avatar.s16, -.avatar-container.s16 { +.s16.avatar, .s16.avatar-container { width: 16px; height: 16px; margin-right: 8px; } -.avatar.s18, -.avatar-container.s18 { +.s18.avatar, .s18.avatar-container { width: 18px; height: 18px; margin-right: 8px; } -.avatar.s40, -.avatar-container.s40 { +.s40.avatar, .s40.avatar-container { width: 40px; height: 40px; margin-right: 8px; @@ -1794,45 +1763,15 @@ svg.s16 { overflow: hidden; border-color: rgba(0, 0, 0, 0.1); } +.avatar.center { + font-size: 14px; + line-height: 1.8em; + text-align: center; +} .avatar.avatar-tile { border-radius: 0; border: 0; } -.identicon { - text-align: center; - vertical-align: top; - color: #525252; - background-color: #eee; -} -.identicon.s16 { - font-size: 10px; - line-height: 16px; -} -.identicon.s40 { - font-size: 16px; - line-height: 38px; -} -.identicon.bg1 { - background-color: #ffebee; -} -.identicon.bg2 { - background-color: #f3e5f5; -} -.identicon.bg3 { - background-color: #e8eaf6; -} -.identicon.bg4 { - background-color: #e3f2fd; -} -.identicon.bg5 { - background-color: #e0f2f1; -} -.identicon.bg6 { - background-color: #fbe9e7; -} -.identicon.bg7 { - background-color: #eee; -} .avatar-container { overflow: hidden; display: flex; @@ -1867,10 +1806,6 @@ svg.s16 { .rect-avatar.s40 { border-radius: 4px; } -#content-body { - display: block; -} - .tab-width-8 { -moz-tab-size: 8; tab-size: 8; @@ -1886,16 +1821,12 @@ svg.s16 { white-space: nowrap; width: 1px; } -.gl-absolute { - position: absolute; -} .gl-ml-3 { margin-left: 0.5rem; } -.gl-mx-0\! { - margin-left: 0 !important; - margin-right: 0 !important; +.content-wrapper > .alert-wrapper, +#content-body, .modal-dialog { + display: block; } - -@import "startup/cloaking"; +@import 'cloaking'; @include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index ebb4f32054f72..6b78abdb5e09f 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -1,6 +1,3 @@ -// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" -// Please see the feedback issue for more details and help: -// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; *, *::before, @@ -11,14 +8,12 @@ html { font-family: sans-serif; line-height: 1.15; } -header { + header, nav, section { display: block; } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -31,8 +26,7 @@ hr { height: 0; overflow: visible; } -h1, -h3 { +h1, h2, h3 { margin-top: 0; margin-bottom: 0.25rem; } @@ -45,20 +39,47 @@ address { font-style: normal; line-height: inherit; } + +ul { + margin-top: 0; + margin-bottom: 1rem; +} + +ul ul { + margin-bottom: 0; +} + +strong { + font-weight: bolder; +} +sub { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -.25em; +} a { color: #007bff; text-decoration: none; background-color: transparent; } -a:not([href]):not([class]) { +a:not([href]) { color: inherit; text-decoration: none; } +pre, code { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", - "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; font-size: 1em; } +pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; +} img { vertical-align: middle; border-style: none; @@ -67,54 +88,89 @@ svg { overflow: hidden; vertical-align: middle; } +table { + border-collapse: collapse; +} +th { + text-align: inherit; +} label { display: inline-block; margin-bottom: 0.5rem; } -input { +button { + border-radius: 0; +} +input, +button, +textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } +button, input { overflow: visible; } +button { + text-transform: none; +} +button:not(:disabled), +[type="button"]:not(:disabled), +[type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } + +input[type="checkbox"] { + box-sizing: border-box; + padding: 0; +} +textarea { + overflow: auto; + resize: vertical; +} fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } +[type="search"] { + outline-offset: -2px; +} summary { display: list-item; cursor: pointer; } +template { + display: none; +} [hidden] { display: none !important; } -h1, -h3, -.h1, -.h3 { +h1, h2, h3, +.h1, .h2, .h3 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; color: #303030; } -h1, -.h1 { +h1, .h1 { font-size: 2.1875rem; } -h3, -.h3 { +h2, .h2 { + font-size: 1.75rem; +} +h3, .h3 { font-size: 1.53125rem; } hr { @@ -123,6 +179,10 @@ hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } +.list-unstyled { + padding-left: 0; + list-style: none; +} code { font-size: 90%; color: #1f1f1f; @@ -131,6 +191,16 @@ code { a > code { color: inherit; } +pre { + display: block; + font-size: 90%; + color: #303030; +} +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} .container { width: 100%; padding-right: 15px; @@ -138,21 +208,56 @@ a > code { margin-right: auto; margin-left: auto; } + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + @media (min-width: 576px) { .container { max-width: 540px; } } + @media (min-width: 768px) { .container { max-width: 720px; } } + @media (min-width: 992px) { .container { max-width: 960px; } } + @media (min-width: 1200px) { .container { max-width: 1140px; @@ -164,26 +269,19 @@ a > code { margin-right: -15px; margin-left: -15px; } -.col, -.col-sm-5, -.col-sm-7, -.col-sm-12 { + .col-sm-5, .col-sm-7, .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-5 { flex: 0 0 41.66667%; @@ -204,7 +302,18 @@ a > code { order: 12; } } -.form-control { +.table { + width: 100%; + margin-bottom: 0.5rem; + color: #303030; +} +.table th, +.table td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid #dbdbdb; +} +.form-control, .search form { display: block; width: 100%; height: 34px; @@ -218,37 +327,52 @@ a > code { border: 1px solid #dbdbdb; border-radius: 0.25rem; } + @media (prefers-reduced-motion: reduce) { } -.form-control:-moz-focusring { +.form-control:-moz-focusring, .search form:-moz-focusring { color: transparent; text-shadow: 0 0 0 #303030; } -.form-control::-ms-input-placeholder { +.form-control::placeholder, .search form::placeholder { color: #5e5e5e; opacity: 1; } -.form-control::placeholder { - color: #5e5e5e; - opacity: 1; -} -.form-control:disabled { +.form-control:disabled, .search form:disabled { background-color: #fafafa; opacity: 1; } +textarea.form-control { + height: auto; +} .form-group { margin-bottom: 1rem; } -.form-row { +.form-inline { display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; + flex-flow: row wrap; + align-items: center; } -.form-row > .col, -.form-row > [class*="col-"] { - padding-right: 5px; - padding-left: 5px; + +@media (min-width: 576px) { + .form-inline label { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0; + } + .form-inline .form-group { + display: flex; + flex: 0 0 auto; + flex-flow: row wrap; + align-items: center; + margin-bottom: 0; + } + .form-inline .form-control, .form-inline .search form, .search .form-inline form { + display: inline-block; + width: auto; + vertical-align: middle; + } } .btn { display: inline-block; @@ -256,7 +380,7 @@ a > code { color: #303030; text-align: center; vertical-align: middle; - -moz-user-select: none; + cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -265,17 +389,148 @@ a > code { line-height: 20px; border-radius: 0.25rem; } + @media (prefers-reduced-motion: reduce) { } -.btn:disabled { +.btn.disabled, .btn:disabled { opacity: 0.65; } -.btn:not(:disabled):not(.disabled) { - cursor: pointer; -} +a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; } +.btn-success { + color: #fff; + background-color: #108548; + border-color: #108548; +} +.btn-success.disabled, .btn-success:disabled { + color: #fff; + background-color: #108548; + border-color: #108548; +} +.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, +.show > .btn-success.dropdown-menu-toggle { + color: #fff; + background-color: #0b572f; + border-color: #094c29; +} + .login-page input[type='submit'] { + display: block; + width: 100%; +} + .login-page input[type='submit'] + input[type='submit'] { + margin-top: 0.5rem; +} + .login-page input[type="submit"][type='submit'], +.login-page input[type="reset"][type='submit'], +.login-page input[type="button"][type='submit'] { + width: 100%; +} +.collapse:not(.show) { + display: none; +} + +.dropdown { + position: relative; +} + .dropdown-menu-toggle { + white-space: nowrap; +} + .dropdown-menu-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} + .dropdown-menu-toggle:empty::after { + margin-left: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0.125rem 0 0; + font-size: 1rem; + color: #303030; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} +.dropdown-menu-right { + right: 0; + left: auto; +} + .divider { + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid #dbdbdb; +} +.dropdown-menu.show { + display: block; +} +.nav { + display: flex; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.nav-link { + display: block; + padding: 0.5rem 1rem; +} +.nav-link.disabled { + color: #5e5e5e; + pointer-events: none; + cursor: default; +} +.nav-tabs { + border-bottom: 1px solid #999; +} +.nav-tabs .nav-item { + margin-bottom: -1px; +} +.nav-tabs .nav-link { + border: 1px solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} +.nav-tabs .nav-link.disabled { + color: #5e5e5e; + background-color: transparent; + border-color: transparent; +} +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: #525252; + background-color: #fff; + border-color: #999 #999 #fff; +} +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} .navbar { position: relative; display: flex; @@ -284,12 +539,77 @@ fieldset:disabled a.btn { justify-content: space-between; padding: 0.25rem 0.5rem; } -.navbar .container { +.navbar .container, +.navbar .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } +.navbar-nav { + display: flex; + flex-direction: column; + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.navbar-nav .nav-link { + padding-right: 0; + padding-left: 0; +} +.navbar-nav .dropdown-menu { + position: static; + float: none; +} +.navbar-collapse { + flex-basis: 100%; + flex-grow: 1; + align-items: center; +} +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 1.25rem; + line-height: 1; + background-color: transparent; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +@media (max-width: 575.98px) { + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + padding-right: 0; + padding-left: 0; + } +} + +@media (min-width: 576px) { + .navbar-expand-sm { + flex-flow: row nowrap; + justify-content: flex-start; + } + .navbar-expand-sm .navbar-nav { + flex-direction: row; + } + .navbar-expand-sm .navbar-nav .dropdown-menu { + position: absolute; + } + .navbar-expand-sm .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; + } + .navbar-expand-sm > .container, + .navbar-expand-sm > .container-fluid { + flex-wrap: nowrap; + } + .navbar-expand-sm .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + .navbar-expand-sm .navbar-toggler { + display: none; + } +} .card { position: relative; display: flex; @@ -305,156 +625,243 @@ fieldset:disabled a.btn { margin-right: 0; margin-left: 0; } -.d-block { - display: block !important; +.badge { + display: inline-block; + padding: 0.25em 0.4em; + font-size: 75%; + font-weight: 600; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; } -.d-flex { - display: flex !important; + +@media (prefers-reduced-motion: reduce) { } -.flex-wrap { - flex-wrap: wrap !important; +.badge:empty { + display: none; } -.justify-content-between { - justify-content: space-between !important; +.btn .badge { + position: relative; + top: -1px; } -.align-items-center { - align-items: center !important; +.badge-pill { + padding-right: 0.6em; + padding-left: 0.6em; + border-radius: 10rem; } -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; +.media { + display: flex; + align-items: flex-start; } -.ml-2 { - margin-left: 0.5rem !important; +.close { + float: right; + font-size: 1.5rem; + font-weight: 600; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + opacity: .5; } -.mt-3 { - margin-top: 1rem !important; +button.close { + padding: 0; + background-color: transparent; + border: 0; + appearance: none; } -.mb-3 { - margin-bottom: 1rem !important; +a.close.disabled { + pointer-events: none; +} +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; } + @media (min-width: 576px) { - .mt-sm-0 { - margin-top: 0 !important; + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; } } -.text-center { - text-align: center !important; +.bg-transparent { + background-color: transparent !important; } -.font-weight-normal { - font-weight: 400 !important; +.border { + border: 1px solid #dbdbdb !important; } -.gl-form-input, -.gl-form-input.form-control { - background-color: #fff; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - height: auto; - color: #303030; - box-shadow: inset 0 0 0 1px #868686; - border-style: none; - appearance: none; - -moz-appearance: none; +.border-top { + border-top: 1px solid #dbdbdb !important; } -.gl-form-input:not(.form-control-plaintext):-moz-read-only, -.gl-form-input.form-control:not(.form-control-plaintext):-moz-read-only { - background-color: #fafafa; - color: #868686; - box-shadow: inset 0 0 0 1px #dbdbdb; - cursor: not-allowed; +.border-right { + border-right: 1px solid #dbdbdb !important; } -.gl-form-input:disabled, -.gl-form-input:not(.form-control-plaintext):read-only, -.gl-form-input.form-control:disabled, -.gl-form-input.form-control:not(.form-control-plaintext):read-only { - background-color: #fafafa; - color: #868686; - box-shadow: inset 0 0 0 1px #dbdbdb; - cursor: not-allowed; +.border-bottom { + border-bottom: 1px solid #dbdbdb !important; } -.gl-form-input::-ms-input-placeholder, -.gl-form-input.form-control::-ms-input-placeholder { - color: #868686; +.border-left { + border-left: 1px solid #dbdbdb !important; } -.gl-form-input::placeholder, -.gl-form-input.form-control::placeholder { - color: #868686; +.rounded { + border-radius: 0.25rem !important; } -.gl-button { - display: inline-flex; +.clearfix::after { + display: block; + clear: both; + content: ""; } -.gl-button:not(.btn-link):active { - text-decoration: none; +.d-none { + display: none !important; } -.gl-button.gl-button { - border-width: 0; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - background-color: transparent; - line-height: 1rem; - color: #303030; - fill: currentColor; - box-shadow: inset 0 0 0 1px #bfbfbf; - justify-content: center; - align-items: center; - font-size: 0.875rem; - border-radius: 0.25rem; +.d-inline-block { + display: inline-block !important; } -.gl-button.gl-button .gl-button-icon { - height: 1rem; - width: 1rem; - flex-shrink: 0; - margin-right: 0.25rem; - top: auto; +.d-block { + display: block !important; } -.gl-button.gl-button.btn-default { - background-color: #fff; +.d-flex { + display: flex !important; } -.gl-button.gl-button.btn-default:active { - box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); - outline: none; - background-color: #dbdbdb; + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; + } } -.gl-button.gl-button.btn-confirm { - color: #fff; + +@media (min-width: 768px) { + .d-md-block { + display: block !important; + } } -.gl-button.gl-button.btn-confirm { - background-color: #1f75cb; - box-shadow: inset 0 0 0 1px #1068bf; + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; + } + .d-lg-block { + display: block !important; + } +} + +@media (min-width: 1200px) { + .d-xl-block { + display: block !important; + } +} +.flex-wrap { + flex-wrap: wrap !important; +} +.justify-content-between { + justify-content: space-between !important; +} +.align-items-center { + align-items: center !important; +} +.float-right { + float: right !important; +} +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} +.mt-3 { + margin-top: 1rem !important; +} +.mb-3 { + margin-bottom: 1rem !important; +} +.m-auto { + margin: auto !important; +} + +@media (min-width: 576px) { + .mt-sm-0 { + margin-top: 0 !important; + } +} +.text-nowrap { + white-space: nowrap !important; +} +.text-left { + text-align: left !important; +} +.font-weight-normal { + font-weight: 400 !important; } -.gl-button.gl-button.btn-confirm:active { - box-shadow: inset 0 0 0 2px #033464, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); +.visible { + visibility: visible !important; +} +.form-control.focus, .search form.focus { + color: #303030; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} +input[type="color"].form-control { + height: 34px; + padding: 0.125rem 0.25rem; +} +input[type="color"].form-control:disabled { + background-color: #666; + opacity: 0.65; +} +.gl-badge { + display: inline-flex; + align-items: center; + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; outline: none; - background-color: #0b5cad; } -body, -.form-control { +body, .form-control, .search form, +.search form { font-size: 0.875rem; } -[type="submit"] { +button, +html [type='button'], +[type='reset'], +[type='submit'], +[role='button'] { cursor: pointer; } h1, .h1, +h2, +.h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; } +input[type='file'] { + line-height: 1; +} + +strong { + font-weight: bold; +} a { color: #1068bf; } @@ -471,6 +878,9 @@ code { background-color: inherit; padding: unset; } +table { + border-spacing: 0; +} .hidden { display: none !important; visibility: hidden !important; @@ -478,6 +888,10 @@ code { .hide { display: none; } + .dropdown-menu-toggle::after { + display: none; +} +.badge:not(.gl-badge), .label { padding: 4px 5px; font-size: 12px; @@ -485,6 +899,28 @@ code { font-weight: 400; display: inline-block; } +.nav-tabs { + border-bottom: 0; +} +.nav-tabs .nav-link { + border-top: 0; + border-left: 0; + border-right: 0; +} +.nav-tabs .nav-item { + margin-bottom: 0; +} +pre code { + white-space: pre-wrap; +} +input[type="color"].form-control { + height: 34px; +} +.toggle-sidebar-button .collapse-text, +.toggle-sidebar-button .icon-chevron-double-lg-left, +.toggle-sidebar-button .icon-chevron-double-lg-right { + color: #666; +} svg { vertical-align: baseline; } @@ -494,155 +930,1136 @@ html { body { text-decoration-skip: ink; } -body.navless { - background-color: #fff !important; +body.navless { + background-color: #fff !important; +} +.content-wrapper { + margin-top: 40px; + padding-bottom: 100px; +} +.container { + padding-top: 0; + z-index: 5; +} +.container .content { + margin: 0; +} + +@media (max-width: 575.98px) { + .container .content { + margin-top: 20px; + } +} + +@media (max-width: 575.98px) { + .container .container .title { + padding-left: 15px !important; + } +} +.navless-container { + margin-top: 40px; + padding-top: 32px; +} +.btn { + border-radius: 4px; + font-size: 0.875rem; + font-weight: 400; + padding: 6px 10px; + background-color: #fff; + border-color: #dbdbdb; + color: #303030; + color: #303030; + white-space: nowrap; +} +.btn:active, .btn.active { + box-shadow: rgba(0, 0, 0, 0.16); + background-color: #eaeaea; + border-color: #e3e3e3; + color: #303030; +} +.btn.btn-success { + background-color: #108548; + border-color: #217645; + color: #fff; +} +.btn.btn-success:active, .btn.btn-success.active { + box-shadow: rgba(0, 0, 0, 0.16); + background-color: #24663b; + border-color: #0d532a; + color: #fff; +} +.btn svg { + height: 15px; + width: 15px; +} +.btn svg:not(:last-child), +.btn .fa:not(:last-child) { + margin-right: 5px; +} + .login-page input[type='submit'] { + width: 100%; + margin: 0; + margin-bottom: 15px; +} + .login-page input.btn[type='submit'] { + padding: 6px 0; +} +.badge.badge-pill:not(.gl-badge) { + font-weight: 400; + background-color: rgba(0, 0, 0, 0.07); + color: #525252; + vertical-align: baseline; +} +.hint { + font-style: italic; + color: #bfbfbf; +} +.bold { + font-weight: 600; +} +.tab-content { + overflow: visible; +} +pre.wrap { + word-break: break-word; + white-space: pre-wrap; +} +hr { + margin: 24px 0; + border-top: 1px solid #eee; +} +table a code { + position: relative; + top: -2px; + margin-right: 3px; +} +.loading { + margin: 20px auto; + height: 40px; + color: #525252; + font-size: 32px; + text-align: center; +} +.highlight { + text-shadow: none; +} +.chart { + overflow: hidden; + height: 220px; +} +.footer-links { + margin-bottom: 20px; +} +.footer-links a { + margin-right: 15px; +} +.break-word { + word-wrap: break-word; +} +.append-bottom-20 { + margin-bottom: 20px; +} +.center { + text-align: center; +} +.block { + display: block; +} +.flex { + display: flex; +} +.flex-grow { + flex-grow: 1; +} +.dropdown { + position: relative; +} +.show.dropdown .dropdown-menu { + transform: translateY(0); + display: block; + min-height: 40px; + max-height: 312px; + overflow-y: auto; +} + +@media (max-width: 575.98px) { + .show.dropdown .dropdown-menu { + width: 100%; + } +} + .show.dropdown .dropdown-menu-toggle, +.show.dropdown .dropdown-menu-toggle { + border-color: #c4c4c4; +} +.show.dropdown [data-toggle='dropdown'] { + outline: 0; +} +.search-input-container .dropdown-menu { + margin-top: 11px; +} + .dropdown-menu-toggle { + padding: 6px 8px 6px 10px; + background-color: #fff; + color: #303030; + font-size: 14px; + text-align: left; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; + white-space: nowrap; +} + .no-outline.dropdown-menu-toggle { + outline: 0; +} + .dropdown-menu-toggle .fa { + color: #c4c4c4; +} +.dropdown-menu-toggle { + padding-right: 25px; + position: relative; + width: 160px; + text-overflow: ellipsis; + overflow: hidden; +} +.dropdown-menu-toggle .fa { + position: absolute; +} +.dropdown-menu { + display: none; + position: absolute; + width: auto; + top: 100%; + z-index: 300; + min-width: 240px; + max-width: 500px; + margin-top: 4px; + margin-bottom: 24px; + font-size: 14px; + font-weight: 400; + padding: 8px 0; + background-color: #fff; + border: 1px solid #dbdbdb; + border-radius: 0.25rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} +.dropdown-menu ul { + margin: 0; + padding: 0; +} +.dropdown-menu li { + display: block; + text-align: left; + list-style: none; + padding: 0 1px; +} +.dropdown-menu li > a, +.dropdown-menu li button { + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; + display: block; + font-weight: 400; + position: relative; + padding: 8px 12px; + color: #303030; + line-height: 16px; + white-space: normal; + overflow: hidden; + text-align: left; + width: 100%; +} +.dropdown-menu .divider { + height: 1px; + margin: 0.25rem 0; + padding: 0; + background-color: #dbdbdb; +} +.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { + margin-right: 40px; +} +.dropdown-select { + width: 300px; +} + +@media (max-width: 767.98px) { + .dropdown-select { + width: 100%; + } +} +.dropdown-content { + max-height: 252px; + overflow-y: auto; +} +.dropdown-loading { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: none; + z-index: 9; + background-color: rgba(255, 255, 255, 0.6); + font-size: 28px; +} +.dropdown-loading .fa { + position: absolute; + top: 50%; + left: 50%; + margin-top: -14px; + margin-left: -14px; +} + +@media (max-width: 575.98px) { + .navbar-gitlab li.dropdown { + position: static; + } + header.navbar-gitlab .dropdown .dropdown-menu { + width: 100%; + min-width: 100%; + } +} + +@media (max-width: 767.98px) { + .dropdown-menu-toggle { + width: 100%; + } +} +.flash-container { + margin: 0; + margin-bottom: 16px; + font-size: 14px; + position: relative; + z-index: 1; +} +.flash-container.sticky { + position: sticky; + position: -webkit-sticky; + top: 48px; + z-index: 251; +} +.flash-container.flash-container-page { + margin-bottom: 0; +} +.flash-container:empty { + margin: 0; +} +textarea { + resize: vertical; +} +input { + border-radius: 0.25rem; + color: #303030; + background-color: #fff; +} +label { + font-weight: 600; +} +label.label-bold { + font-weight: 600; +} +.form-control, .search form { + border-radius: 4px; + padding: 6px 10px; +} +.form-control::placeholder, .search form::placeholder { + color: #868686; +} +.gl-field-error { + color: #dd2b0e; + font-size: 0.875rem; +} +.gl-show-field-errors .form-control:not(textarea), .gl-show-field-errors .search form:not(textarea), .search .gl-show-field-errors form:not(textarea) { + height: 34px; +} +.gl-show-field-errors .gl-field-hint { + color: #303030; +} + +@media (max-width: 575.98px) { + .remember-me .remember-me-checkbox { + margin-top: 0; + } +} +body.ui-indigo .navbar-gitlab { + background-color: #292961; +} +body.ui-indigo .navbar-gitlab .navbar-collapse { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler { + border-left: 1px solid #6868b9; +} +body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg { + fill: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > a, +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.active > button, body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a, +body.ui-indigo .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button, +body.ui-indigo .navbar-gitlab .navbar-nav > li.active > a, +body.ui-indigo .navbar-gitlab .navbar-nav > li.active > button, +body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > a, +body.ui-indigo .navbar-gitlab .navbar-nav > li.dropdown.show > button { + color: #292961; + background-color: #fff; +} +body.ui-indigo .navbar-gitlab .navbar-sub-nav { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li { + color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li > a.header-user-dropdown-toggle .header-user-avatar { + border-color: #d1d1f0; +} +body.ui-indigo .navbar-gitlab .nav > li.active > a, +body.ui-indigo .navbar-gitlab .nav > li.dropdown.show > a { + color: #292961; + background-color: #fff; +} +body.ui-indigo .search form { + background-color: rgba(209, 209, 240, 0.2); +} +body.ui-indigo .search .search-input::placeholder { + color: rgba(209, 209, 240, 0.8); +} +body.ui-indigo .search .search-input-wrap .search-icon, +body.ui-indigo .search .search-input-wrap .clear-icon { + fill: rgba(209, 209, 240, 0.8); +} +body.ui-indigo .nav-sidebar li.active { + box-shadow: inset 4px 0 0 #4b4ba3; +} +body.ui-indigo .nav-sidebar li.active > a { + color: #393982; +} +body.ui-indigo .nav-sidebar li.active .nav-icon-container svg { + fill: #393982; +} +body.ui-indigo .sidebar-top-level-items > li.active .badge.badge-pill { + color: #393982; +} +body.ui-indigo .nav-links li.active a, +body.ui-indigo .nav-links li a.active { + border-bottom: 2px solid #6666c4; +} +body.ui-indigo .nav-links li.active a .badge.badge-pill, +body.ui-indigo .nav-links li a.active .badge.badge-pill { + font-weight: 600; +} +.navbar-gitlab { + padding: 0 16px; + z-index: 1000; + margin-bottom: 0; + min-height: 40px; + border: 0; + border-bottom: 1px solid #dbdbdb; + position: fixed; + top: 0; + left: 0; + right: 0; + border-radius: 0; +} +.navbar-gitlab .logo-text { + line-height: initial; +} +.navbar-gitlab .logo-text svg { + width: 55px; + height: 14px; + margin: 0; + fill: #fff; +} +.navbar-gitlab .close-icon { + display: none; +} +.navbar-gitlab .header-content { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + min-height: 40px; + padding-left: 0; +} +.navbar-gitlab .header-content .title-container { + display: flex; + align-items: stretch; + flex: 1 1 auto; + padding-top: 0; + overflow: visible; +} +.navbar-gitlab .header-content .title { + padding-right: 0; + color: currentColor; + display: flex; + position: relative; + margin: 0; + font-size: 18px; + vertical-align: top; + white-space: nowrap; +} +.navbar-gitlab .header-content .title img { + height: 28px; +} +.navbar-gitlab .header-content .title img + .logo-text { + margin-left: 8px; +} +.navbar-gitlab .header-content .title.wrap { + white-space: normal; +} +.navbar-gitlab .header-content .title a { + display: flex; + align-items: center; + padding: 2px 8px; + margin: 5px 2px 5px -8px; + border-radius: 4px; +} +.navbar-gitlab .header-content .dropdown.open > a { + border-bottom-color: #fff; +} +.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { + margin: 0 2px; +} +.navbar-gitlab .navbar-collapse { + flex: 0 0 auto; + border-top: 0; + padding: 0; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .navbar-collapse { + flex: 1 1 auto; + } +} +.navbar-gitlab .navbar-collapse .nav { + flex-wrap: nowrap; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { + margin-left: 0; + } +} +.navbar-gitlab .container-fluid { + padding: 0; +} +.navbar-gitlab .container-fluid .user-counter svg { + margin-right: 3px; +} +.navbar-gitlab .container-fluid .navbar-toggler { + position: relative; + right: -10px; + border-radius: 0; + min-width: 45px; + padding: 0; + margin: 8px -7px 8px 0; + font-size: 14px; + text-align: center; + color: currentColor; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .navbar-nav { + display: flex; + padding-right: 10px; + flex-direction: row; + } +} +.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill { + box-shadow: none; + font-weight: 600; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .nav > li.header-user { + padding-left: 10px; + } +} +.navbar-gitlab .container-fluid .nav > li > a { + will-change: color; + margin: 4px 0; + padding: 6px 8px; + height: 32px; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid .nav > li > a { + padding: 0; + } +} +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { + margin-left: 2px; +} +.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle .header-user-avatar { + margin-right: 0; +} +.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { + margin-right: 0; +} +.navbar-sub-nav > li > a, +.navbar-sub-nav > li > button, +.navbar-nav > li > a, +.navbar-nav > li > button { + display: flex; + align-items: center; + justify-content: center; + padding: 6px 8px; + margin: 4px 2px; + font-size: 12px; + color: currentColor; + border-radius: 4px; + height: 32px; + font-weight: 600; +} +.navbar-sub-nav > li > button, +.navbar-nav > li > button { + background: transparent; + border: 0; +} +.navbar-sub-nav .dropdown-menu, +.navbar-nav .dropdown-menu { + position: absolute; +} +.navbar-sub-nav { + display: flex; + margin: 0 0 0 6px; +} +.caret-down, +.btn .caret-down { + top: 0; + height: 11px; + width: 11px; + margin-left: 4px; + fill: currentColor; +} +.header-user .dropdown-menu, +.header-new .dropdown-menu { + margin-top: 4px; +} +.btn-sign-in { + background-color: #ebebfa; + color: #292961; + font-weight: 600; + line-height: 18px; + margin: 4px 0 4px 2px; +} +.title-container .badge.badge-pill, +.navbar-nav .badge.badge-pill { + position: inherit; + font-weight: 400; + margin-left: -6px; + font-size: 11px; + color: #fff; + padding: 0 5px; + line-height: 12px; + border-radius: 7px; + box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); +} +.title-container .badge.badge-pill.green-badge, +.navbar-nav .badge.badge-pill.green-badge { + background-color: #108548; +} +.title-container .badge.badge-pill.merge-requests-count, +.navbar-nav .badge.badge-pill.merge-requests-count { + background-color: #de7e00; +} +.title-container .badge.badge-pill.todos-count, +.navbar-nav .badge.badge-pill.todos-count { + background-color: #1f75cb; +} +.title-container .canary-badge .badge, +.navbar-nav .canary-badge .badge { + font-size: 12px; + line-height: 16px; + padding: 0 0.5rem; +} + +@media (max-width: 575.98px) { + .navbar-gitlab .container-fluid { + font-size: 18px; + } + .navbar-gitlab .container-fluid .navbar-nav { + table-layout: fixed; + width: 100%; + margin: 0; + text-align: right; + } + .navbar-gitlab .container-fluid .navbar-collapse { + margin-left: -8px; + margin-right: -10px; + } + .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) { + flex: 1; + } + .header-user-dropdown-toggle { + text-align: center; + } + .header-user-avatar { + float: none; + } +} +.header-user.show .dropdown-menu { + margin-top: 4px; + color: #303030; + left: auto; + max-height: 445px; +} +.header-user.show .dropdown-menu svg { + vertical-align: text-top; +} +.header-user-avatar { + float: left; + margin-right: 5px; + border-radius: 50%; + border: 1px solid #f5f5f5; +} +.navbar-empty { + justify-content: center; + height: 40px; + background: #fff; + border-bottom: 1px solid #f0f0f0; +} + +@media (max-width: 575.98px) { + .nav-links > li > a .badge.badge-pill { + display: none; + } +} + +@media (max-width: 575.98px) { + .nav-links > li > a { + margin-right: 3px; + } +} +.media { + display: flex; + align-items: flex-start; +} +.card { + margin-bottom: 16px; +} +.nav-links:not(.quick-links) { + display: flex; + padding: 0; + margin: 0; + list-style: none; + height: auto; + border-bottom: 1px solid #dbdbdb; +} +.content-wrapper { + width: 100%; +} +.content-wrapper .container-fluid { + padding: 0 16px; +} + +@media (min-width: 768px) { + .page-with-contextual-sidebar { + padding-left: 50px; + } +} + +@media (min-width: 1200px) { + .page-with-contextual-sidebar { + padding-left: 220px; + } +} +.context-header { + position: relative; + margin-right: 2px; + width: 220px; +} +.context-header > a, +.context-header > button { + font-weight: 600; + display: flex; + width: 100%; + align-items: center; + padding: 10px 16px 10px 10px; + color: #303030; + background-color: transparent; + border: 0; + text-align: left; +} +.context-header .avatar-container { + flex: 0 0 40px; + background-color: #fff; +} +.context-header .sidebar-context-title { + overflow: hidden; + text-overflow: ellipsis; +} +.context-header .sidebar-context-title.text-secondary { + font-weight: normal; + font-size: 0.8em; +} +.nav-sidebar { + position: fixed; + z-index: 600; + width: 220px; + top: 40px; + bottom: 0; + left: 0; + background-color: #fafafa; + box-shadow: inset -1px 0 0 #dbdbdb; + transform: translate3d(0, 0, 0); +} + +@media (min-width: 576px) and (max-width: 576px) { + .nav-sidebar:not(.sidebar-collapsed-desktop) { + box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); + } +} +.nav-sidebar.sidebar-collapsed-desktop { + width: 50px; +} +.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { + overflow-x: hidden; +} +.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), +.nav-sidebar.sidebar-collapsed-desktop .sidebar-context-title, +.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a { + min-height: 45px; +} +.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item { + display: block; +} +.nav-sidebar.sidebar-collapsed-desktop .avatar-container { + margin: 0 auto; +} +.nav-sidebar.sidebar-expanded-mobile { + left: 0; +} +.nav-sidebar a { + text-decoration: none; +} +.nav-sidebar ul { + padding-left: 0; + list-style: none; +} +.nav-sidebar li { + white-space: nowrap; +} +.nav-sidebar li a { + display: flex; + align-items: center; + padding: 12px 16px; + color: #666; +} +.nav-sidebar li .nav-item-name { + flex: 1; +} +.nav-sidebar li.active > a { + font-weight: 600; +} + +@media (max-width: 767.98px) { + .nav-sidebar { + left: -220px; + } +} +.nav-sidebar .nav-icon-container { + display: flex; + margin-right: 8px; +} +.nav-sidebar .fly-out-top-item { + display: none; +} +.nav-sidebar svg { + height: 16px; + width: 16px; +} + +@media (min-width: 768px) and (max-width: 1199px) { + .nav-sidebar:not(.sidebar-expanded-mobile) { + width: 50px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title, + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { + min-height: 45px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item { + display: block; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { + margin: 0 auto; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { + height: 60px; + width: 50px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { + padding: 10px 4px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + display: none; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { + margin-right: 0; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { + padding: 16px; + width: 49px; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text, + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { + display: none; + } + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right { + display: block; + margin: 0; + } +} +.nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; } -.container { - padding-top: 0; - z-index: 5; +.sidebar-sub-level-items { + display: none; + padding-bottom: 8px; } -.container .content { - margin: 0; +.sidebar-sub-level-items > li a { + padding: 8px 16px 8px 40px; } -@media (max-width: 575.98px) { - .container .content { - margin-top: 20px; - } +.sidebar-top-level-items { + margin-bottom: 60px; } -@media (max-width: 575.98px) { - .container .container .title { - padding-left: 15px !important; + +@media (min-width: 576px) { + .sidebar-top-level-items > li > a { + margin-right: 1px; } } -.navless-container { - margin-top: 40px; - padding-top: 32px; -} -.btn { - border-radius: 4px; - font-size: 0.875rem; - font-weight: 400; - padding: 6px 10px; - background-color: #fff; - border-color: #dbdbdb; - color: #303030; - color: #303030; - white-space: nowrap; +.sidebar-top-level-items > li .badge.badge-pill { + background-color: rgba(0, 0, 0, 0.08); + color: #666; } -.btn:active { - background-color: #f0f0f0; - box-shadow: none; +.sidebar-top-level-items > li.active { + background: rgba(0, 0, 0, 0.04); } -.btn:active { - background-color: #eaeaea; - border-color: #e3e3e3; - color: #303030; +.sidebar-top-level-items > li.active > a { + margin-left: 4px; + padding-left: 12px; } -.btn svg { - height: 15px; - width: 15px; +.sidebar-top-level-items > li.active .badge.badge-pill { + font-weight: 600; } -.btn svg:not(:last-child) { - margin-right: 5px; +.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; } -.light { - color: #303030; +.toggle-sidebar-button, +.close-nav-button { + width: 219px; + position: fixed; + height: 48px; + bottom: 0; + padding: 0 16px; + background-color: #fafafa; + border: 0; + border-top: 1px solid #dbdbdb; + color: #666; + display: flex; + align-items: center; } -hr { - margin: 1.5rem 0; - border-top: 1px solid #eee; +.toggle-sidebar-button svg, +.close-nav-button svg { + margin-right: 8px; } -.footer-links { - margin-bottom: 20px; +.toggle-sidebar-button .icon-chevron-double-lg-right, +.close-nav-button .icon-chevron-double-lg-right { + display: none; } -.footer-links a { - margin-right: 15px; +.collapse-text { + white-space: nowrap; + overflow: hidden; } -.flash-container { - margin: 0; - margin-bottom: 16px; - font-size: 14px; - position: relative; - z-index: 1; +.sidebar-collapsed-desktop .context-header { + height: 60px; + width: 50px; } -.flash-container.sticky { - position: -webkit-sticky; - position: sticky; - top: 48px; - z-index: 251; +.sidebar-collapsed-desktop .context-header a { + padding: 10px 4px; } -.flash-container.flash-container-page { - margin-bottom: 0; +.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { + display: none; } -.flash-container:empty { - margin: 0; +.sidebar-collapsed-desktop .nav-icon-container { + margin-right: 0; } -input { - border-radius: 0.25rem; - color: #303030; - background-color: #fff; +.sidebar-collapsed-desktop .toggle-sidebar-button { + padding: 16px; + width: 49px; } -label { - font-weight: 600; +.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { + display: none; } -label.label-bold { - font-weight: 600; +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-right { + display: block; + margin: 0; } -.form-control { - border-radius: 4px; - padding: 6px 10px; +.fly-out-top-item > a { + display: flex; } -.form-control::-ms-input-placeholder { - color: #868686; +.fly-out-top-item .fly-out-badge { + margin-left: 8px; } -.form-control::placeholder { - color: #868686; +.fly-out-top-item-name { + flex: 1; } -.gl-show-field-errors .form-control:not(textarea) { - height: 34px; +.close-nav-button { + display: none; } -.gl-show-field-errors .gl-field-hint { - color: #303030; + +@media (max-width: 767.98px) { + .close-nav-button { + display: flex; + } + .toggle-sidebar-button { + display: none; + } } -.navbar-empty { - justify-content: center; - height: 40px; - background: #fff; - border-bottom: 1px solid #f0f0f0; +table.table { + margin-bottom: 16px; } -.navbar-empty .tanuki-logo, -.navbar-empty .brand-header-logo { - max-height: 100%; +table.table .dropdown-menu a { + text-decoration: none; } -.tanuki-logo .tanuki-left-ear, -.tanuki-logo .tanuki-right-ear, -.tanuki-logo .tanuki-nose { - fill: #e24329; +table.table .success, +table.table .info { + color: #fff; } -.tanuki-logo .tanuki-left-eye, -.tanuki-logo .tanuki-right-eye { - fill: #fc6d26; +table.table .success a:not(.btn), +table.table .info a:not(.btn) { + text-decoration: underline; + color: #fff; } -.tanuki-logo .tanuki-left-cheek, -.tanuki-logo .tanuki-right-cheek { - fill: #fca326; +pre { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + display: block; + padding: 8px 12px; + margin: 0 0 8px; + font-size: 13px; + word-break: break-all; + word-wrap: break-word; + color: #303030; + background-color: #fafafa; + border: 1px solid #dbdbdb; + border-radius: 2px; } -.card { - margin-bottom: 16px; +.monospace { + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; } -input::-moz-placeholder { +input::-moz-placeholder, +textarea::-moz-placeholder { color: #868686; opacity: 1; } -input::-ms-input-placeholder { +input::-ms-input-placeholder, +textarea::-ms-input-placeholder { color: #868686; } -input:-ms-input-placeholder { +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { color: #868686; } svg { fill: currentColor; } + +svg.s12 { + width: 12px; + height: 12px; +} + +svg.s16 { + width: 16px; + height: 16px; +} + +svg.s18 { + width: 18px; + height: 18px; +} + +svg.s12 { + vertical-align: -1px; +} + +svg.s16 { + vertical-align: -3px; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +table.code { + width: 100%; + font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; + border: 0; + border-collapse: separate; + margin: 0; + padding: 0; + table-layout: fixed; + border-radius: 0 0 4px 4px; +} +.frame .badge.badge-pill { + position: absolute; + background-color: #428fdc; + color: #fff; + border: #fff 1px solid; + min-height: 16px; + padding: 5px 8px; + border-radius: 12px; +} +.frame .badge.badge-pill { + transform: translate(-50%, -50%); +} +.color-label { + padding: 0 0.5rem; + line-height: 16px; + border-radius: 100px; + color: #fff; +} +.label-link { + display: inline-flex; + vertical-align: text-bottom; +} +.label-link .label { + vertical-align: inherit; + font-size: 12px; +} .login-page .container { max-width: 960px; } @@ -679,25 +2096,6 @@ svg { border-radius: 0.25rem; padding: 15px; } -.login-page .login-box .login-heading h3, -.login-page .omniauth-container .login-heading h3 { - font-weight: 400; - line-height: 1.5; - margin: 0 0 10px; -} -.login-page .login-box .login-footer, -.login-page .omniauth-container .login-footer { - margin-top: 10px; -} -.login-page .login-box .login-footer p:last-child, -.login-page .omniauth-container .login-footer p:last-child { - margin-bottom: 0; -} -.login-page .login-box a.forgot, -.login-page .omniauth-container a.forgot { - float: right; - padding-top: 6px; -} .login-page .login-box .nav .active a, .login-page .omniauth-container .nav .active a { background: transparent; @@ -734,6 +2132,7 @@ svg { background: none; margin-bottom: 16px; } + @media (max-width: 991.98px) { .login-page .omniauth-container form { width: 100%; @@ -741,6 +2140,7 @@ svg { } .login-page .omniauth-container .omniauth-btn { width: 100%; + padding: 8px; } .login-page .new-session-tabs { display: flex; @@ -748,19 +2148,6 @@ svg { border-top-right-radius: 4px; border-top-left-radius: 4px; } -.login-page .new-session-tabs.custom-provider-tabs { - flex-wrap: wrap; -} -.login-page .new-session-tabs.custom-provider-tabs li { - min-width: 85px; - flex-basis: auto; -} -.login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) { - border-top: 1px solid #dbdbdb; -} -.login-page .new-session-tabs.custom-provider-tabs a { - font-size: 16px; -} .login-page .new-session-tabs li { flex: 1; text-align: center; @@ -783,29 +2170,17 @@ svg { .login-page .new-session-tabs li.active > a { cursor: default; } -.login-page .form-control:active, -.login-page .form-control:focus { - background-color: #fff; -} .login-page .submit-container { margin-top: 16px; } -.login-page input[type="submit"] { +.login-page input[type='submit'] { margin-bottom: 0; - display: block; - width: 100%; } .login-page .devise-errors h2 { margin-top: 0; font-size: 14px; color: #ae1800; } -@media (max-width: 575.98px) { - .login-page .col-md-5.float-right { - float: none !important; - margin-bottom: 45px; - } -} .devise-layout-html { margin: 0; padding: 0; @@ -838,57 +2213,191 @@ svg { .devise-layout-html body .navless-container { padding: 65px 15px; } + @media (max-width: 575.98px) { .devise-layout-html body .navless-container { padding: 0 15px 65px; } } +.milestones { + padding: 8px; + margin-top: 8px; + border-radius: 4px; + background-color: #dbdbdb; +} +.search { + margin: 0 8px; +} +.search form { + margin: 0; + padding: 4px; + width: 200px; + line-height: 24px; + height: 32px; + border: 0; + border-radius: 4px; +} -.gl-border-solid { - border-style: solid; +@media (min-width: 1200px) { + .search form { + width: 320px; + } } -.gl-border-gray-100 { - border-color: #dbdbdb; +.search .search-input { + border: 0; + font-size: 14px; + padding: 0 20px 0 0; + margin-left: 5px; + line-height: 25px; + width: 98%; + color: #fff; + background: none; } -.gl-border-1 { - border-width: 1px; +.search .search-input-container { + display: flex; + position: relative; } -.gl-rounded-base { - border-radius: 0.25rem; +.search .search-input-wrap { + width: 100%; } -.gl-text-green-600 { - color: #217645; +.search .search-input-wrap .search-icon, +.search .search-input-wrap .clear-icon { + position: absolute; + right: 5px; + top: 4px; } -.gl-text-red-500 { - color: #dd2b0e; +.search .search-input-wrap .search-icon { + -moz-user-select: none; + user-select: none; +} +.search .search-input-wrap .clear-icon { + display: none; +} +.search .search-input-wrap .dropdown { + position: static; +} +.search .search-input-wrap .dropdown-menu { + left: -5px; + max-height: 400px; + overflow: auto; +} + +@media (min-width: 1200px) { + .search .search-input-wrap .dropdown-menu { + width: 320px; + } +} +.search .search-input-wrap .dropdown-content { + max-height: 382px; +} +.settings { + border-top: 1px solid #dbdbdb; +} +.settings:first-of-type { + margin-top: 10px; + border: 0; +} +.settings + div .settings:first-of-type { + margin-top: 0; + border-top: 1px solid #dbdbdb; +} +.avatar, .avatar-container { + float: left; + margin-right: 16px; + border-radius: 50%; + border: 1px solid #f5f5f5; +} +.s16.avatar, .s16.avatar-container { + width: 16px; + height: 16px; + margin-right: 8px; +} +.s18.avatar, .s18.avatar-container { + width: 18px; + height: 18px; + margin-right: 8px; +} +.s40.avatar, .s40.avatar-container { + width: 40px; + height: 40px; + margin-right: 8px; +} +.avatar { + transition-property: none; + width: 40px; + height: 40px; + padding: 0; + background: #fdfdfd; + overflow: hidden; + border-color: rgba(0, 0, 0, 0.1); } -.gl-display-flex { +.avatar.center { + font-size: 14px; + line-height: 1.8em; + text-align: center; +} +.avatar.avatar-tile { + border-radius: 0; + border: 0; +} +.avatar-container { + overflow: hidden; display: flex; } -.gl-align-items-center { - align-items: center; +.avatar-container a { + width: 100%; + height: 100%; + display: flex; + text-decoration: none; } -.gl-p-2 { - padding: 0.25rem; +.avatar-container .avatar { + border-radius: 0; + border: 0; + height: auto; + width: 100%; + margin: 0; + align-self: center; } -.gl-p-4 { - padding: 0.75rem; +.avatar-container.s40 { + min-width: 40px; + min-height: 40px; } -.gl-mt-2 { - margin-top: 0.25rem; +.rect-avatar { + border-radius: 2px; } -.gl-mb-2 { - margin-bottom: 0.25rem; +.rect-avatar.s16 { + border-radius: 2px; } -.gl-mb-3 { - margin-bottom: 0.5rem; +.rect-avatar.s18 { + border-radius: 2px; } -.gl-mb-5 { - margin-bottom: 1rem; +.rect-avatar.s40 { + border-radius: 4px; } -.gl-text-left { - text-align: left; +.tab-width-8 { + -moz-tab-size: 8; + tab-size: 8; } - -@import "startup/cloaking"; +.gl-sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} +.gl-mt-5 { + margin-top: 1rem; +} +.gl-ml-3 { + margin-left: 0.5rem; +} +.content-wrapper > .alert-wrapper, +#content-body, .modal-dialog { + display: block; +} +@import 'cloaking'; @include cloak-startup-scss(none); diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml index 14d0d73e2b7f1..b28cd47efcce0 100644 --- a/app/views/layouts/_head.html.haml +++ b/app/views/layouts/_head.html.haml @@ -36,7 +36,7 @@ = favicon_link_tag favicon, id: 'favicon', data: { original_href: favicon }, type: 'image/png' - = render 'layouts/startup_css', { startup_filename: local_assigns.fetch(:startup_filename, nil) } + = render 'layouts/startup_css' - if user_application_theme == 'gl-dark' = stylesheet_link_tag_defer "application_dark" = yield :page_specific_styles diff --git a/app/views/layouts/_startup_css.haml b/app/views/layouts/_startup_css.haml index 67c871b95f579..7d3cfe280074b 100644 --- a/app/views/layouts/_startup_css.haml +++ b/app/views/layouts/_startup_css.haml @@ -1,5 +1,4 @@ -- startup_filename_default = user_application_theme == 'gl-dark' ? 'dark' : 'general' -- startup_filename = local_assigns.fetch(:startup_filename, nil) || startup_filename_default +- startup_filename = current_path?("sessions#new") ? 'signin' : user_application_theme == 'gl-dark' ? 'dark' : 'general' %style = Rails.application.assets_manifest.find_sources("themes/#{user_application_theme_css_filename}.css").first.to_s.html_safe if user_application_theme_css_filename diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml index ae7c160c060b1..ef61a04c288da 100644 --- a/app/views/layouts/devise.html.haml +++ b/app/views/layouts/devise.html.haml @@ -1,6 +1,6 @@ !!! 5 %html.devise-layout-html{ class: system_message_class } - = render "layouts/head", { startup_filename: 'signin' } + = render "layouts/head" %body.ui-indigo.login-page.application.navless{ class: "#{client_class_list}", data: { page: body_data_page, qa_selector: 'login_page' } } = header_message = render "layouts/init_client_detection_flags" diff --git a/ee/app/assets/stylesheets/startup/startup-dark.scss b/ee/app/assets/stylesheets/startup/startup-dark.scss deleted file mode 100644 index 652842790196b..0000000000000 --- a/ee/app/assets/stylesheets/startup/startup-dark.scss +++ /dev/null @@ -1,2118 +0,0 @@ -// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" -// Please see the feedback issue for more details and help: -// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 -@charset "UTF-8"; -body.gl-dark { - --gray-50: #303030; - --gray-100: #404040; - --gray-200: #525252; - --gray-950: #fff; - --green-100: #0d532a; - --green-400: #108548; - --green-700: #91d4a8; - --blue-400: #1f75cb; - --orange-400: #ab6100; - --gl-text-color: #fafafa; - --border-color: #4f4f4f; -} -:root { - --white: #333; -} -*, -*::before, -*::after { - box-sizing: border-box; -} -html { - font-family: sans-serif; - line-height: 1.15; -} -aside, -header, -nav { - display: block; -} -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #fafafa; - text-align: left; - background-color: #1f1f1f; -} -h1 { - margin-top: 0; - margin-bottom: 0.25rem; -} -ul { - margin-top: 0; - margin-bottom: 1rem; -} -ul ul { - margin-bottom: 0; -} -strong { - font-weight: bolder; -} -a { - color: #007bff; - text-decoration: none; - background-color: transparent; -} -a:not([href]):not([class]) { - color: inherit; - text-decoration: none; -} -img { - vertical-align: middle; - border-style: none; -} -svg { - overflow: hidden; - vertical-align: middle; -} -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; -} -[type="search"] { - outline-offset: -2px; -} -summary { - display: list-item; - cursor: pointer; -} -[hidden] { - display: none !important; -} -h1, -.h1 { - margin-bottom: 0.25rem; - font-weight: 600; - line-height: 1.2; - color: #fafafa; -} -h1, -.h1 { - font-size: 2.1875rem; -} -.list-unstyled { - padding-left: 0; - list-style: none; -} -.container-fluid { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} -.form-control { - display: block; - width: 100%; - height: 34px; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #fafafa; - background-color: #333; - background-clip: padding-box; - border: 1px solid #404040; - border-radius: 0.25rem; -} -@media (prefers-reduced-motion: reduce) { -} -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #fafafa; -} -.form-control::-ms-input-placeholder { - color: #bfbfbf; - opacity: 1; -} -.form-control::placeholder { - color: #bfbfbf; - opacity: 1; -} -.form-control:disabled { - background-color: #303030; - opacity: 1; -} -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -@media (min-width: 576px) { - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } -} -.btn { - display: inline-block; - font-weight: 400; - color: #fafafa; - text-align: center; - vertical-align: middle; - -moz-user-select: none; - user-select: none; - background-color: transparent; - border: 1px solid transparent; - padding: 0.375rem 0.75rem; - font-size: 1rem; - line-height: 20px; - border-radius: 0.25rem; -} -@media (prefers-reduced-motion: reduce) { -} -.btn:disabled { - opacity: 0.65; -} -.btn:not(:disabled):not(.disabled) { - cursor: pointer; -} -.collapse:not(.show) { - display: none; -} -.dropdown { - position: relative; -} -.dropdown-menu-toggle { - white-space: nowrap; -} -.dropdown-menu-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid; - border-right: 0.3em solid transparent; - border-bottom: 0; - border-left: 0.3em solid transparent; -} -.dropdown-menu-toggle:empty::after { - margin-left: 0; -} -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 10rem; - padding: 0.5rem 0; - margin: 0.125rem 0 0; - font-size: 1rem; - color: #fafafa; - text-align: left; - list-style: none; - background-color: #333; - background-clip: padding-box; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 0.25rem; -} -.dropdown-menu.show { - display: block; -} -.nav { - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 0; - list-style: none; -} -.navbar { - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - padding: 0.25rem 0.5rem; -} -.navbar .container-fluid { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; -} -.navbar-nav { - display: flex; - flex-direction: column; - padding-left: 0; - margin-bottom: 0; - list-style: none; -} -.navbar-nav .dropdown-menu { - position: static; - float: none; -} -.navbar-collapse { - flex-basis: 100%; - flex-grow: 1; - align-items: center; -} -.navbar-toggler { - padding: 0.25rem 0.75rem; - font-size: 1.25rem; - line-height: 1; - background-color: transparent; - border: 1px solid transparent; - border-radius: 0.25rem; -} -@media (max-width: 575.98px) { - .navbar-expand-sm > .container-fluid { - padding-right: 0; - padding-left: 0; - } -} -@media (min-width: 576px) { - .navbar-expand-sm { - flex-flow: row nowrap; - justify-content: flex-start; - } - .navbar-expand-sm .navbar-nav { - flex-direction: row; - } - .navbar-expand-sm .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-sm > .container-fluid { - flex-wrap: nowrap; - } - .navbar-expand-sm .navbar-collapse { - display: flex !important; - flex-basis: auto; - } - .navbar-expand-sm .navbar-toggler { - display: none; - } -} -.card { - position: relative; - display: flex; - flex-direction: column; - min-width: 0; - word-wrap: break-word; - background-color: #333; - background-clip: border-box; - border: 1px solid #404040; - border-radius: 0.25rem; -} -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 75%; - font-weight: 600; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 0.25rem; -} -@media (prefers-reduced-motion: reduce) { -} -.badge:empty { - display: none; -} -.btn .badge { - position: relative; - top: -1px; -} -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; -} -.close { - float: right; - font-size: 1.5rem; - font-weight: 600; - line-height: 1; - color: #fff; - text-shadow: 0 1px 0 #333; - opacity: 0.5; -} -button.close { - padding: 0; - background-color: transparent; - border: 0; -} -.rounded-circle { - border-radius: 50% !important; -} -.d-none { - display: none !important; -} -.d-inline-block { - display: inline-block !important; -} -.d-block { - display: block !important; -} -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } -} -@media (min-width: 768px) { - .d-md-block { - display: block !important; - } -} -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-block { - display: block !important; - } -} -@media (min-width: 1200px) { - .d-xl-block { - display: block !important; - } -} -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} -.m-auto { - margin: auto !important; -} -.gl-button { - display: inline-flex; -} -.gl-button:not(.btn-link):active { - text-decoration: none; -} -.gl-button.gl-button { - border-width: 0; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - background-color: transparent; - line-height: 1rem; - color: #fafafa; - fill: currentColor; - box-shadow: inset 0 0 0 1px #525252; - justify-content: center; - align-items: center; - font-size: 0.875rem; - border-radius: 0.25rem; -} -.gl-button.gl-button.btn-default { - background-color: #333; -} -.gl-button.gl-button.btn-default:active, -.gl-button.gl-button.btn-default.active { - box-shadow: inset 0 0 0 2px #bfbfbf, 0 0 0 1px rgba(51, 51, 51, 0.4), - 0 0 0 4px rgba(66, 143, 220, 0.48); - outline: none; - background-color: #404040; -} -body, -.form-control, -.search form { - font-size: 0.875rem; -} -button, -html [type="button"], -[type="submit"], -[role="button"] { - cursor: pointer; -} -h1, -.h1 { - margin-top: 20px; - margin-bottom: 10px; -} -strong { - font-weight: bold; -} -a { - color: #63a6e9; -} -.hidden { - display: none !important; - visibility: hidden !important; -} -.hide { - display: none; -} -.dropdown-menu-toggle::after { - display: none; -} -.badge:not(.gl-badge) { - padding: 4px 5px; - font-size: 12px; - font-style: normal; - font-weight: 400; - display: inline-block; -} -.divider { - height: 0; - margin: 4px 0; - overflow: hidden; - border-top: 1px solid #404040; -} -.toggle-sidebar-button .collapse-text, -.toggle-sidebar-button .icon-chevron-double-lg-left, -.toggle-sidebar-button .icon-chevron-double-lg-right { - color: #999; -} -svg { - vertical-align: baseline; -} -html { - overflow-y: scroll; -} -body { - text-decoration-skip: ink; -} -.btn { - border-radius: 4px; - font-size: 0.875rem; - font-weight: 400; - padding: 6px 10px; - background-color: #333; - border-color: #404040; - color: #fafafa; - color: #fafafa; - white-space: nowrap; -} -.btn:active { - background-color: #303030; - box-shadow: none; -} -.btn:active, -.btn.active { - background-color: #444; - border-color: #fafafa; - color: #fafafa; -} -.btn svg { - height: 15px; - width: 15px; -} -.btn svg:not(:last-child) { - margin-right: 5px; -} -.badge.badge-pill:not(.gl-badge) { - font-weight: 400; - background-color: rgba(255, 255, 255, 0.07); - color: #dbdbdb; - vertical-align: baseline; -} -.chart { - overflow: hidden; - height: 220px; -} -.dropdown { - position: relative; -} -.show.dropdown .dropdown-menu { - transform: translateY(0); - display: block; - min-height: 40px; - max-height: 312px; - overflow-y: auto; -} -@media (max-width: 575.98px) { - .show.dropdown .dropdown-menu { - width: 100%; - } -} -.show.dropdown .dropdown-menu-toggle, -.show.dropdown .dropdown-menu-toggle { - border-color: #c4c4c4; -} -.show.dropdown [data-toggle="dropdown"] { - outline: 0; -} -.search-input-container .dropdown-menu { - margin-top: 11px; -} -.dropdown-menu-toggle { - padding: 6px 8px 6px 10px; - background-color: #333; - color: #fafafa; - font-size: 14px; - text-align: left; - border: 1px solid #404040; - border-radius: 0.25rem; - white-space: nowrap; -} -.no-outline.dropdown-menu-toggle { - outline: 0; -} -.dropdown-menu-toggle.dropdown-menu-toggle { - justify-content: flex-start; - overflow: hidden; - padding-right: 25px; - position: relative; - text-overflow: ellipsis; - width: 160px; -} -.dropdown-menu { - display: none; - position: absolute; - width: auto; - top: 100%; - z-index: 300; - min-width: 240px; - max-width: 500px; - margin-top: 4px; - margin-bottom: 24px; - font-size: 14px; - font-weight: 400; - padding: 8px 0; - background-color: #333; - border: 1px solid #404040; - border-radius: 0.25rem; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} -.dropdown-menu ul { - margin: 0; - padding: 0; -} -.dropdown-menu li { - display: block; - text-align: left; - list-style: none; - padding: 0 1px; -} -.dropdown-menu li > a, -.dropdown-menu li button { - background: transparent; - border: 0; - border-radius: 0; - box-shadow: none; - display: block; - font-weight: 400; - position: relative; - padding: 8px 12px; - color: #fafafa; - line-height: 16px; - white-space: normal; - overflow: hidden; - text-align: left; - width: 100%; -} -.dropdown-menu li > a:active, -.dropdown-menu li button:active { - background-color: #4f4f4f; - color: #fafafa; - outline: 0; - text-decoration: none; -} -.dropdown-menu .divider { - height: 1px; - margin: 0.25rem 0; - padding: 0; - background-color: #404040; -} -.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { - margin-right: 40px; -} -@media (max-width: 575.98px) { - .navbar-gitlab li.dropdown { - position: static; - } - .navbar-gitlab li.dropdown.user-counter { - margin-left: 8px !important; - } - .navbar-gitlab li.dropdown.user-counter > a { - padding: 0 4px !important; - } - header.navbar-gitlab .dropdown .dropdown-menu { - width: 100%; - min-width: 100%; - } -} -@media (max-width: 767.98px) { - .dropdown-menu-toggle { - width: 100%; - } -} -input { - border-radius: 0.25rem; - color: #fafafa; - background-color: #333; -} -.form-control { - border-radius: 4px; - padding: 6px 10px; -} -.form-control::-ms-input-placeholder { - color: #868686; -} -.form-control::placeholder { - color: #868686; -} -.navbar-gitlab { - padding: 0 16px; - z-index: 1000; - margin-bottom: 0; - min-height: 40px; - border: 0; - position: fixed; - top: 0; - left: 0; - right: 0; - border-radius: 0; -} -.navbar-gitlab .logo-text { - line-height: initial; -} -.navbar-gitlab .logo-text svg { - width: 55px; - height: 14px; - margin: 0; - fill: #333; -} -.navbar-gitlab .close-icon { - display: none; -} -.navbar-gitlab .header-content { - width: 100%; - display: flex; - justify-content: space-between; - position: relative; - min-height: 40px; - padding-left: 0; -} -.navbar-gitlab .header-content .title-container { - display: flex; - align-items: stretch; - flex: 1 1 auto; - padding-top: 0; - overflow: visible; -} -.navbar-gitlab .header-content .title { - padding-right: 0; - color: currentColor; - display: flex; - position: relative; - margin: 0; - font-size: 18px; - vertical-align: top; - white-space: nowrap; -} -.navbar-gitlab .header-content .title img { - height: 28px; -} -.navbar-gitlab .header-content .title img + .logo-text { - margin-left: 8px; -} -.navbar-gitlab .header-content .title a { - display: flex; - align-items: center; - padding: 2px 8px; - margin: 5px 2px 5px -8px; - border-radius: 4px; -} -.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { - margin: 0 2px; -} -.navbar-gitlab .navbar-collapse { - flex: 0 0 auto; - border-top: 0; - padding: 0; -} -@media (max-width: 575.98px) { - .navbar-gitlab .navbar-collapse { - flex: 1 1 auto; - } -} -.navbar-gitlab .navbar-collapse .nav { - flex-wrap: nowrap; -} -@media (max-width: 575.98px) { - .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { - margin-left: 0; - } -} -.navbar-gitlab .container-fluid { - padding: 0; -} -.navbar-gitlab .container-fluid .user-counter svg { - margin-right: 3px; -} -.navbar-gitlab .container-fluid .navbar-toggler { - position: relative; - right: -10px; - border-radius: 0; - min-width: 45px; - padding: 0; - margin: 8px -7px 8px 0; - font-size: 14px; - text-align: center; - color: currentColor; -} -.navbar-gitlab .container-fluid .navbar-toggler.active { - color: currentColor; - background-color: transparent; -} -@media (max-width: 575.98px) { - .navbar-gitlab .container-fluid .navbar-nav { - display: flex; - padding-right: 10px; - flex-direction: row; - } -} -.navbar-gitlab - .container-fluid - .navbar-nav - li - .badge.badge-pill:not(.merge-request-badge) { - box-shadow: none; - font-weight: 600; -} -@media (max-width: 575.98px) { - .navbar-gitlab .container-fluid .nav > li.header-user { - padding-left: 10px; - } -} -.navbar-gitlab .container-fluid .nav > li > a { - will-change: color; - margin: 4px 0; - padding: 6px 8px; - height: 32px; -} -@media (max-width: 575.98px) { - .navbar-gitlab .container-fluid .nav > li > a { - padding: 0; - } -} -.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { - margin-left: 2px; -} -.navbar-gitlab - .container-fluid - .nav - > li - > a.header-user-dropdown-toggle - .header-user-avatar { - margin-right: 0; -} -.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { - margin-right: 0; -} -.navbar-sub-nav > li > a, -.navbar-sub-nav > li > button, -.navbar-nav > li > a, -.navbar-nav > li > button { - display: flex; - align-items: center; - justify-content: center; - padding: 6px 8px; - margin: 4px 2px; - font-size: 12px; - color: currentColor; - border-radius: 4px; - height: 32px; - font-weight: 600; -} -.navbar-sub-nav > li .top-nav-toggle, -.navbar-sub-nav > li > button, -.navbar-nav > li .top-nav-toggle, -.navbar-nav > li > button { - background: transparent; - border: 0; -} -.navbar-sub-nav .dropdown-menu, -.navbar-nav .dropdown-menu { - position: absolute; -} -.navbar-sub-nav { - display: flex; - margin: 0 0 0 6px; -} -.caret-down, -.btn .caret-down { - top: 0; - height: 11px; - width: 11px; - margin-left: 4px; - fill: currentColor; -} -.header-user .dropdown-menu, -.header-new .dropdown-menu { - margin-top: 4px; -} -.btn-sign-in { - background-color: #ebebfa; - color: #292961; - font-weight: 600; - line-height: 18px; - margin: 4px 0 4px 2px; -} -.title-container .badge.badge-pill:not(.merge-request-badge), -.navbar-nav .badge.badge-pill:not(.merge-request-badge) { - position: inherit; - font-weight: 400; - margin-left: -6px; - font-size: 11px; - color: var(--gray-950, #333); - padding: 0 5px; - line-height: 12px; - border-radius: 7px; - box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); -} -.title-container .badge.badge-pill:not(.merge-request-badge).green-badge, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { - background-color: var(--green-400, #108548); -} -.title-container - .badge.badge-pill:not(.merge-request-badge).merge-requests-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { - background-color: var(--orange-400, #ab6100); -} -.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { - background-color: var(--blue-400, #1f75cb); -} -@media (max-width: 575.98px) { - .navbar-gitlab .container-fluid { - font-size: 18px; - } - .navbar-gitlab .container-fluid .navbar-nav { - table-layout: fixed; - width: 100%; - margin: 0; - text-align: right; - } - .navbar-gitlab .container-fluid .navbar-collapse { - margin-left: -8px; - margin-right: -10px; - } - .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) { - flex: 1; - } - .header-user-dropdown-toggle { - text-align: center; - } - .header-user-avatar { - float: none; - } -} -.header-user.show .dropdown-menu { - margin-top: 4px; - color: var(--gl-text-color, #fafafa); - left: auto; - max-height: 445px; -} -.header-user.show .dropdown-menu svg { - vertical-align: text-top; -} -.header-user-avatar { - float: left; - margin-right: 5px; - border-radius: 50%; - border: 1px solid #333; -} -.notification-dot { - background-color: #9e5400; - height: 12px; - width: 12px; - margin-top: -15px; - pointer-events: none; - visibility: hidden; -} -.top-nav-toggle .dropdown-icon { - margin-right: 0.5rem; -} -.tanuki-logo .tanuki-left-ear, -.tanuki-logo .tanuki-right-ear, -.tanuki-logo .tanuki-nose { - fill: #e24329; -} -.tanuki-logo .tanuki-left-eye, -.tanuki-logo .tanuki-right-eye { - fill: #fc6d26; -} -.tanuki-logo .tanuki-left-cheek, -.tanuki-logo .tanuki-right-cheek { - fill: #fca326; -} -.card { - margin-bottom: 16px; -} -.context-header { - position: relative; - margin-right: 2px; - width: 220px; -} -.context-header > a, -.context-header > button { - font-weight: 600; - display: flex; - width: 100%; - align-items: center; - padding: 10px 16px 10px 10px; - color: #fafafa; - background-color: transparent; - border: 0; - text-align: left; -} -.context-header .avatar-container { - flex: 0 0 40px; - background-color: #333; -} -.context-header .sidebar-context-title { - overflow: hidden; - text-overflow: ellipsis; -} -@media (min-width: 768px) { - .page-with-contextual-sidebar { - padding-left: 50px; - } -} -@media (min-width: 1200px) { - .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - .page-with-icon-sidebar { - padding-left: 50px; - } -} -.nav-sidebar { - position: fixed; - z-index: 600; - width: 220px; - top: 40px; - bottom: 0; - left: 0; - background-color: #303030; - box-shadow: inset -1px 0 0 #404040; - transform: translate3d(0, 0, 0); -} -@media (min-width: 576px) and (max-width: 576px) { - .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1); - } -} -.nav-sidebar.sidebar-collapsed-desktop { - width: 50px; -} -.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { - overflow-x: hidden; -} -.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), -.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a { - min-height: 45px; -} -.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item { - display: block; -} -.nav-sidebar.sidebar-collapsed-desktop .avatar-container { - margin: 0 auto; -} -.nav-sidebar a { - text-decoration: none; -} -.nav-sidebar ul { - padding-left: 0; - list-style: none; -} -.nav-sidebar li { - white-space: nowrap; -} -.nav-sidebar li a { - display: flex; - align-items: center; - padding: 12px 16px; - color: #999; -} -.nav-sidebar li .nav-item-name { - flex: 1; -} -.nav-sidebar li.active > a { - font-weight: 600; -} -@media (max-width: 767.98px) { - .nav-sidebar { - left: -220px; - } -} -.nav-sidebar .nav-icon-container { - display: flex; - margin-right: 8px; -} -.nav-sidebar .fly-out-top-item { - display: none; -} -.nav-sidebar svg { - height: 16px; - width: 16px; -} -@media (min-width: 768px) and (max-width: 1199px) { - .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { - min-height: 45px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item { - display: block; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { - margin: 0 auto; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { - height: 60px; - width: 50px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { - padding: 10px 4px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { - margin-right: 0; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { - padding: 16px; - width: 49px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } -} -.nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -.sidebar-sub-level-items { - display: none; - padding-bottom: 8px; -} -.sidebar-sub-level-items > li a { - padding: 8px 16px 8px 40px; -} -.sidebar-sub-level-items > li.active a { - background: rgba(255, 255, 255, 0.04); -} -.sidebar-top-level-items { - margin-bottom: 60px; -} -@media (min-width: 576px) { - .sidebar-top-level-items > li > a { - margin-right: 1px; - } -} -.sidebar-top-level-items > li .badge.badge-pill { - background-color: rgba(255, 255, 255, 0.08); - color: #999; -} -.sidebar-top-level-items > li.active { - background: rgba(255, 255, 255, 0.04); -} -.sidebar-top-level-items > li.active > a { - margin-left: 4px; - padding-left: 12px; -} -.sidebar-top-level-items > li.active .badge.badge-pill { - font-weight: 600; -} -.sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; -} -.toggle-sidebar-button, -.close-nav-button { - height: 48px; - padding: 0 16px; - background-color: #303030; - border: 0; - color: #999; - display: flex; - align-items: center; -} -.toggle-sidebar-button, -.close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #404040; -} -.toggle-sidebar-button svg, -.close-nav-button svg { - margin-right: 8px; -} -.toggle-sidebar-button .icon-chevron-double-lg-right, -.close-nav-button .icon-chevron-double-lg-right { - display: none; -} -.collapse-text { - white-space: nowrap; - overflow: hidden; -} -.sidebar-collapsed-desktop .context-header { - height: 60px; - width: 50px; -} -.sidebar-collapsed-desktop .context-header a { - padding: 10px 4px; -} -.sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; -} -.sidebar-collapsed-desktop .nav-icon-container { - margin-right: 0; -} -.sidebar-collapsed-desktop .toggle-sidebar-button { - padding: 16px; - width: 49px; -} -.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, -.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { - display: none; -} -.sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; -} -.fly-out-top-item > a { - display: flex; -} -.fly-out-top-item .fly-out-badge { - margin-left: 8px; -} -.fly-out-top-item-name { - flex: 1; -} -.close-nav-button { - display: none; -} -@media (max-width: 767.98px) { - .close-nav-button { - display: flex; - } - .toggle-sidebar-button { - display: none; - } -} -body.sidebar-refactoring.gl-dark .nav-sidebar li.active { - box-shadow: none; -} -body.sidebar-refactoring.gl-dark .nav-sidebar li a, -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right { - color: #c4c4c4; -} -body.sidebar-refactoring .nav-sidebar { - box-shadow: none; -} -body.sidebar-refactoring .nav-sidebar li.active { - background-color: transparent; - box-shadow: none; -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 50px; - } -} -@media (min-width: 1200px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-icon-sidebar { - padding-left: 50px; - } -} -body.sidebar-refactoring .nav-sidebar { - position: fixed; - z-index: 600; - width: 220px; - top: 40px; - bottom: 0; - left: 0; - background-color: #303030; - transform: translate3d(0, 0, 0); -} -@media (min-width: 576px) and (max-width: 576px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1); - } -} -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { - width: 50px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .nav-sidebar-inner-scroll { - overflow-x: hidden; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .badge.badge-pill:not(.fly-out-badge), -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - > a { - min-height: 45px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .fly-out-top-item { - display: block; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .avatar-container { - margin: 0 auto; -} -body.sidebar-refactoring .nav-sidebar a { - text-decoration: none; - line-height: 1rem; - color: #2f2a6b; -} -body.sidebar-refactoring .nav-sidebar li { - white-space: nowrap; -} -body.sidebar-refactoring .nav-sidebar li .nav-item-name { - flex: 1; -} -body.sidebar-refactoring .nav-sidebar li > a { - margin-left: 0.25rem; - margin-right: 0.25rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - display: flex; - align-items: center; - border-radius: 0.25rem; - width: auto; - margin-bottom: 1px; -} -body.sidebar-refactoring .nav-sidebar li.active > a { - font-weight: 600; -} -body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) { - background-color: rgba(41, 41, 97, 0.08); -} -body.sidebar-refactoring .nav-sidebar ul { - padding-left: 0; - list-style: none; -} -@media (max-width: 767.98px) { - body.sidebar-refactoring .nav-sidebar { - left: -220px; - } -} -body.sidebar-refactoring .nav-sidebar .nav-icon-container { - display: flex; - margin-right: 8px; -} -body.sidebar-refactoring .nav-sidebar .fly-out-top-item { - display: none; -} -body.sidebar-refactoring .nav-sidebar svg { - height: 16px; - width: 16px; -} -@media (min-width: 768px) and (max-width: 1199px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - > a { - min-height: 45px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .fly-out-top-item { - display: block; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .avatar-container { - margin: 0 auto; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { - height: 60px; - width: 50px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { - padding: 10px 4px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-icon-container { - margin-right: 0; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button { - padding: 16px; - width: 49px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } -} -body.sidebar-refactoring .nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -body.sidebar-refactoring .sidebar-top-level-items { - margin-bottom: 60px; -} -body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { - border-radius: 0.5rem; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - background-color: #064787; - color: #9dc7f1; -} -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; -} -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .badge.badge-pill { - font-weight: 400; - color: #9dc7f1; -} -body.sidebar-refactoring .sidebar-sub-level-items { - padding-bottom: 0; - display: none; -} -body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { - padding-left: 2.25rem; -} -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { - height: 48px; - padding: 0 16px; - background-color: #303030; - border: 0; - color: #999; - display: flex; - align-items: center; - background-color: #303030; - color: #2f2a6b; -} -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .collapse-text, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { - color: inherit; -} -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #404040; -} -body.sidebar-refactoring .toggle-sidebar-button svg, -body.sidebar-refactoring .close-nav-button svg { - margin-right: 8px; -} -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { - display: none; -} -body.sidebar-refactoring .collapse-text { - white-space: nowrap; - overflow: hidden; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { - height: 60px; - width: 50px; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { - padding: 10px 4px; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { - margin-right: 0; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { - padding: 16px; - width: 49px; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .collapse-text, -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; -} -body.sidebar-refactoring .close-nav-button { - display: none; -} -@media (max-width: 767.98px) { - body.sidebar-refactoring .close-nav-button { - display: flex; - } - body.sidebar-refactoring .toggle-sidebar-button { - display: none; - } -} -input::-moz-placeholder { - color: #868686; - opacity: 1; -} -input::-ms-input-placeholder { - color: #868686; -} -input:-ms-input-placeholder { - color: #868686; -} -svg { - fill: currentColor; -} -svg.s12 { - width: 12px; - height: 12px; -} -svg.s16 { - width: 16px; - height: 16px; -} -svg.s18 { - width: 18px; - height: 18px; -} -svg.s12 { - vertical-align: -1px; -} -svg.s16 { - vertical-align: -3px; -} -.search { - margin: 0 8px; -} -.search form { - display: block; - margin: 0; - padding: 4px; - width: 200px; - line-height: 24px; - height: 32px; - border: 0; - border-radius: 4px; -} -@media (min-width: 1200px) { - .search form { - width: 320px; - } -} -.search .search-input { - border: 0; - font-size: 14px; - padding: 0 20px 0 0; - margin-left: 5px; - line-height: 25px; - width: 98%; - color: #333; - background: none; -} -.search .search-input-container { - display: flex; - position: relative; -} -.search .search-input-wrap { - width: 100%; -} -.search .search-input-wrap .search-icon, -.search .search-input-wrap .clear-icon { - position: absolute; - right: 5px; - top: 4px; -} -.search .search-input-wrap .search-icon { - -moz-user-select: none; - user-select: none; -} -.search .search-input-wrap .clear-icon { - display: none; -} -.search .search-input-wrap .dropdown { - position: static; -} -.search .search-input-wrap .dropdown-menu { - left: -5px; - max-height: 400px; - overflow: auto; -} -@media (min-width: 1200px) { - .search .search-input-wrap .dropdown-menu { - width: 320px; - } -} -.search .identicon { - flex-basis: 16px; - flex-shrink: 0; - margin-right: 4px; -} -.avatar, -.avatar-container { - float: left; - margin-right: 16px; - border-radius: 50%; - border: 1px solid #333; -} -.avatar.s16, -.avatar-container.s16 { - width: 16px; - height: 16px; - margin-right: 8px; -} -.avatar.s18, -.avatar-container.s18 { - width: 18px; - height: 18px; - margin-right: 8px; -} -.avatar.s40, -.avatar-container.s40 { - width: 40px; - height: 40px; - margin-right: 8px; -} -.avatar { - transition-property: none; - width: 40px; - height: 40px; - padding: 0; - background: #222; - overflow: hidden; - border-color: rgba(255, 255, 255, 0.1); -} -.avatar.avatar-tile { - border-radius: 0; - border: 0; -} -.identicon { - text-align: center; - vertical-align: top; - color: #525252; - background-color: #eee; -} -.identicon.s16 { - font-size: 10px; - line-height: 16px; -} -.identicon.s40 { - font-size: 16px; - line-height: 38px; -} -.identicon.bg1 { - background-color: #ffebee; -} -.identicon.bg2 { - background-color: #f3e5f5; -} -.identicon.bg3 { - background-color: #e8eaf6; -} -.identicon.bg4 { - background-color: #e3f2fd; -} -.identicon.bg5 { - background-color: #e0f2f1; -} -.identicon.bg6 { - background-color: #fbe9e7; -} -.identicon.bg7 { - background-color: #eee; -} -.avatar-container { - overflow: hidden; - display: flex; -} -.avatar-container a { - width: 100%; - height: 100%; - display: flex; - text-decoration: none; -} -.avatar-container .avatar { - border-radius: 0; - border: 0; - height: auto; - width: 100%; - margin: 0; - align-self: center; -} -.avatar-container.s40 { - min-width: 40px; - min-height: 40px; -} -.rect-avatar { - border-radius: 2px; -} -.rect-avatar.s16 { - border-radius: 2px; -} -.rect-avatar.s18 { - border-radius: 2px; -} -.rect-avatar.s40 { - border-radius: 4px; -} -#content-body { - display: block; -} -body.gl-dark .navbar-gitlab { - background-color: #fafafa; -} -body.gl-dark .navbar-gitlab .navbar-collapse { - color: #fafafa; -} -body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler { - border-left: 1px solid #b3b3b3; -} -body.gl-dark .navbar-gitlab .container-fluid .navbar-toggler svg { - fill: #fafafa; -} -body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > a, -body.gl-dark .navbar-gitlab .navbar-sub-nav > li.active > button, -body.gl-dark .navbar-gitlab .navbar-sub-nav > li.dropdown.show > a, -body.gl-dark .navbar-gitlab .navbar-sub-nav > li.dropdown.show > button, -body.gl-dark .navbar-gitlab .navbar-nav > li.active > a, -body.gl-dark .navbar-gitlab .navbar-nav > li.active > button, -body.gl-dark .navbar-gitlab .navbar-nav > li.dropdown.show > a, -body.gl-dark .navbar-gitlab .navbar-nav > li.dropdown.show > button { - color: #fafafa; - background-color: #333; -} -body.gl-dark .navbar-gitlab .navbar-sub-nav { - color: #fafafa; -} -body.gl-dark .navbar-gitlab .nav > li { - color: #fafafa; -} -body.gl-dark .navbar-gitlab .nav > li > a .notification-dot { - border: 2px solid #fafafa; -} -body.gl-dark - .navbar-gitlab - .nav - > li - > a.header-help-dropdown-toggle - .notification-dot { - background-color: #fafafa; -} -body.gl-dark - .navbar-gitlab - .nav - > li - > a.header-user-dropdown-toggle - .header-user-avatar { - border-color: #fafafa; -} -body.gl-dark .navbar-gitlab .nav > li.active > a, -body.gl-dark .navbar-gitlab .nav > li.dropdown.show > a { - color: #fafafa; - background-color: #333; -} -body.gl-dark .navbar-gitlab .nav > li.active > a .notification-dot, -body.gl-dark .navbar-gitlab .nav > li.dropdown.show > a .notification-dot { - border-color: #333; -} -body.gl-dark - .navbar-gitlab - .nav - > li.active - > a.header-help-dropdown-toggle - .notification-dot, -body.gl-dark - .navbar-gitlab - .nav - > li.dropdown.show - > a.header-help-dropdown-toggle - .notification-dot { - background-color: #fafafa; -} -body.gl-dark .search form { - background-color: rgba(250, 250, 250, 0.2); -} -body.gl-dark .search .search-input::-ms-input-placeholder { - color: rgba(250, 250, 250, 0.8); -} -body.gl-dark .search .search-input::placeholder { - color: rgba(250, 250, 250, 0.8); -} -body.gl-dark .search .search-input-wrap .search-icon, -body.gl-dark .search .search-input-wrap .clear-icon { - fill: rgba(250, 250, 250, 0.8); -} -body.gl-dark .nav-sidebar li.active { - box-shadow: inset 4px 0 0 #999; -} -body.gl-dark .nav-sidebar li.active > a { - color: #f0f0f0; -} -body.gl-dark .nav-sidebar li.active .nav-icon-container svg { - fill: #f0f0f0; -} -body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill { - color: #f0f0f0; -} -body.gl-dark .logo-text svg { - fill: var(--gl-text-color); -} -body.gl-dark .navbar-gitlab { - background-color: var(--gray-50); - box-shadow: 0 1px 0 0 var(--gray-100); -} -body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a, -body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button, -body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > a, -body.gl-dark .navbar-gitlab .navbar-sub-nav li.dropdown.show > button, -body.gl-dark .navbar-gitlab .navbar-nav li.active > a, -body.gl-dark .navbar-gitlab .navbar-nav li.active > button, -body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > a, -body.gl-dark .navbar-gitlab .navbar-nav li.dropdown.show > button { - color: var(--gl-text-color); - background-color: var(--gray-200); -} -body.gl-dark .navbar-gitlab .search form { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--border-color); -} -body.gl-dark .navbar-gitlab .search form:active { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--blue-200); -} - -body.gl-dark { - --gray-10: #1f1f1f; - --gray-50: #303030; - --gray-100: #404040; - --gray-200: #525252; - --gray-300: #5e5e5e; - --gray-400: #868686; - --gray-500: #999; - --gray-600: #bfbfbf; - --gray-700: #dbdbdb; - --gray-800: #f0f0f0; - --gray-900: #fafafa; - --gray-950: #fff; - --green-50: #0a4020; - --green-100: #0d532a; - --green-200: #24663b; - --green-300: #217645; - --green-400: #108548; - --green-500: #2da160; - --green-600: #52b87a; - --green-700: #91d4a8; - --green-800: #c3e6cd; - --green-900: #ecf4ee; - --green-950: #f1fdf6; - --blue-50: #033464; - --blue-100: #064787; - --blue-200: #0b5cad; - --blue-300: #1068bf; - --blue-400: #1f75cb; - --blue-500: #428fdc; - --blue-600: #63a6e9; - --blue-700: #9dc7f1; - --blue-800: #cbe2f9; - --blue-900: #e9f3fc; - --blue-950: #f2f9ff; - --orange-50: #5c2900; - --orange-100: #703800; - --orange-200: #8f4700; - --orange-300: #9e5400; - --orange-400: #ab6100; - --orange-500: #c17d10; - --orange-600: #d99530; - --orange-700: #e9be74; - --orange-800: #f5d9a8; - --orange-900: #fdf1dd; - --orange-950: #fff4e1; - --red-50: #660e00; - --red-100: #8d1300; - --red-200: #ae1800; - --red-300: #c91c00; - --red-400: #dd2b0e; - --red-500: #ec5941; - --red-600: #f57f6c; - --red-700: #fcb5aa; - --red-800: #fdd4cd; - --red-900: #fcf1ef; - --red-950: #fff4f3; - --indigo-50: #1a1a40; - --indigo-100: #292961; - --indigo-200: #393982; - --indigo-300: #4b4ba3; - --indigo-400: #5b5bbd; - --indigo-500: #6666c4; - --indigo-600: #7c7ccc; - --indigo-700: #a6a6de; - --indigo-800: #d1d1f0; - --indigo-900: #ebebfa; - --indigo-950: #f7f7ff; - --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); - --gl-text-color: #fafafa; - --border-color: #4f4f4f; - --white: #333; - --black: #fff; - --svg-status-bg: #333; -} -.tab-width-8 { - -moz-tab-size: 8; - tab-size: 8; -} -.gl-sr-only { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.gl-absolute { - position: absolute; -} -.gl-ml-3 { - margin-left: 0.5rem; -} -.gl-mx-0\! { - margin-left: 0 !important; - margin-right: 0 !important; -} - -@import "startup/cloaking"; -@include cloak-startup-scss(none); diff --git a/ee/app/assets/stylesheets/startup/startup-general.scss b/ee/app/assets/stylesheets/startup/startup-general.scss deleted file mode 100644 index 35b18b2515804..0000000000000 --- a/ee/app/assets/stylesheets/startup/startup-general.scss +++ /dev/null @@ -1,1901 +0,0 @@ -// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" -// Please see the feedback issue for more details and help: -// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 -@charset "UTF-8"; -*, -*::before, -*::after { - box-sizing: border-box; -} -html { - font-family: sans-serif; - line-height: 1.15; -} -aside, -header, -nav { - display: block; -} -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #303030; - text-align: left; - background-color: #fff; -} -h1 { - margin-top: 0; - margin-bottom: 0.25rem; -} -ul { - margin-top: 0; - margin-bottom: 1rem; -} -ul ul { - margin-bottom: 0; -} -strong { - font-weight: bolder; -} -a { - color: #007bff; - text-decoration: none; - background-color: transparent; -} -a:not([href]):not([class]) { - color: inherit; - text-decoration: none; -} -img { - vertical-align: middle; - border-style: none; -} -svg { - overflow: hidden; - vertical-align: middle; -} -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; -} -[type="search"] { - outline-offset: -2px; -} -summary { - display: list-item; - cursor: pointer; -} -[hidden] { - display: none !important; -} -h1, -.h1 { - margin-bottom: 0.25rem; - font-weight: 600; - line-height: 1.2; - color: #303030; -} -h1, -.h1 { - font-size: 2.1875rem; -} -.list-unstyled { - padding-left: 0; - list-style: none; -} -.container-fluid { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} -.form-control { - display: block; - width: 100%; - height: 34px; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #303030; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #dbdbdb; - border-radius: 0.25rem; -} -@media (prefers-reduced-motion: reduce) { -} -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #303030; -} -.form-control::-ms-input-placeholder { - color: #5e5e5e; - opacity: 1; -} -.form-control::placeholder { - color: #5e5e5e; - opacity: 1; -} -.form-control:disabled { - background-color: #fafafa; - opacity: 1; -} -.form-inline { - display: flex; - flex-flow: row wrap; - align-items: center; -} -@media (min-width: 576px) { - .form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle; - } -} -.btn { - display: inline-block; - font-weight: 400; - color: #303030; - text-align: center; - vertical-align: middle; - -moz-user-select: none; - user-select: none; - background-color: transparent; - border: 1px solid transparent; - padding: 0.375rem 0.75rem; - font-size: 1rem; - line-height: 20px; - border-radius: 0.25rem; -} -@media (prefers-reduced-motion: reduce) { -} -.btn:disabled { - opacity: 0.65; -} -.btn:not(:disabled):not(.disabled) { - cursor: pointer; -} -.collapse:not(.show) { - display: none; -} -.dropdown { - position: relative; -} -.dropdown-menu-toggle { - white-space: nowrap; -} -.dropdown-menu-toggle::after { - display: inline-block; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ""; - border-top: 0.3em solid; - border-right: 0.3em solid transparent; - border-bottom: 0; - border-left: 0.3em solid transparent; -} -.dropdown-menu-toggle:empty::after { - margin-left: 0; -} -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 10rem; - padding: 0.5rem 0; - margin: 0.125rem 0 0; - font-size: 1rem; - color: #303030; - text-align: left; - list-style: none; - background-color: #fff; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 0.25rem; -} -.dropdown-menu.show { - display: block; -} -.nav { - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 0; - list-style: none; -} -.navbar { - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - padding: 0.25rem 0.5rem; -} -.navbar .container-fluid { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; -} -.navbar-nav { - display: flex; - flex-direction: column; - padding-left: 0; - margin-bottom: 0; - list-style: none; -} -.navbar-nav .dropdown-menu { - position: static; - float: none; -} -.navbar-collapse { - flex-basis: 100%; - flex-grow: 1; - align-items: center; -} -.navbar-toggler { - padding: 0.25rem 0.75rem; - font-size: 1.25rem; - line-height: 1; - background-color: transparent; - border: 1px solid transparent; - border-radius: 0.25rem; -} -@media (max-width: 575.98px) { - .navbar-expand-sm > .container-fluid { - padding-right: 0; - padding-left: 0; - } -} -@media (min-width: 576px) { - .navbar-expand-sm { - flex-flow: row nowrap; - justify-content: flex-start; - } - .navbar-expand-sm .navbar-nav { - flex-direction: row; - } - .navbar-expand-sm .navbar-nav .dropdown-menu { - position: absolute; - } - .navbar-expand-sm > .container-fluid { - flex-wrap: nowrap; - } - .navbar-expand-sm .navbar-collapse { - display: flex !important; - flex-basis: auto; - } - .navbar-expand-sm .navbar-toggler { - display: none; - } -} -.card { - position: relative; - display: flex; - flex-direction: column; - min-width: 0; - word-wrap: break-word; - background-color: #fff; - background-clip: border-box; - border: 1px solid #dbdbdb; - border-radius: 0.25rem; -} -.badge { - display: inline-block; - padding: 0.25em 0.4em; - font-size: 75%; - font-weight: 600; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 0.25rem; -} -@media (prefers-reduced-motion: reduce) { -} -.badge:empty { - display: none; -} -.btn .badge { - position: relative; - top: -1px; -} -.badge-pill { - padding-right: 0.6em; - padding-left: 0.6em; - border-radius: 10rem; -} -.close { - float: right; - font-size: 1.5rem; - font-weight: 600; - line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; - opacity: 0.5; -} -button.close { - padding: 0; - background-color: transparent; - border: 0; -} -.rounded-circle { - border-radius: 50% !important; -} -.d-none { - display: none !important; -} -.d-inline-block { - display: inline-block !important; -} -.d-block { - display: block !important; -} -@media (min-width: 576px) { - .d-sm-none { - display: none !important; - } -} -@media (min-width: 768px) { - .d-md-block { - display: block !important; - } -} -@media (min-width: 992px) { - .d-lg-none { - display: none !important; - } - .d-lg-block { - display: block !important; - } -} -@media (min-width: 1200px) { - .d-xl-block { - display: block !important; - } -} -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} -.m-auto { - margin: auto !important; -} -.gl-button { - display: inline-flex; -} -.gl-button:not(.btn-link):active { - text-decoration: none; -} -.gl-button.gl-button { - border-width: 0; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - background-color: transparent; - line-height: 1rem; - color: #303030; - fill: currentColor; - box-shadow: inset 0 0 0 1px #bfbfbf; - justify-content: center; - align-items: center; - font-size: 0.875rem; - border-radius: 0.25rem; -} -.gl-button.gl-button.btn-default { - background-color: #fff; -} -.gl-button.gl-button.btn-default:active, -.gl-button.gl-button.btn-default.active { - box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); - outline: none; - background-color: #dbdbdb; -} -body, -.form-control, -.search form { - font-size: 0.875rem; -} -button, -html [type="button"], -[type="submit"], -[role="button"] { - cursor: pointer; -} -h1, -.h1 { - margin-top: 20px; - margin-bottom: 10px; -} -strong { - font-weight: bold; -} -a { - color: #1068bf; -} -.hidden { - display: none !important; - visibility: hidden !important; -} -.hide { - display: none; -} -.dropdown-menu-toggle::after { - display: none; -} -.badge:not(.gl-badge) { - padding: 4px 5px; - font-size: 12px; - font-style: normal; - font-weight: 400; - display: inline-block; -} -.divider { - height: 0; - margin: 4px 0; - overflow: hidden; - border-top: 1px solid #dbdbdb; -} -.toggle-sidebar-button .collapse-text, -.toggle-sidebar-button .icon-chevron-double-lg-left, -.toggle-sidebar-button .icon-chevron-double-lg-right { - color: #666; -} -svg { - vertical-align: baseline; -} -html { - overflow-y: scroll; -} -body { - text-decoration-skip: ink; -} -.btn { - border-radius: 4px; - font-size: 0.875rem; - font-weight: 400; - padding: 6px 10px; - background-color: #fff; - border-color: #dbdbdb; - color: #303030; - color: #303030; - white-space: nowrap; -} -.btn:active { - background-color: #f0f0f0; - box-shadow: none; -} -.btn:active, -.btn.active { - background-color: #eaeaea; - border-color: #e3e3e3; - color: #303030; -} -.btn svg { - height: 15px; - width: 15px; -} -.btn svg:not(:last-child) { - margin-right: 5px; -} -.badge.badge-pill:not(.gl-badge) { - font-weight: 400; - background-color: rgba(0, 0, 0, 0.07); - color: #525252; - vertical-align: baseline; -} -.chart { - overflow: hidden; - height: 220px; -} -.dropdown { - position: relative; -} -.show.dropdown .dropdown-menu { - transform: translateY(0); - display: block; - min-height: 40px; - max-height: 312px; - overflow-y: auto; -} -@media (max-width: 575.98px) { - .show.dropdown .dropdown-menu { - width: 100%; - } -} -.show.dropdown .dropdown-menu-toggle, -.show.dropdown .dropdown-menu-toggle { - border-color: #c4c4c4; -} -.show.dropdown [data-toggle="dropdown"] { - outline: 0; -} -.search-input-container .dropdown-menu { - margin-top: 11px; -} -.dropdown-menu-toggle { - padding: 6px 8px 6px 10px; - background-color: #fff; - color: #303030; - font-size: 14px; - text-align: left; - border: 1px solid #dbdbdb; - border-radius: 0.25rem; - white-space: nowrap; -} -.no-outline.dropdown-menu-toggle { - outline: 0; -} -.dropdown-menu-toggle.dropdown-menu-toggle { - justify-content: flex-start; - overflow: hidden; - padding-right: 25px; - position: relative; - text-overflow: ellipsis; - width: 160px; -} -.dropdown-menu { - display: none; - position: absolute; - width: auto; - top: 100%; - z-index: 300; - min-width: 240px; - max-width: 500px; - margin-top: 4px; - margin-bottom: 24px; - font-size: 14px; - font-weight: 400; - padding: 8px 0; - background-color: #fff; - border: 1px solid #dbdbdb; - border-radius: 0.25rem; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} -.dropdown-menu ul { - margin: 0; - padding: 0; -} -.dropdown-menu li { - display: block; - text-align: left; - list-style: none; - padding: 0 1px; -} -.dropdown-menu li > a, -.dropdown-menu li button { - background: transparent; - border: 0; - border-radius: 0; - box-shadow: none; - display: block; - font-weight: 400; - position: relative; - padding: 8px 12px; - color: #303030; - line-height: 16px; - white-space: normal; - overflow: hidden; - text-align: left; - width: 100%; -} -.dropdown-menu li > a:active, -.dropdown-menu li button:active { - background-color: #eee; - color: #303030; - outline: 0; - text-decoration: none; -} -.dropdown-menu .divider { - height: 1px; - margin: 0.25rem 0; - padding: 0; - background-color: #dbdbdb; -} -.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { - margin-right: 40px; -} -@media (max-width: 575.98px) { - .navbar-gitlab li.dropdown { - position: static; - } - .navbar-gitlab li.dropdown.user-counter { - margin-left: 8px !important; - } - .navbar-gitlab li.dropdown.user-counter > a { - padding: 0 4px !important; - } - header.navbar-gitlab .dropdown .dropdown-menu { - width: 100%; - min-width: 100%; - } -} -@media (max-width: 767.98px) { - .dropdown-menu-toggle { - width: 100%; - } -} -input { - border-radius: 0.25rem; - color: #303030; - background-color: #fff; -} -.form-control { - border-radius: 4px; - padding: 6px 10px; -} -.form-control::-ms-input-placeholder { - color: #868686; -} -.form-control::placeholder { - color: #868686; -} -.navbar-gitlab { - padding: 0 16px; - z-index: 1000; - margin-bottom: 0; - min-height: 40px; - border: 0; - position: fixed; - top: 0; - left: 0; - right: 0; - border-radius: 0; -} -.navbar-gitlab .logo-text { - line-height: initial; -} -.navbar-gitlab .logo-text svg { - width: 55px; - height: 14px; - margin: 0; - fill: #fff; -} -.navbar-gitlab .close-icon { - display: none; -} -.navbar-gitlab .header-content { - width: 100%; - display: flex; - justify-content: space-between; - position: relative; - min-height: 40px; - padding-left: 0; -} -.navbar-gitlab .header-content .title-container { - display: flex; - align-items: stretch; - flex: 1 1 auto; - padding-top: 0; - overflow: visible; -} -.navbar-gitlab .header-content .title { - padding-right: 0; - color: currentColor; - display: flex; - position: relative; - margin: 0; - font-size: 18px; - vertical-align: top; - white-space: nowrap; -} -.navbar-gitlab .header-content .title img { - height: 28px; -} -.navbar-gitlab .header-content .title img + .logo-text { - margin-left: 8px; -} -.navbar-gitlab .header-content .title a { - display: flex; - align-items: center; - padding: 2px 8px; - margin: 5px 2px 5px -8px; - border-radius: 4px; -} -.navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { - margin: 0 2px; -} -.navbar-gitlab .navbar-collapse { - flex: 0 0 auto; - border-top: 0; - padding: 0; -} -@media (max-width: 575.98px) { - .navbar-gitlab .navbar-collapse { - flex: 1 1 auto; - } -} -.navbar-gitlab .navbar-collapse .nav { - flex-wrap: nowrap; -} -@media (max-width: 575.98px) { - .navbar-gitlab .navbar-collapse .nav > li:not(.d-none) a { - margin-left: 0; - } -} -.navbar-gitlab .container-fluid { - padding: 0; -} -.navbar-gitlab .container-fluid .user-counter svg { - margin-right: 3px; -} -.navbar-gitlab .container-fluid .navbar-toggler { - position: relative; - right: -10px; - border-radius: 0; - min-width: 45px; - padding: 0; - margin: 8px -7px 8px 0; - font-size: 14px; - text-align: center; - color: currentColor; -} -.navbar-gitlab .container-fluid .navbar-toggler.active { - color: currentColor; - background-color: transparent; -} -@media (max-width: 575.98px) { - .navbar-gitlab .container-fluid .navbar-nav { - display: flex; - padding-right: 10px; - flex-direction: row; - } -} -.navbar-gitlab - .container-fluid - .navbar-nav - li - .badge.badge-pill:not(.merge-request-badge) { - box-shadow: none; - font-weight: 600; -} -@media (max-width: 575.98px) { - .navbar-gitlab .container-fluid .nav > li.header-user { - padding-left: 10px; - } -} -.navbar-gitlab .container-fluid .nav > li > a { - will-change: color; - margin: 4px 0; - padding: 6px 8px; - height: 32px; -} -@media (max-width: 575.98px) { - .navbar-gitlab .container-fluid .nav > li > a { - padding: 0; - } -} -.navbar-gitlab .container-fluid .nav > li > a.header-user-dropdown-toggle { - margin-left: 2px; -} -.navbar-gitlab - .container-fluid - .nav - > li - > a.header-user-dropdown-toggle - .header-user-avatar { - margin-right: 0; -} -.navbar-gitlab .container-fluid .nav > li .header-new-dropdown-toggle { - margin-right: 0; -} -.navbar-sub-nav > li > a, -.navbar-sub-nav > li > button, -.navbar-nav > li > a, -.navbar-nav > li > button { - display: flex; - align-items: center; - justify-content: center; - padding: 6px 8px; - margin: 4px 2px; - font-size: 12px; - color: currentColor; - border-radius: 4px; - height: 32px; - font-weight: 600; -} -.navbar-sub-nav > li .top-nav-toggle, -.navbar-sub-nav > li > button, -.navbar-nav > li .top-nav-toggle, -.navbar-nav > li > button { - background: transparent; - border: 0; -} -.navbar-sub-nav .dropdown-menu, -.navbar-nav .dropdown-menu { - position: absolute; -} -.navbar-sub-nav { - display: flex; - margin: 0 0 0 6px; -} -.caret-down, -.btn .caret-down { - top: 0; - height: 11px; - width: 11px; - margin-left: 4px; - fill: currentColor; -} -.header-user .dropdown-menu, -.header-new .dropdown-menu { - margin-top: 4px; -} -.btn-sign-in { - background-color: #ebebfa; - color: #292961; - font-weight: 600; - line-height: 18px; - margin: 4px 0 4px 2px; -} -.title-container .badge.badge-pill:not(.merge-request-badge), -.navbar-nav .badge.badge-pill:not(.merge-request-badge) { - position: inherit; - font-weight: 400; - margin-left: -6px; - font-size: 11px; - color: var(--gray-950, #fff); - padding: 0 5px; - line-height: 12px; - border-radius: 7px; - box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); -} -.title-container .badge.badge-pill:not(.merge-request-badge).green-badge, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { - background-color: var(--green-400, #2da160); -} -.title-container - .badge.badge-pill:not(.merge-request-badge).merge-requests-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { - background-color: var(--orange-400, #c17d10); -} -.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { - background-color: var(--blue-400, #428fdc); -} -@media (max-width: 575.98px) { - .navbar-gitlab .container-fluid { - font-size: 18px; - } - .navbar-gitlab .container-fluid .navbar-nav { - table-layout: fixed; - width: 100%; - margin: 0; - text-align: right; - } - .navbar-gitlab .container-fluid .navbar-collapse { - margin-left: -8px; - margin-right: -10px; - } - .navbar-gitlab .container-fluid .navbar-collapse .nav > li:not(.d-none) { - flex: 1; - } - .header-user-dropdown-toggle { - text-align: center; - } - .header-user-avatar { - float: none; - } -} -.header-user.show .dropdown-menu { - margin-top: 4px; - color: var(--gl-text-color, #303030); - left: auto; - max-height: 445px; -} -.header-user.show .dropdown-menu svg { - vertical-align: text-top; -} -.header-user-avatar { - float: left; - margin-right: 5px; - border-radius: 50%; - border: 1px solid #f5f5f5; -} -.notification-dot { - background-color: #d99530; - height: 12px; - width: 12px; - margin-top: -15px; - pointer-events: none; - visibility: hidden; -} -.top-nav-toggle .dropdown-icon { - margin-right: 0.5rem; -} -.tanuki-logo .tanuki-left-ear, -.tanuki-logo .tanuki-right-ear, -.tanuki-logo .tanuki-nose { - fill: #e24329; -} -.tanuki-logo .tanuki-left-eye, -.tanuki-logo .tanuki-right-eye { - fill: #fc6d26; -} -.tanuki-logo .tanuki-left-cheek, -.tanuki-logo .tanuki-right-cheek { - fill: #fca326; -} -.card { - margin-bottom: 16px; -} -.context-header { - position: relative; - margin-right: 2px; - width: 220px; -} -.context-header > a, -.context-header > button { - font-weight: 600; - display: flex; - width: 100%; - align-items: center; - padding: 10px 16px 10px 10px; - color: #303030; - background-color: transparent; - border: 0; - text-align: left; -} -.context-header .avatar-container { - flex: 0 0 40px; - background-color: #fff; -} -.context-header .sidebar-context-title { - overflow: hidden; - text-overflow: ellipsis; -} -@media (min-width: 768px) { - .page-with-contextual-sidebar { - padding-left: 50px; - } -} -@media (min-width: 1200px) { - .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - .page-with-icon-sidebar { - padding-left: 50px; - } -} -.nav-sidebar { - position: fixed; - z-index: 600; - width: 220px; - top: 40px; - bottom: 0; - left: 0; - background-color: #fafafa; - box-shadow: inset -1px 0 0 #dbdbdb; - transform: translate3d(0, 0, 0); -} -@media (min-width: 576px) and (max-width: 576px) { - .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); - } -} -.nav-sidebar.sidebar-collapsed-desktop { - width: 50px; -} -.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll { - overflow-x: hidden; -} -.nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), -.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a { - min-height: 45px; -} -.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item { - display: block; -} -.nav-sidebar.sidebar-collapsed-desktop .avatar-container { - margin: 0 auto; -} -.nav-sidebar a { - text-decoration: none; -} -.nav-sidebar ul { - padding-left: 0; - list-style: none; -} -.nav-sidebar li { - white-space: nowrap; -} -.nav-sidebar li a { - display: flex; - align-items: center; - padding: 12px 16px; - color: #666; -} -.nav-sidebar li .nav-item-name { - flex: 1; -} -.nav-sidebar li.active > a { - font-weight: 600; -} -@media (max-width: 767.98px) { - .nav-sidebar { - left: -220px; - } -} -.nav-sidebar .nav-icon-container { - display: flex; - margin-right: 8px; -} -.nav-sidebar .fly-out-top-item { - display: none; -} -.nav-sidebar svg { - height: 16px; - width: 16px; -} -@media (min-width: 768px) and (max-width: 1199px) { - .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { - min-height: 45px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item { - display: block; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { - margin: 0 auto; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { - height: 60px; - width: 50px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { - padding: 10px 4px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { - margin-right: 0; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { - padding: 16px; - width: 49px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } -} -.nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -.sidebar-sub-level-items { - display: none; - padding-bottom: 8px; -} -.sidebar-sub-level-items > li a { - padding: 8px 16px 8px 40px; -} -.sidebar-sub-level-items > li.active a { - background: rgba(0, 0, 0, 0.04); -} -.sidebar-top-level-items { - margin-bottom: 60px; -} -@media (min-width: 576px) { - .sidebar-top-level-items > li > a { - margin-right: 1px; - } -} -.sidebar-top-level-items > li .badge.badge-pill { - background-color: rgba(0, 0, 0, 0.08); - color: #666; -} -.sidebar-top-level-items > li.active { - background: rgba(0, 0, 0, 0.04); -} -.sidebar-top-level-items > li.active > a { - margin-left: 4px; - padding-left: 12px; -} -.sidebar-top-level-items > li.active .badge.badge-pill { - font-weight: 600; -} -.sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; -} -.toggle-sidebar-button, -.close-nav-button { - height: 48px; - padding: 0 16px; - background-color: #fafafa; - border: 0; - color: #666; - display: flex; - align-items: center; -} -.toggle-sidebar-button, -.close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #dbdbdb; -} -.toggle-sidebar-button svg, -.close-nav-button svg { - margin-right: 8px; -} -.toggle-sidebar-button .icon-chevron-double-lg-right, -.close-nav-button .icon-chevron-double-lg-right { - display: none; -} -.collapse-text { - white-space: nowrap; - overflow: hidden; -} -.sidebar-collapsed-desktop .context-header { - height: 60px; - width: 50px; -} -.sidebar-collapsed-desktop .context-header a { - padding: 10px 4px; -} -.sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; -} -.sidebar-collapsed-desktop .nav-icon-container { - margin-right: 0; -} -.sidebar-collapsed-desktop .toggle-sidebar-button { - padding: 16px; - width: 49px; -} -.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, -.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { - display: none; -} -.sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; -} -.fly-out-top-item > a { - display: flex; -} -.fly-out-top-item .fly-out-badge { - margin-left: 8px; -} -.fly-out-top-item-name { - flex: 1; -} -.close-nav-button { - display: none; -} -@media (max-width: 767.98px) { - .close-nav-button { - display: flex; - } - .toggle-sidebar-button { - display: none; - } -} -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right { - color: #c4c4c4; -} -body.sidebar-refactoring .nav-sidebar { - box-shadow: none; -} -body.sidebar-refactoring .nav-sidebar li.active { - background-color: transparent; - box-shadow: none; -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 50px; - } -} -@media (min-width: 1200px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-icon-sidebar { - padding-left: 50px; - } -} -body.sidebar-refactoring .nav-sidebar { - position: fixed; - z-index: 600; - width: 220px; - top: 40px; - bottom: 0; - left: 0; - background-color: #f0f0f0; - transform: translate3d(0, 0, 0); -} -@media (min-width: 576px) and (max-width: 576px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); - } -} -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { - width: 50px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .nav-sidebar-inner-scroll { - overflow-x: hidden; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .badge.badge-pill:not(.fly-out-badge), -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - > a { - min-height: 45px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .fly-out-top-item { - display: block; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .avatar-container { - margin: 0 auto; -} -body.sidebar-refactoring .nav-sidebar a { - text-decoration: none; - line-height: 1rem; - color: #2f2a6b; -} -body.sidebar-refactoring .nav-sidebar li { - white-space: nowrap; -} -body.sidebar-refactoring .nav-sidebar li .nav-item-name { - flex: 1; -} -body.sidebar-refactoring .nav-sidebar li > a { - margin-left: 0.25rem; - margin-right: 0.25rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - display: flex; - align-items: center; - border-radius: 0.25rem; - width: auto; - margin-bottom: 1px; -} -body.sidebar-refactoring .nav-sidebar li.active > a { - font-weight: 600; -} -body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) { - background-color: rgba(41, 41, 97, 0.08); -} -body.sidebar-refactoring .nav-sidebar ul { - padding-left: 0; - list-style: none; -} -@media (max-width: 767.98px) { - body.sidebar-refactoring .nav-sidebar { - left: -220px; - } -} -body.sidebar-refactoring .nav-sidebar .nav-icon-container { - display: flex; - margin-right: 8px; -} -body.sidebar-refactoring .nav-sidebar .fly-out-top-item { - display: none; -} -body.sidebar-refactoring .nav-sidebar svg { - height: 16px; - width: 16px; -} -@media (min-width: 768px) and (max-width: 1199px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 50px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - > a { - min-height: 45px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .fly-out-top-item { - display: block; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .avatar-container { - margin: 0 auto; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { - height: 60px; - width: 50px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { - padding: 10px 4px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-icon-container { - margin-right: 0; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button { - padding: 16px; - width: 49px; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; - } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } -} -body.sidebar-refactoring .nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -body.sidebar-refactoring .sidebar-top-level-items { - margin-bottom: 60px; -} -body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { - border-radius: 0.5rem; - padding-top: 0.125rem; - padding-bottom: 0.125rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - background-color: #cbe2f9; - color: #0b5cad; -} -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; -} -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .badge.badge-pill { - font-weight: 400; - color: #0b5cad; -} -body.sidebar-refactoring .sidebar-sub-level-items { - padding-bottom: 0; - display: none; -} -body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { - padding-left: 2.25rem; -} -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { - height: 48px; - padding: 0 16px; - background-color: #fafafa; - border: 0; - color: #666; - display: flex; - align-items: center; - background-color: #f0f0f0; - color: #2f2a6b; -} -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .collapse-text, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { - color: inherit; -} -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #dbdbdb; -} -body.sidebar-refactoring .toggle-sidebar-button svg, -body.sidebar-refactoring .close-nav-button svg { - margin-right: 8px; -} -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { - display: none; -} -body.sidebar-refactoring .collapse-text { - white-space: nowrap; - overflow: hidden; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { - height: 60px; - width: 50px; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { - padding: 10px 4px; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { - margin-right: 0; -} -body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { - padding: 16px; - width: 49px; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .collapse-text, -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; -} -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; -} -body.sidebar-refactoring .close-nav-button { - display: none; -} -@media (max-width: 767.98px) { - body.sidebar-refactoring .close-nav-button { - display: flex; - } - body.sidebar-refactoring .toggle-sidebar-button { - display: none; - } -} -input::-moz-placeholder { - color: #868686; - opacity: 1; -} -input::-ms-input-placeholder { - color: #868686; -} -input:-ms-input-placeholder { - color: #868686; -} -svg { - fill: currentColor; -} -svg.s12 { - width: 12px; - height: 12px; -} -svg.s16 { - width: 16px; - height: 16px; -} -svg.s18 { - width: 18px; - height: 18px; -} -svg.s12 { - vertical-align: -1px; -} -svg.s16 { - vertical-align: -3px; -} -.search { - margin: 0 8px; -} -.search form { - display: block; - margin: 0; - padding: 4px; - width: 200px; - line-height: 24px; - height: 32px; - border: 0; - border-radius: 4px; -} -@media (min-width: 1200px) { - .search form { - width: 320px; - } -} -.search .search-input { - border: 0; - font-size: 14px; - padding: 0 20px 0 0; - margin-left: 5px; - line-height: 25px; - width: 98%; - color: #fff; - background: none; -} -.search .search-input-container { - display: flex; - position: relative; -} -.search .search-input-wrap { - width: 100%; -} -.search .search-input-wrap .search-icon, -.search .search-input-wrap .clear-icon { - position: absolute; - right: 5px; - top: 4px; -} -.search .search-input-wrap .search-icon { - -moz-user-select: none; - user-select: none; -} -.search .search-input-wrap .clear-icon { - display: none; -} -.search .search-input-wrap .dropdown { - position: static; -} -.search .search-input-wrap .dropdown-menu { - left: -5px; - max-height: 400px; - overflow: auto; -} -@media (min-width: 1200px) { - .search .search-input-wrap .dropdown-menu { - width: 320px; - } -} -.search .identicon { - flex-basis: 16px; - flex-shrink: 0; - margin-right: 4px; -} -.avatar, -.avatar-container { - float: left; - margin-right: 16px; - border-radius: 50%; - border: 1px solid #f5f5f5; -} -.avatar.s16, -.avatar-container.s16 { - width: 16px; - height: 16px; - margin-right: 8px; -} -.avatar.s18, -.avatar-container.s18 { - width: 18px; - height: 18px; - margin-right: 8px; -} -.avatar.s40, -.avatar-container.s40 { - width: 40px; - height: 40px; - margin-right: 8px; -} -.avatar { - transition-property: none; - width: 40px; - height: 40px; - padding: 0; - background: #fdfdfd; - overflow: hidden; - border-color: rgba(0, 0, 0, 0.1); -} -.avatar.avatar-tile { - border-radius: 0; - border: 0; -} -.identicon { - text-align: center; - vertical-align: top; - color: #525252; - background-color: #eee; -} -.identicon.s16 { - font-size: 10px; - line-height: 16px; -} -.identicon.s40 { - font-size: 16px; - line-height: 38px; -} -.identicon.bg1 { - background-color: #ffebee; -} -.identicon.bg2 { - background-color: #f3e5f5; -} -.identicon.bg3 { - background-color: #e8eaf6; -} -.identicon.bg4 { - background-color: #e3f2fd; -} -.identicon.bg5 { - background-color: #e0f2f1; -} -.identicon.bg6 { - background-color: #fbe9e7; -} -.identicon.bg7 { - background-color: #eee; -} -.avatar-container { - overflow: hidden; - display: flex; -} -.avatar-container a { - width: 100%; - height: 100%; - display: flex; - text-decoration: none; -} -.avatar-container .avatar { - border-radius: 0; - border: 0; - height: auto; - width: 100%; - margin: 0; - align-self: center; -} -.avatar-container.s40 { - min-width: 40px; - min-height: 40px; -} -.rect-avatar { - border-radius: 2px; -} -.rect-avatar.s16 { - border-radius: 2px; -} -.rect-avatar.s18 { - border-radius: 2px; -} -.rect-avatar.s40 { - border-radius: 4px; -} -#content-body { - display: block; -} - -.tab-width-8 { - -moz-tab-size: 8; - tab-size: 8; -} -.gl-sr-only { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.gl-absolute { - position: absolute; -} -.gl-ml-3 { - margin-left: 0.5rem; -} -.gl-mx-0\! { - margin-left: 0 !important; - margin-right: 0 !important; -} - -@import "startup/cloaking"; -@include cloak-startup-scss(none); diff --git a/ee/app/assets/stylesheets/startup/startup-signin.scss b/ee/app/assets/stylesheets/startup/startup-signin.scss deleted file mode 100644 index ebb4f32054f72..0000000000000 --- a/ee/app/assets/stylesheets/startup/startup-signin.scss +++ /dev/null @@ -1,894 +0,0 @@ -// DO NOT EDIT! This is auto-generated from "yarn run generate:startup_css" -// Please see the feedback issue for more details and help: -// https://gitlab.com/gitlab-org/gitlab/-/issues/331812 -@charset "UTF-8"; -*, -*::before, -*::after { - box-sizing: border-box; -} -html { - font-family: sans-serif; - line-height: 1.15; -} -header { - display: block; -} -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #303030; - text-align: left; - background-color: #fff; -} -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} -h1, -h3 { - margin-top: 0; - margin-bottom: 0.25rem; -} -p { - margin-top: 0; - margin-bottom: 1rem; -} -address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; -} -a { - color: #007bff; - text-decoration: none; - background-color: transparent; -} -a:not([href]):not([class]) { - color: inherit; - text-decoration: none; -} -code { - font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", - "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; - font-size: 1em; -} -img { - vertical-align: middle; - border-style: none; -} -svg { - overflow: hidden; - vertical-align: middle; -} -label { - display: inline-block; - margin-bottom: 0.5rem; -} -input { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} -input { - overflow: visible; -} -[type="submit"]:not(:disabled) { - cursor: pointer; -} -[type="submit"]::-moz-focus-inner { - padding: 0; - border-style: none; -} -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; -} -summary { - display: list-item; - cursor: pointer; -} -[hidden] { - display: none !important; -} -h1, -h3, -.h1, -.h3 { - margin-bottom: 0.25rem; - font-weight: 600; - line-height: 1.2; - color: #303030; -} -h1, -.h1 { - font-size: 2.1875rem; -} -h3, -.h3 { - font-size: 1.53125rem; -} -hr { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - border: 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); -} -code { - font-size: 90%; - color: #1f1f1f; - word-wrap: break-word; -} -a > code { - color: inherit; -} -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} -@media (min-width: 576px) { - .container { - max-width: 540px; - } -} -@media (min-width: 768px) { - .container { - max-width: 720px; - } -} -@media (min-width: 992px) { - .container { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } -} -.row { - display: flex; - flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px; -} -.col, -.col-sm-5, -.col-sm-7, -.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-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; - } - .col-sm-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; - } - .col-sm-12 { - flex: 0 0 100%; - max-width: 100%; - } - .order-sm-1 { - order: 1; - } - .order-sm-12 { - order: 12; - } -} -.form-control { - display: block; - width: 100%; - height: 34px; - padding: 0.375rem 0.75rem; - font-size: 0.875rem; - font-weight: 400; - line-height: 1.5; - color: #303030; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #dbdbdb; - border-radius: 0.25rem; -} -@media (prefers-reduced-motion: reduce) { -} -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #303030; -} -.form-control::-ms-input-placeholder { - color: #5e5e5e; - opacity: 1; -} -.form-control::placeholder { - color: #5e5e5e; - opacity: 1; -} -.form-control:disabled { - background-color: #fafafa; - opacity: 1; -} -.form-group { - margin-bottom: 1rem; -} -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; -} -.form-row > .col, -.form-row > [class*="col-"] { - padding-right: 5px; - padding-left: 5px; -} -.btn { - display: inline-block; - font-weight: 400; - color: #303030; - text-align: center; - vertical-align: middle; - -moz-user-select: none; - user-select: none; - background-color: transparent; - border: 1px solid transparent; - padding: 0.375rem 0.75rem; - font-size: 1rem; - line-height: 20px; - border-radius: 0.25rem; -} -@media (prefers-reduced-motion: reduce) { -} -.btn:disabled { - opacity: 0.65; -} -.btn:not(:disabled):not(.disabled) { - cursor: pointer; -} -fieldset:disabled a.btn { - pointer-events: none; -} -.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; -} -.card { - position: relative; - display: flex; - flex-direction: column; - min-width: 0; - word-wrap: break-word; - background-color: #fff; - background-clip: border-box; - border: 1px solid #dbdbdb; - border-radius: 0.25rem; -} -.card > hr { - margin-right: 0; - margin-left: 0; -} -.d-block { - display: block !important; -} -.d-flex { - display: flex !important; -} -.flex-wrap { - flex-wrap: wrap !important; -} -.justify-content-between { - justify-content: space-between !important; -} -.align-items-center { - align-items: center !important; -} -.fixed-top { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; -} -.ml-2 { - margin-left: 0.5rem !important; -} -.mt-3 { - margin-top: 1rem !important; -} -.mb-3 { - margin-bottom: 1rem !important; -} -@media (min-width: 576px) { - .mt-sm-0 { - margin-top: 0 !important; - } -} -.text-center { - text-align: center !important; -} -.font-weight-normal { - font-weight: 400 !important; -} -.gl-form-input, -.gl-form-input.form-control { - background-color: #fff; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 0.875rem; - line-height: 1rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - height: auto; - color: #303030; - box-shadow: inset 0 0 0 1px #868686; - border-style: none; - appearance: none; - -moz-appearance: none; -} -.gl-form-input:not(.form-control-plaintext):-moz-read-only, -.gl-form-input.form-control:not(.form-control-plaintext):-moz-read-only { - background-color: #fafafa; - color: #868686; - box-shadow: inset 0 0 0 1px #dbdbdb; - cursor: not-allowed; -} -.gl-form-input:disabled, -.gl-form-input:not(.form-control-plaintext):read-only, -.gl-form-input.form-control:disabled, -.gl-form-input.form-control:not(.form-control-plaintext):read-only { - background-color: #fafafa; - color: #868686; - box-shadow: inset 0 0 0 1px #dbdbdb; - cursor: not-allowed; -} -.gl-form-input::-ms-input-placeholder, -.gl-form-input.form-control::-ms-input-placeholder { - color: #868686; -} -.gl-form-input::placeholder, -.gl-form-input.form-control::placeholder { - color: #868686; -} -.gl-button { - display: inline-flex; -} -.gl-button:not(.btn-link):active { - text-decoration: none; -} -.gl-button.gl-button { - border-width: 0; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - background-color: transparent; - line-height: 1rem; - color: #303030; - fill: currentColor; - box-shadow: inset 0 0 0 1px #bfbfbf; - justify-content: center; - align-items: center; - font-size: 0.875rem; - border-radius: 0.25rem; -} -.gl-button.gl-button .gl-button-icon { - height: 1rem; - width: 1rem; - flex-shrink: 0; - margin-right: 0.25rem; - top: auto; -} -.gl-button.gl-button.btn-default { - background-color: #fff; -} -.gl-button.gl-button.btn-default:active { - box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); - outline: none; - background-color: #dbdbdb; -} -.gl-button.gl-button.btn-confirm { - color: #fff; -} -.gl-button.gl-button.btn-confirm { - background-color: #1f75cb; - box-shadow: inset 0 0 0 1px #1068bf; -} -.gl-button.gl-button.btn-confirm:active { - box-shadow: inset 0 0 0 2px #033464, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); - outline: none; - background-color: #0b5cad; -} -body, -.form-control { - font-size: 0.875rem; -} -[type="submit"] { - cursor: pointer; -} -h1, -.h1, -h3, -.h3 { - margin-top: 20px; - margin-bottom: 10px; -} -a { - color: #1068bf; -} -hr { - overflow: hidden; -} -code { - padding: 2px 4px; - color: #1f1f1f; - background-color: #f0f0f0; - border-radius: 4px; -} -.code > code { - background-color: inherit; - padding: unset; -} -.hidden { - display: none !important; - visibility: hidden !important; -} -.hide { - display: none; -} -.label { - padding: 4px 5px; - font-size: 12px; - font-style: normal; - font-weight: 400; - display: inline-block; -} -svg { - vertical-align: baseline; -} -html { - overflow-y: scroll; -} -body { - text-decoration-skip: ink; -} -body.navless { - background-color: #fff !important; -} -.container { - padding-top: 0; - z-index: 5; -} -.container .content { - margin: 0; -} -@media (max-width: 575.98px) { - .container .content { - margin-top: 20px; - } -} -@media (max-width: 575.98px) { - .container .container .title { - padding-left: 15px !important; - } -} -.navless-container { - margin-top: 40px; - padding-top: 32px; -} -.btn { - border-radius: 4px; - font-size: 0.875rem; - font-weight: 400; - padding: 6px 10px; - background-color: #fff; - border-color: #dbdbdb; - color: #303030; - color: #303030; - white-space: nowrap; -} -.btn:active { - background-color: #f0f0f0; - box-shadow: none; -} -.btn:active { - background-color: #eaeaea; - border-color: #e3e3e3; - color: #303030; -} -.btn svg { - height: 15px; - width: 15px; -} -.btn svg:not(:last-child) { - margin-right: 5px; -} -.light { - color: #303030; -} -hr { - margin: 1.5rem 0; - border-top: 1px solid #eee; -} -.footer-links { - margin-bottom: 20px; -} -.footer-links a { - margin-right: 15px; -} -.flash-container { - margin: 0; - margin-bottom: 16px; - font-size: 14px; - position: relative; - z-index: 1; -} -.flash-container.sticky { - position: -webkit-sticky; - position: sticky; - top: 48px; - z-index: 251; -} -.flash-container.flash-container-page { - margin-bottom: 0; -} -.flash-container:empty { - margin: 0; -} -input { - border-radius: 0.25rem; - color: #303030; - background-color: #fff; -} -label { - font-weight: 600; -} -label.label-bold { - font-weight: 600; -} -.form-control { - border-radius: 4px; - padding: 6px 10px; -} -.form-control::-ms-input-placeholder { - color: #868686; -} -.form-control::placeholder { - color: #868686; -} -.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: 40px; - background: #fff; - border-bottom: 1px solid #f0f0f0; -} -.navbar-empty .tanuki-logo, -.navbar-empty .brand-header-logo { - max-height: 100%; -} -.tanuki-logo .tanuki-left-ear, -.tanuki-logo .tanuki-right-ear, -.tanuki-logo .tanuki-nose { - fill: #e24329; -} -.tanuki-logo .tanuki-left-eye, -.tanuki-logo .tanuki-right-eye { - fill: #fc6d26; -} -.tanuki-logo .tanuki-left-cheek, -.tanuki-logo .tanuki-right-cheek { - fill: #fca326; -} -.card { - margin-bottom: 16px; -} -input::-moz-placeholder { - color: #868686; - opacity: 1; -} -input::-ms-input-placeholder { - color: #868686; -} -input:-ms-input-placeholder { - color: #868686; -} -svg { - fill: currentColor; -} -.login-page .container { - max-width: 960px; -} -.login-page .navbar-gitlab .container { - max-width: none; -} -.login-page .flash-container { - margin-bottom: 16px; -} -.login-page .brand-holder { - font-size: 18px; - line-height: 1.5; -} -.login-page .brand-holder p { - font-size: 16px; - color: #888; -} -.login-page .brand-holder h3 { - font-size: 22px; -} -.login-page .brand-holder img { - max-width: 100%; - margin-bottom: 30px; -} -.login-page .brand-holder a { - font-weight: 600; -} -.login-page p { - font-size: 13px; -} -.login-page .login-box, -.login-page .omniauth-container { - box-shadow: 0 0 0 1px #dbdbdb; - border-radius: 0.25rem; - padding: 15px; -} -.login-page .login-box .login-heading h3, -.login-page .omniauth-container .login-heading h3 { - font-weight: 400; - line-height: 1.5; - margin: 0 0 10px; -} -.login-page .login-box .login-footer, -.login-page .omniauth-container .login-footer { - margin-top: 10px; -} -.login-page .login-box .login-footer p:last-child, -.login-page .omniauth-container .login-footer p:last-child { - margin-bottom: 0; -} -.login-page .login-box a.forgot, -.login-page .omniauth-container a.forgot { - float: right; - padding-top: 6px; -} -.login-page .login-box .nav .active a, -.login-page .omniauth-container .nav .active a { - background: transparent; -} -.login-page .login-box .login-body, -.login-page .omniauth-container .login-body { - font-size: 13px; -} -.login-page .login-box .login-body input + p, -.login-page .login-box .login-body input ~ p.field-validation, -.login-page .omniauth-container .login-body input + p, -.login-page .omniauth-container .login-body input ~ p.field-validation { - margin-top: 5px; -} -.login-page .login-box .login-body .username .validation-success, -.login-page .omniauth-container .login-body .username .validation-success { - color: #217645; -} -.login-page .login-box .login-body .username .validation-error, -.login-page .omniauth-container .login-body .username .validation-error { - color: #dd2b0e; -} -.login-page .omniauth-container { - border-radius: 0.25rem; - font-size: 13px; -} -.login-page .omniauth-container p { - margin: 0; -} -.login-page .omniauth-container form { - width: 48%; - padding: 0; - border: 0; - background: none; - margin-bottom: 16px; -} -@media (max-width: 991.98px) { - .login-page .omniauth-container form { - width: 100%; - } -} -.login-page .omniauth-container .omniauth-btn { - width: 100%; -} -.login-page .new-session-tabs { - display: flex; - box-shadow: 0 0 0 1px #dbdbdb; - border-top-right-radius: 4px; - border-top-left-radius: 4px; -} -.login-page .new-session-tabs.custom-provider-tabs { - flex-wrap: wrap; -} -.login-page .new-session-tabs.custom-provider-tabs li { - min-width: 85px; - flex-basis: auto; -} -.login-page .new-session-tabs.custom-provider-tabs li:nth-child(n + 5) { - border-top: 1px solid #dbdbdb; -} -.login-page .new-session-tabs.custom-provider-tabs a { - font-size: 16px; -} -.login-page .new-session-tabs li { - flex: 1; - text-align: center; - border-left: 1px solid #dbdbdb; -} -.login-page .new-session-tabs li:first-of-type { - border-left: 0; - border-top-left-radius: 4px; -} -.login-page .new-session-tabs li:last-of-type { - border-top-right-radius: 4px; -} -.login-page .new-session-tabs li:not(.active) { - background-color: #fafafa; -} -.login-page .new-session-tabs li a { - width: 100%; - font-size: 18px; -} -.login-page .new-session-tabs li.active > a { - cursor: default; -} -.login-page .form-control:active, -.login-page .form-control:focus { - background-color: #fff; -} -.login-page .submit-container { - margin-top: 16px; -} -.login-page input[type="submit"] { - margin-bottom: 0; - display: block; - width: 100%; -} -.login-page .devise-errors h2 { - margin-top: 0; - font-size: 14px; - color: #ae1800; -} -@media (max-width: 575.98px) { - .login-page .col-md-5.float-right { - float: none !important; - margin-bottom: 45px; - } -} -.devise-layout-html { - margin: 0; - padding: 0; - height: 100%; -} -.devise-layout-html body { - height: calc(100% - 51px); - margin: 0; - padding: 0; -} -.devise-layout-html body.navless { - height: calc(100% - 11px); -} -.devise-layout-html body .page-wrap { - min-height: 100%; - position: relative; -} -.devise-layout-html body .footer-container, -.devise-layout-html body hr.footer-fixed { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 40px; - background: #fff; -} -.devise-layout-html body .login-page-broadcast { - margin-top: 40px; -} -.devise-layout-html body .navless-container { - padding: 65px 15px; -} -@media (max-width: 575.98px) { - .devise-layout-html body .navless-container { - padding: 0 15px 65px; - } -} - -.gl-border-solid { - border-style: solid; -} -.gl-border-gray-100 { - border-color: #dbdbdb; -} -.gl-border-1 { - border-width: 1px; -} -.gl-rounded-base { - border-radius: 0.25rem; -} -.gl-text-green-600 { - color: #217645; -} -.gl-text-red-500 { - color: #dd2b0e; -} -.gl-display-flex { - display: flex; -} -.gl-align-items-center { - align-items: center; -} -.gl-p-2 { - padding: 0.25rem; -} -.gl-p-4 { - padding: 0.75rem; -} -.gl-mt-2 { - margin-top: 0.25rem; -} -.gl-mb-2 { - margin-bottom: 0.25rem; -} -.gl-mb-3 { - margin-bottom: 0.5rem; -} -.gl-mb-5 { - margin-bottom: 1rem; -} -.gl-text-left { - text-align: left; -} - -@import "startup/cloaking"; -@include cloak-startup-scss(none); diff --git a/package.json b/package.json index ef4b3dcb4aba0..25ff42eae2ecc 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,6 @@ "scripts": { "check-dependencies": "scripts/frontend/check_dependencies.sh", "block-dependencies": "node scripts/frontend/block_dependencies.js", - "check:startup_css": "scripts/frontend/startup_css/startup_css_changed.sh", "clean": "rm -rf public/assets tmp/cache/*-loader", "dev-server": "NODE_OPTIONS=\"--max-old-space-size=3584\" node scripts/frontend/webpack_dev_server.js", "file-coverage": "scripts/frontend/file_test_coverage.js", diff --git a/scripts/frontend/startup_css/constants.js b/scripts/frontend/startup_css/constants.js index a76092f8b4519..9b9dc522a8f43 100644 --- a/scripts/frontend/startup_css/constants.js +++ b/scripts/frontend/startup_css/constants.js @@ -27,6 +27,7 @@ const CSS_TO_REMOVE = [ /\.commit/, /\.md/, /\.with-performance-bar/, + /\.identicon/, ]; const APPLICATION_CSS_PREFIX = 'application'; const APPLICATION_DARK_CSS_PREFIX = 'application_dark'; @@ -35,55 +36,49 @@ const UTILITIES_DARK_CSS_PREFIX = 'application_utilities_dark'; // paths ----------------------------------------------------------------------- const ROOT = path.resolve(__dirname, '../../..'); -const ROOT_RAILS = IS_EE ? path.join(ROOT, 'ee') : ROOT; const FIXTURES_FOLDER_NAME = IS_EE ? 'fixtures-ee' : 'fixtures'; const FIXTURES_ROOT = path.join(ROOT, 'tmp/tests/frontend', FIXTURES_FOLDER_NAME); const PATH_SIGNIN_HTML = path.join(FIXTURES_ROOT, 'startup_css/sign-in.html'); const PATH_ASSETS = path.join(ROOT, 'tmp/startup_css_assets'); -const PATH_STARTUP_SCSS = path.join(ROOT_RAILS, 'app/assets/stylesheets/startup'); - -// helpers --------------------------------------------------------------------- -const createMainOutput = ({ outFile, cssKeys, type }) => ({ - outFile, - htmlPaths: [ - path.join(FIXTURES_ROOT, `startup_css/project-${type}.html`), - path.join(FIXTURES_ROOT, `startup_css/project-${type}-legacy-menu.html`), - path.join(FIXTURES_ROOT, `startup_css/project-${type}-legacy-sidebar.html`), - path.join(FIXTURES_ROOT, `startup_css/project-${type}-signed-out.html`), - ], - cssKeys, - purgeOptions: { - safelist: { - standard: [ - 'page-with-icon-sidebar', - 'sidebar-collapsed-desktop', - // We want to include the root dropdown-menu style since it should be hidden by default - 'dropdown-menu', - ], - // We want to include the identicon backgrounds - greedy: [/^bg[0-9]$/], - }, - }, -}); - +const PATH_STARTUP_SCSS = path.join(ROOT, 'app/assets/stylesheets/startup'); const OUTPUTS = [ - createMainOutput({ - type: 'general', + { outFile: 'startup-general', + htmlPaths: [ + path.join(FIXTURES_ROOT, 'startup_css/project-general.html'), + path.join(FIXTURES_ROOT, 'startup_css/project-general-legacy-menu.html'), + path.join(FIXTURES_ROOT, 'startup_css/project-general-signed-out.html'), + ], cssKeys: [APPLICATION_CSS_PREFIX, UTILITIES_CSS_PREFIX], - }), - createMainOutput({ - type: 'dark', + // We want to include the root dropdown-menu style since it should be hidden by default + purgeOptions: { + safelist: { + standard: ['dropdown-menu'], + }, + }, + }, + { outFile: 'startup-dark', + htmlPaths: [ + path.join(FIXTURES_ROOT, 'startup_css/project-dark.html'), + path.join(FIXTURES_ROOT, 'startup_css/project-dark-legacy-menu.html'), + path.join(FIXTURES_ROOT, 'startup_css/project-dark-signed-out.html'), + ], cssKeys: [APPLICATION_DARK_CSS_PREFIX, UTILITIES_DARK_CSS_PREFIX], - }), + // We want to include the root dropdown-menu styles since it should be hidden by default + purgeOptions: { + safelist: { + standard: ['dropdown-menu'], + }, + }, + }, { outFile: 'startup-signin', htmlPaths: [PATH_SIGNIN_HTML], cssKeys: [APPLICATION_CSS_PREFIX, UTILITIES_CSS_PREFIX], purgeOptions: { safelist: { - standard: ['fieldset', 'hidden'], + standard: ['fieldset'], deep: [/login-page$/], }, }, diff --git a/scripts/frontend/startup_css/startup_css_changed.sh b/scripts/frontend/startup_css/startup_css_changed.sh deleted file mode 100755 index b1df97f2f42c2..0000000000000 --- a/scripts/frontend/startup_css/startup_css_changed.sh +++ /dev/null @@ -1,36 +0,0 @@ -#!/bin/sh - -echo "-----------------------------------------------------------" -echo "If you are run into any issues with Startup CSS generation," -echo "please check out the feedback issue:" -echo "" -echo "https://gitlab.com/gitlab-org/gitlab/-/issues/331812" -echo "-----------------------------------------------------------" - -startup_glob="*stylesheets/startup*" - -echo "Staging changes to '${startup_glob}' so we can check for untracked files..." -git add ${startup_glob} - -if [ -n "$(git diff HEAD --name-only -- ${startup_glob})" ]; then - diff=$(git diff HEAD -- ${startup_glob}) - cat <<EOF - -Startup CSS changes detected! - -It looks like there have been recent changes which require -regenerating the Startup CSS files. - -Consider one of the following options: - - 1. Regenerating locally with "yarn run generate:startup_css". - 2. Copy and apply the following diff: - ------ start diff ----- -$diff - ------ end diff ------- -EOF - - exit 1 -fi diff --git a/scripts/frontend/startup_css/write_startup_scss.js b/scripts/frontend/startup_css/write_startup_scss.js index 245681bada3dc..3754b95cefd7d 100644 --- a/scripts/frontend/startup_css/write_startup_scss.js +++ b/scripts/frontend/startup_css/write_startup_scss.js @@ -9,7 +9,7 @@ const buildFinalContent = (raw) => { // https://gitlab.com/gitlab-org/gitlab/-/issues/331812 @charset "UTF-8"; ${raw} -@import 'startup/cloaking'; +@import 'cloaking'; @include cloak-startup-scss(none); `; diff --git a/spec/frontend/fixtures/startup_css.rb b/spec/frontend/fixtures/startup_css.rb index 003f7b768ddeb..134d29d3106d1 100644 --- a/spec/frontend/fixtures/startup_css.rb +++ b/spec/frontend/fixtures/startup_css.rb @@ -11,13 +11,12 @@ before(:all) do stub_feature_flags(combined_menu: true) - stub_feature_flags(sidebar_refactor: true) clean_frontend_fixtures('startup_css/') end shared_examples 'startup css project fixtures' do |type| let(:user) { create(:user, :admin) } - let(:project) { create(:project, :public, :repository, description: 'Code and stuff', creator: user) } + let(:project) { create(:project, :public, :repository, description: 'Code and stuff', avatar: fixture_file_upload('spec/fixtures/dk.png', 'image/png'), creator: user) } before do sign_in(user) @@ -43,17 +42,6 @@ expect(response).to be_successful end - it "startup_css/project-#{type}-legacy-sidebar.html" do - stub_feature_flags(sidebar_refactor: false) - - get :show, params: { - namespace_id: project.namespace.to_param, - id: project - } - - expect(response).to be_successful - end - it "startup_css/project-#{type}-signed-out.html" do sign_out(user) -- GitLab