diff options
Diffstat (limited to 'app/assets/stylesheets/startup/startup-dark.scss')
-rw-r--r-- | app/assets/stylesheets/startup/startup-dark.scss | 831 |
1 files changed, 117 insertions, 714 deletions
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 00a6ee579d8..a497f56f3b8 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -13,6 +13,10 @@ body.gl-dark { --orange-400: #ab6100; --gl-text-color: #fafafa; --border-color: #4f4f4f; + --black: #fff; +} +.nav-sidebar li.active { + box-shadow: none; } :root { --white: #333; @@ -145,10 +149,6 @@ h1 { color: transparent; text-shadow: 0 0 0 #fafafa; } -.form-control::-ms-input-placeholder { - color: #bfbfbf; - opacity: 1; -} .form-control::placeholder { color: #bfbfbf; opacity: 1; @@ -175,7 +175,6 @@ h1 { color: #fafafa; text-align: center; vertical-align: middle; - -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -459,8 +458,7 @@ a { 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 { +.toggle-sidebar-button .icon-chevron-double-lg-left { color: #999; } svg { @@ -546,7 +544,7 @@ body { max-width: 500px; margin-top: 4px; margin-bottom: 24px; - font-size: 14px; + font-size: 0.875rem; font-weight: 400; padding: 8px 0; background-color: #333; @@ -626,9 +624,6 @@ input { border-radius: 4px; padding: 6px 10px; } -.form-control::-ms-input-placeholder { - color: #868686; -} .form-control::placeholder { color: #868686; } @@ -933,6 +928,7 @@ input { .context-header .sidebar-context-title { overflow: hidden; text-overflow: ellipsis; + color: #fafafa; } @media (min-width: 768px) { .page-with-contextual-sidebar { @@ -951,20 +947,14 @@ input { } .nav-sidebar { position: fixed; + bottom: 0; + left: 0; 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: 48px; } @@ -972,7 +962,8 @@ input { overflow-x: hidden; } .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), -.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { +.nav-sidebar.sidebar-collapsed-desktop .nav-item-name, +.nav-sidebar.sidebar-collapsed-desktop .collapse-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -984,479 +975,29 @@ input { 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: 48px; - } - .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: 48px; - } - .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: 47px; - } - .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: 48px; -} -.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: 47px; -} -.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 .sidebar-sub-level-items { - box-shadow: none; - border: 1px solid #404040; -} -body.sidebar-refactoring.gl-dark - .sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar - .avatar.s32 { - color: #333; -} -body.sidebar-refactoring.gl-dark .nav-sidebar li a, -body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring.gl-dark - .toggle-sidebar-button - .icon-chevron-double-lg-left, -body.sidebar-refactoring.gl-dark - .toggle-sidebar-button - .icon-chevron-double-lg-right, -body.sidebar-refactoring.gl-dark - .sidebar-top-level-items - .context-header - a - .sidebar-context-title, -body.sidebar-refactoring.gl-dark - .nav-sidebar-inner-scroll - > div.context-header - a - .sidebar-context-title, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item.active - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - .fly-out-top-item-container { - color: #c4c4c4; -} -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item.active - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - .fly-out-top-item-container { - margin-top: 0; -} -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item.active - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item - .fly-out-top-item-container { - background: #333; - color: #c4c4c4; -} -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item - a::before, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item.active - a::before, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item - .fly-out-top-item-container::before { - border-right-color: #333; -} -body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items { - background-color: #333; -} -body.sidebar-refactoring.ui-indigo - .nav-sidebar - li.active:not(.fly-out-top-item) - > a { - color: #2f2a6b; -} -body.sidebar-refactoring.ui-indigo - .nav-sidebar - li.active - .nav-icon-container - svg { - fill: #2f2a6b; -} -body.sidebar-refactoring .nav-sidebar { - box-shadow: none; -} -body.sidebar-refactoring .nav-sidebar li.active { - background-color: transparent; - box-shadow: none !important; -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 48px; - } -} -@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: 48px; - } -} -body.sidebar-refactoring .nav-sidebar { - position: fixed; - bottom: 0; - left: 0; - z-index: 600; - width: 220px; - top: 40px; - background-color: #303030; - transform: translate3d(0, 0, 0); -} -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { - width: 48px; -} -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, -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text { - 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: unset; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .fly-out-top-item:not(.divider) { +.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) { display: block !important; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .avatar-container { +.nav-sidebar.sidebar-collapsed-desktop .avatar-container { margin: 0 auto; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - li.active:not(.fly-out-top-item) - > a { +.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a { background-color: rgba(41, 41, 97, 0.08); } -body.sidebar-refactoring .nav-sidebar a { +.nav-sidebar a { text-decoration: none; - color: #2f2a6b; + color: #fafafa; } -body.sidebar-refactoring .nav-sidebar li { +.nav-sidebar li { white-space: nowrap; } -body.sidebar-refactoring .nav-sidebar li .nav-item-name { +.nav-sidebar li .nav-item-name { flex: 1; } -body.sidebar-refactoring .nav-sidebar li > a, -body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { +.nav-sidebar li > a, +.nav-sidebar li > .fly-out-top-item-container { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; @@ -1468,49 +1009,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { line-height: 1rem; margin: 1px 4px; } -body.sidebar-refactoring .nav-sidebar li.active > a { +.nav-sidebar li.active > a { font-weight: 600; } -body.sidebar-refactoring - .nav-sidebar - li.active:not(.fly-out-top-item) - > a:not(.has-sub-items) { +.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { background-color: rgba(41, 41, 97, 0.08); } -body.sidebar-refactoring .nav-sidebar ul { +.nav-sidebar ul { padding-left: 0; list-style: none; } @media (max-width: 767.98px) { - body.sidebar-refactoring .nav-sidebar { + .nav-sidebar { left: -220px; } } -body.sidebar-refactoring .nav-sidebar .nav-icon-container { +.nav-sidebar .nav-icon-container { display: flex; margin-right: 8px; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item { display: none; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1522,30 +1056,26 @@ body.sidebar-refactoring cursor: default; pointer-events: none; font-size: 0.75rem; - background-color: #2f2a6b; - color: #333; margin-top: -0.25rem; margin-bottom: -0.25rem; margin-top: 0; position: relative; - background-color: #fff; + color: #333; + background: var(--black, #fff); } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a strong, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a strong, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1553,20 +1083,17 @@ body.sidebar-refactoring strong { font-weight: 400; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a::before, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a::before, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1582,34 +1109,18 @@ body.sidebar-refactoring border-top: 0.25rem solid transparent; border-bottom: 0.25rem solid transparent; border-right: 0.25rem solid #fff; + border-right-color: var(--black, #fff); } -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items { - margin-top: -0.25rem; -} -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item { +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item { display: none; } -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a, +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item @@ -1621,30 +1132,21 @@ body.sidebar-refactoring cursor: default; pointer-events: none; font-size: 0.75rem; - background-color: #2f2a6b; - color: #333; margin-top: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media (min-width: 768px) and (max-width: 1199px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { + .nav-sidebar:not(.sidebar-expanded-mobile) { width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-sidebar-inner-scroll { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .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, - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .collapse-text { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name, + .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1655,44 +1157,28 @@ body.sidebar-refactoring white-space: nowrap; width: 1px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - > a { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { min-height: unset; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .fly-out-top-item:not(.divider) { + .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) { display: block !important; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .avatar-container { + .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { margin: 0 auto; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) li.active:not(.fly-out-top-item) > a { background-color: rgba(41, 41, 97, 0.08); } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-context-title { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1703,58 +1189,45 @@ body.sidebar-refactoring white-space: nowrap; width: 1px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: auto; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 0.25rem; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .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 { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { margin-right: 0; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button { + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text { display: none; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { transform: rotate(180deg); - display: block; margin: 0; } } -body.sidebar-refactoring .nav-sidebar-inner-scroll { +.nav-sidebar-inner-scroll { height: 100%; width: 100%; overflow: auto; } -body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header { +.nav-sidebar-inner-scroll > div.context-header { margin-top: 0.25rem; } -body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { +.nav-sidebar-inner-scroll > div.context-header a { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; @@ -1769,78 +1242,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { margin-bottom: 0.25rem; margin-top: 0; } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container { +.nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container.rect-avatar { +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar { border-style: none; } -body.sidebar-refactoring - .nav-sidebar-inner-scroll +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar .avatar.s32 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .sidebar-context-title { - color: #2f2a6b; -} -body.sidebar-refactoring .sidebar-top-level-items { +.sidebar-top-level-items { margin-top: 0.25rem; margin-bottom: 60px; } -body.sidebar-refactoring .sidebar-top-level-items .context-header a { +.sidebar-top-level-items .context-header a { padding: 0.25rem; margin-bottom: 0.25rem; margin-top: 0; } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .avatar-container { +.sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar { +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar { border-style: none; } -body.sidebar-refactoring - .sidebar-top-level-items +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .sidebar-context-title { - color: #2f2a6b; -} -body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { +.sidebar-top-level-items > li .badge.badge-pill { border-radius: 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; @@ -1849,29 +1290,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { background-color: #064787; color: #9dc7f1; } -body.sidebar-refactoring - .sidebar-top-level-items +.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 { +.sidebar-top-level-items > li.active .badge.badge-pill { font-weight: 400; color: #9dc7f1; } -body.sidebar-refactoring .sidebar-sub-level-items { +.sidebar-sub-level-items { padding-top: 0; padding-bottom: 0; display: none; } -body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { +.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 { +.toggle-sidebar-button, +.close-nav-button { height: 48px; padding: 0 16px; background-color: #303030; @@ -1881,31 +1318,28 @@ body.sidebar-refactoring .close-nav-button { align-items: center; background-color: #303030; border-top: 1px solid #404040; - color: #2f2a6b; position: fixed; bottom: 0; width: 220px; } -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 { +.toggle-sidebar-button .collapse-text, +.toggle-sidebar-button .icon-chevron-double-lg-left, +.close-nav-button .collapse-text, +.close-nav-button .icon-chevron-double-lg-left { color: inherit; } -body.sidebar-refactoring .collapse-text { +.collapse-text { white-space: nowrap; overflow: hidden; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { +.sidebar-collapsed-desktop .context-header { height: 60px; width: 48px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { +.sidebar-collapsed-desktop .context-header a { padding: 10px 4px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { +.sidebar-collapsed-desktop .sidebar-context-title { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1916,47 +1350,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { white-space: nowrap; width: 1px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { +.sidebar-collapsed-desktop .context-header { height: auto; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { +.sidebar-collapsed-desktop .context-header a { padding: 0.25rem; } -body.sidebar-refactoring - .sidebar-collapsed-desktop +.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 { +.sidebar-collapsed-desktop .nav-icon-container { margin-right: 0; } -body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { +.sidebar-collapsed-desktop .toggle-sidebar-button { width: 48px; } -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .collapse-text { +.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text { display: none; } -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-left { +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { transform: rotate(180deg); - display: block; margin: 0; } -body.sidebar-refactoring .close-nav-button { +.close-nav-button { display: none; } @media (max-width: 767.98px) { - body.sidebar-refactoring .close-nav-button { + .close-nav-button { display: flex; } - body.sidebar-refactoring .toggle-sidebar-button { + .toggle-sidebar-button { display: none; } } @@ -2037,7 +1463,6 @@ svg.s16 { top: 4px; } .search .search-input-wrap .search-icon { - -moz-user-select: none; user-select: none; } .search .search-input-wrap .clear-icon { @@ -2066,7 +1491,7 @@ svg.s16 { float: left; margin-right: 16px; border-radius: 50%; - border: 1px solid #333; + border: 1px solid rgba(255, 255, 255, 0.08); } .avatar.s16, .avatar-container.s16 { @@ -2086,12 +1511,6 @@ svg.s16 { height: 32px; margin-right: 8px; } -.avatar.s40, -.avatar-container.s40 { - width: 40px; - height: 40px; - margin-right: 8px; -} .avatar { transition-property: none; width: 40px; @@ -2108,8 +1527,8 @@ svg.s16 { .identicon { text-align: center; vertical-align: top; - color: #525252; - background-color: #eee; + color: #fafafa; + background-color: #303030; } .identicon.s16 { font-size: 10px; @@ -2119,30 +1538,26 @@ svg.s16 { font-size: 14px; line-height: 32px; } -.identicon.s40 { - font-size: 16px; - line-height: 38px; -} .identicon.bg1 { - background-color: #ffebee; + background-color: #660e00; } .identicon.bg2 { - background-color: #f3e5f5; + background-color: #f4f0ff; } .identicon.bg3 { - background-color: #e8eaf6; + background-color: #f1f1ff; } .identicon.bg4 { - background-color: #e3f2fd; + background-color: #033464; } .identicon.bg5 { - background-color: #e0f2f1; + background-color: #0a4020; } .identicon.bg6 { - background-color: #fbe9e7; + background-color: #5c2900; } .identicon.bg7 { - background-color: #eee; + background-color: #303030; } .avatar-container { overflow: hidden; @@ -2162,10 +1577,6 @@ svg.s16 { margin: 0; align-self: center; } -.avatar-container.s40 { - min-width: 40px; - min-height: 40px; -} .rect-avatar { border-radius: 2px; } @@ -2176,23 +1587,18 @@ svg.s16 { border-radius: 2px; } .rect-avatar.s32, -body.sidebar-refactoring - .nav-sidebar-inner-scroll +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar .avatar.s32, -body.sidebar-refactoring - .sidebar-top-level-items +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 { border-radius: 4px; } -.rect-avatar.s40 { - border-radius: 4px; -} body.gl-dark .navbar-gitlab { background-color: #fafafa; } @@ -2253,9 +1659,6 @@ body.gl-dark 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); } @@ -2263,17 +1666,14 @@ 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 .nav-sidebar .fly-out-top-item a, +body.gl-dark .nav-sidebar .fly-out-top-item.active a, +body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container { + background-color: #2f2a6b; + color: var(--black, #333); } body.gl-dark .logo-text svg { fill: var(--gl-text-color); @@ -2373,6 +1773,9 @@ body.gl-dark { --black: #fff; --svg-status-bg: #333; } +.nav-sidebar li.active { + box-shadow: none; +} .tab-width-8 { -moz-tab-size: 8; tab-size: 8; |