debian-mirror-gitlab/app/assets/stylesheets/themes/theme_helper.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

253 lines
5.1 KiB
SCSS
Raw Normal View History

2020-11-24 15:15:51 +05:30
@import '../page_bundles/mixins_and_variables_and_functions';
/**
* Styles the GitLab application with a specific color theme
*/
@mixin gitlab-theme(
$search-and-nav-links,
2022-03-02 08:16:31 +05:30
$accent,
2020-11-24 15:15:51 +05:30
$border-and-box-shadow,
2022-10-11 01:57:18 +05:30
$navbar-theme-color,
$navbar-theme-contrast-color
2020-11-24 15:15:51 +05:30
) {
2022-03-02 08:16:31 +05:30
// Set custom properties
--gl-theme-accent: #{$accent};
2022-10-11 01:57:18 +05:30
$search-and-nav-links-a20: rgba($search-and-nav-links, 0.2);
$search-and-nav-links-a30: rgba($search-and-nav-links, 0.3);
$search-and-nav-links-a40: rgba($search-and-nav-links, 0.4);
$search-and-nav-links-a80: rgba($search-and-nav-links, 0.8);
2020-11-24 15:15:51 +05:30
// Header
.navbar-gitlab {
2022-10-11 01:57:18 +05:30
background-color: $navbar-theme-color;
2020-11-24 15:15:51 +05:30
.navbar-collapse {
color: $search-and-nav-links;
}
.container-fluid {
.navbar-toggler {
border-left: 1px solid lighten($border-and-box-shadow, 10%);
2021-09-04 01:27:46 +05:30
color: $search-and-nav-links;
2020-11-24 15:15:51 +05:30
}
}
.navbar-sub-nav,
.navbar-nav {
> li {
> a,
> button {
&:hover,
&:focus {
2022-10-11 01:57:18 +05:30
background-color: $search-and-nav-links-a20;
2020-11-24 15:15:51 +05:30
}
}
&.active,
&.dropdown.show {
> a,
> button {
2022-10-11 01:57:18 +05:30
color: $navbar-theme-color;
background-color: $navbar-theme-contrast-color;
2020-11-24 15:15:51 +05:30
}
}
&.line-separator {
2022-10-11 01:57:18 +05:30
border-left: 1px solid $search-and-nav-links-a20;
2020-11-24 15:15:51 +05:30
}
}
}
.navbar-sub-nav {
color: $search-and-nav-links;
}
.nav {
> li {
color: $search-and-nav-links;
2022-05-07 20:08:51 +05:30
&.header-search-new {
2022-10-11 01:57:18 +05:30
color: $gray-900;
2022-05-07 20:08:51 +05:30
}
2020-11-24 15:15:51 +05:30
> a {
2021-02-22 17:27:13 +05:30
.notification-dot {
2022-10-11 01:57:18 +05:30
border: 2px solid $navbar-theme-color;
2021-02-22 17:27:13 +05:30
}
&.header-help-dropdown-toggle {
.notification-dot {
background-color: $search-and-nav-links;
}
}
2020-11-24 15:15:51 +05:30
&.header-user-dropdown-toggle {
.header-user-avatar {
border-color: $search-and-nav-links;
}
}
&:hover,
&:focus {
@include media-breakpoint-up(sm) {
2022-10-11 01:57:18 +05:30
background-color: $search-and-nav-links-a20;
2020-11-24 15:15:51 +05:30
}
svg {
fill: currentColor;
}
2021-02-22 17:27:13 +05:30
.notification-dot {
will-change: border-color, background-color;
2022-10-11 01:57:18 +05:30
border-color: adjust-color($navbar-theme-color, $red: 33, $green: 33, $blue: 33);
2020-11-24 15:15:51 +05:30
}
2021-02-22 17:27:13 +05:30
&.header-help-dropdown-toggle .notification-dot {
background-color: $white;
}
2020-11-24 15:15:51 +05:30
}
}
&.active > a,
&.dropdown.show > a {
2022-10-11 01:57:18 +05:30
color: $navbar-theme-color;
background-color: $navbar-theme-contrast-color;
2020-11-24 15:15:51 +05:30
&:hover {
svg {
2022-10-11 01:57:18 +05:30
fill: $navbar-theme-color;
2020-11-24 15:15:51 +05:30
}
}
2021-02-22 17:27:13 +05:30
.notification-dot {
2020-11-24 15:15:51 +05:30
border-color: $white;
}
2021-02-22 17:27:13 +05:30
&.header-help-dropdown-toggle {
.notification-dot {
2022-10-11 01:57:18 +05:30
background-color: $navbar-theme-color;
2021-02-22 17:27:13 +05:30
}
}
2020-11-24 15:15:51 +05:30
}
.impersonated-user,
.impersonated-user:hover {
svg {
2022-10-11 01:57:18 +05:30
fill: $navbar-theme-color;
2020-11-24 15:15:51 +05:30
}
}
}
}
}
.navbar .title {
> a {
&:hover,
&:focus {
2022-10-11 01:57:18 +05:30
background-color: $search-and-nav-links-a20;
2020-11-24 15:15:51 +05:30
}
}
}
2021-11-11 11:23:49 +05:30
.header-search {
2022-10-11 01:57:18 +05:30
background-color: $search-and-nav-links-a20 !important;
2022-07-16 23:28:13 +05:30
border-radius: $border-radius-default;
2021-11-11 11:23:49 +05:30
&:hover {
2022-10-11 01:57:18 +05:30
background-color: $search-and-nav-links-a30 !important;
2021-11-11 11:23:49 +05:30
}
2022-05-07 20:08:51 +05:30
svg.gl-search-box-by-type-search-icon {
2022-10-11 01:57:18 +05:30
color: $search-and-nav-links-a80;
2021-11-11 11:23:49 +05:30
}
input {
background-color: transparent;
2022-10-11 01:57:18 +05:30
color: $search-and-nav-links-a80;
box-shadow: inset 0 0 0 1px $search-and-nav-links-a40;
2021-11-11 11:23:49 +05:30
&::placeholder {
2022-10-11 01:57:18 +05:30
color: $search-and-nav-links-a80;
2021-11-11 11:23:49 +05:30
}
&:focus,
&:active {
&::placeholder {
2022-03-02 08:16:31 +05:30
color: $gray-400;
2021-11-11 11:23:49 +05:30
}
}
}
2022-06-21 17:19:12 +05:30
2022-08-27 11:52:29 +05:30
.keyboard-shortcut-helper {
color: $search-and-nav-links;
2022-10-11 01:57:18 +05:30
background-color: $search-and-nav-links-a20;
2022-06-21 17:19:12 +05:30
}
2021-11-11 11:23:49 +05:30
}
2020-11-24 15:15:51 +05:30
.search {
form {
2022-10-11 01:57:18 +05:30
background-color: $search-and-nav-links-a20;
2020-11-24 15:15:51 +05:30
&:hover {
2022-10-11 01:57:18 +05:30
background-color: $search-and-nav-links-a30;
2020-11-24 15:15:51 +05:30
}
}
.search-input::placeholder {
2022-10-11 01:57:18 +05:30
color: $search-and-nav-links-a80;
2020-11-24 15:15:51 +05:30
}
.search-input-wrap {
.search-icon,
.clear-icon {
2022-10-11 01:57:18 +05:30
fill: $search-and-nav-links-a80;
2020-11-24 15:15:51 +05:30
}
}
&.search-active {
form {
background-color: $white;
}
.search-input-wrap {
.search-icon {
2022-10-11 01:57:18 +05:30
fill: $search-and-nav-links-a80;
2020-11-24 15:15:51 +05:30
}
}
}
}
// Sidebar
2021-09-30 23:02:18 +05:30
.nav-sidebar li.active > a {
2022-10-11 01:57:18 +05:30
color: $gray-900;
2020-11-24 15:15:51 +05:30
}
2021-09-30 23:02:18 +05:30
.nav-sidebar {
.fly-out-top-item {
a,
a:hover,
&.active a,
.fly-out-top-item-container {
2021-11-18 22:05:49 +05:30
background-color: var(--gray-100, $gray-50);
color: var(--gray-900, $gray-900);
2021-09-30 23:02:18 +05:30
}
}
2020-11-24 15:15:51 +05:30
}
.branch-header-title {
color: $border-and-box-shadow;
}
.ide-sidebar-link {
&.active {
color: $border-and-box-shadow;
&.is-right {
box-shadow: inset -3px 0 $border-and-box-shadow;
}
}
}
}