diff --git a/src/app/shared/alert/alert.component.scss b/src/app/shared/alert/alert.component.scss index 1a70081367a..907edae24bf 100644 --- a/src/app/shared/alert/alert.component.scss +++ b/src/app/shared/alert/alert.component.scss @@ -1,3 +1,9 @@ -.close:focus { - outline: none !important; +.close { + opacity: 0.75; + &:focus { + outline: none !important; + } +} +button.close { + opacity: 0.6; } diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss index 06c46b0f5d0..ecfc25fee06 100644 --- a/src/app/shared/notifications/notification/notification.component.scss +++ b/src/app/shared/notifications/notification/notification.component.scss @@ -5,7 +5,8 @@ } .close { - outline: none !important + outline: none !important; + opacity: 0.8; } .notification-icon { diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss index b1cfa841f83..1240f356786 100644 --- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss @@ -37,4 +37,10 @@ margin: 0 calc(-1 * (var(--ds-slider-handle-width) / 2)); width: calc(100% + var(--ds-slider-handle-width)); } + .noUi-handle { + border-color: var(--ds-slider-handle-color); + &::before, &::after { + background-color: var(--ds-slider-handle-color); + } + } } diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss index 69b288905a1..f5051608fa7 100644 --- a/src/styles/_bootstrap_variables.scss +++ b/src/styles/_bootstrap_variables.scss @@ -34,10 +34,9 @@ $green: #94BA65 !default; $cyan: #006666 !default; $yellow: #ec9433 !default; $red: #CF4444 !default; +$teal: #1F7293 !default; $dark: darken($blue, 17%) !default; - - $theme-colors: ( primary: $blue, secondary: $gray-700, @@ -49,7 +48,7 @@ $theme-colors: ( dark: $dark ) !default; /* Fonts */ -$link-color: map-get($theme-colors, info) !default; +$link-color: $teal !default; $navbar-dark-color: rgba(white, .5) !default; $navbar-light-color: rgba(black, .5) !default; diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index ad9a074e1b4..c10a875f571 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -81,12 +81,13 @@ --ds-home-news-background-color: #{$gray-200}; --ds-breadcrumb-bg: #{$gray-200} !important; - --ds-breadcrumb-link-color: #{$cyan}; + --ds-breadcrumb-link-color: #{darken($cyan, 10%)}; --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)}; --ds-breadcrumb-max-length: 200px; - --ds-slider-color: #{$green}; + --ds-slider-color: #{darken($green, 20%)}; --ds-slider-handle-width: 18px; + --ds-slider-handle-color: #{darken($blue, 17%)}; --ds-search-form-scope-max-width: 150px; diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index b6b2d143d42..584d9269d17 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -220,50 +220,50 @@ ds-dynamic-form-control-container.d-none { } .badge-validation { - background-color: #{map-get($theme-colors, warning)}; + background-color: #{map-get($theme-colors, warning)}; } .badge-waiting-controller { - background-color: #{map-get($theme-colors, info)}; + background-color: #{map-get($theme-colors, info)}; } .badge-workspace { - background-color: #{map-get($theme-colors, primary)}; + background-color: #{map-get($theme-colors, primary)}; } .badge-archived { - background-color: #{map-get($theme-colors, success)}; + background-color: darken($green, 25); } .badge-workflow { - background-color: #{map-get($theme-colors, info)}; + background-color: #{map-get($theme-colors, info)}; } .badge-item-type { - background-color: #{map-get($theme-colors, info)}; + background-color: #{map-get($theme-colors, info)}; } .visually-hidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; -} - -ul.dso-edit-menu-dropdown > li .nav-item.nav-link { - // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons) - padding: 0; - display: inline; + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +ul.dso-edit-menu-dropdown>li .nav-item.nav-link { + // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons) + padding: 0; + display: inline; } .table th, .table td { - vertical-align: middle; + vertical-align: middle; } /* Flexbox gap */ @@ -291,29 +291,158 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link { .pt-0\.5 { - padding-top: 0.125rem !important; + padding-top: 0.125rem !important; } .pr-0\.5 { - padding-right: 0.125rem !important; + padding-right: 0.125rem !important; } .pb-0\.5 { - padding-bottom: 0.125rem !important; + padding-bottom: 0.125rem !important; } .pl-0\.5 { - padding-left: 0.125rem !important; + padding-left: 0.125rem !important; } .px-0\.5 { - padding-left: 0.125rem !important; - padding-right: 0.125rem !important; + padding-left: 0.125rem !important; + padding-right: 0.125rem !important; } .py-0\.5 { - padding-top: 0.125rem !important; - padding-bottom: 0.125rem !important; + padding-top: 0.125rem !important; + padding-bottom: 0.125rem !important; +} + +.btn { + &:focus { + outline-offset: 2px !important; + outline-style: solid !important; + outline-width: 2px !important; + box-shadow: none !important; + } + &:disabled { + opacity: 0.7; + } + &.btn-success { + background-color: darken($success, 20%); + border-color: darken($success, 20%); + &:hover { + background-color: darken($success, 30%); + border-color: darken($success, 30%); + } + &:focus { + outline-color: darken($success, 20%); + } + } + &.btn-outline-success { + border-color: darken($success, 20%); + color: darken($success, 20%); + + &:hover { + background-color: darken($success, 30%); + color: $white; + } + &:focus { + outline-color: darken($success, 20%); + } + } + &.btn-warning { + background-color: darken($warning, 20%); + &:hover { + background-color: darken($warning, 30%); + } + &:disabled { + background-color: transparent; + } + &:focus { + outline-color: darken($warning, 22%); + } + } + + &.btn-outline-warning { + border-color: darken($warning, 20%); + color: darken($warning, 20%); + &:hover { + background-color: darken($warning, 30%); + color: $white; + } + &:disabled { + background-color: transparent; + + &:hover { + color: darken($warning, 20%); + } + } + :focus { + outline-color: darken($warning, 22%); + } + &:not(:disabled):hover { + background-color: darken($warning, 22%); + } + } + + &.btn-secondary { + &:focus { + outline-color: darken($secondary, 20%); + } + } + + &.btn-danger:focus, &.btn-outline-danger:focus { + outline-color: darken($danger, 20%); + } + + &.btn-primary:focus, &.btn-outline-primary:focus { + outline-color: darken($primary, 5%); + } +} + +dynamic-ng-bootstrap-checkbox .custom-control-input:focus ~ .custom-control-label::before { + outline: 2px solid $gray-700 !important; + box-shadow: none !important; + outline-offset: 2px !important; +} + +dynamic-ng-bootstrap-checkbox .custom-control-label::before { + border-color: $gray-700; +} + +.text-warning { + color: darken($warning, 10%) !important; +} + +.text-success { + color: darken($success, 11%) !important; +} + +ngb-accordion { + a.close { + opacity: 0.75; + } + a.close:not(:disabled):not(.disabled):hover { + opacity: 0.9; + } +} + +.form-control, .page-link { + &:disabled::placeholder { + color: lighten($gray-700, 10%); + } + &:focus { + box-shadow: none; + outline: 2px solid lighten($gray-700, 10%); + outline-offset: 2px !important; + } +} + +.alert-success { + color: darken($success, 22%); +} + +.alert-danger { + color: darken($danger, 22%); } // Margin utility classes based on DSpace content spacing @@ -322,4 +451,4 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link { .my-cs { margin-top: var(--ds-content-spacing); margin-bottom: var(--ds-content-spacing); } .mt-ncs { margin-top: calc(var(--ds-content-spacing) * -1); } .mb-ncs { margin-bottom: calc(var(--ds-content-spacing) * -1); } -.my-ncs { margin-top: calc(var(--ds-content-spacing) * -1); margin-bottom: calc(var(--ds-content-spacing) * -1); } +.my-ncs { margin-top: calc(var(--ds-content-spacing) * -1); margin-bottom: calc(var(--ds-content-spacing) * -1); } \ No newline at end of file diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss index b5799c97496..aaa27f6f9e7 100644 --- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss +++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss @@ -12,7 +12,7 @@ $navbar-dark-color: #FFFFFF; /* Reassign color vars to semantic color scheme */ $blue: #2b4e72 !default; $green: #92C642 !default; -$cyan: #207698 !default; +$cyan: #1e6f90 !default; $yellow: #ec9433 !default; $red: #CF4444 !default; $dark: #43515f !default;