From 4c47418d9018e3d3c8bc608d730771fd2e730610 Mon Sep 17 00:00:00 2001
From: "kazzer@ub.uni-leipzig.de" <kazzer@ub.uni-leipzig.de>
Date: Fri, 9 Jul 2021 13:31:30 +0200
Subject: [PATCH] refs #20244 [fid_adlr] Visited Links revision
* reinstates visited links color on header and home
* fixes dropdown menu color
* rewrites visited links colors
* streamlines SCSS (a little)
---
themes/fid_adlr/scss/_customMixins.scss | 6 +-
themes/fid_adlr/scss/_customVariables.scss | 12 +-
themes/fid_adlr/scss/compiled.scss | 716 ++++++++++++---------
3 files changed, 422 insertions(+), 312 deletions(-)
diff --git a/themes/fid_adlr/scss/_customMixins.scss b/themes/fid_adlr/scss/_customMixins.scss
index 145dc9489fc..0aabc737b82 100644
--- a/themes/fid_adlr/scss/_customMixins.scss
+++ b/themes/fid_adlr/scss/_customMixins.scss
@@ -187,7 +187,7 @@
font-weight: 700;
letter-spacing: 2px;
line-height: 1.5rem;
- padding: 0.75em 1em;
+ padding: .75em 1em;
text-transform: uppercase;
&:active,
@@ -279,7 +279,7 @@
&:focus,
&:hover {
- color: $azure;
+ color: $azure !important;
}
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
@@ -290,7 +290,7 @@
}
@media screen and (min-width: $mobile-navigation-menu-breakpoint + 1px) {
- color: $black;
+ color: $black !important;
font-size: $font-size-menu-lg;
left: 0;
letter-spacing: 2.87px;
diff --git a/themes/fid_adlr/scss/_customVariables.scss b/themes/fid_adlr/scss/_customVariables.scss
index 9d0df5dd2e7..46a9602eeed 100644
--- a/themes/fid_adlr/scss/_customVariables.scss
+++ b/themes/fid_adlr/scss/_customVariables.scss
@@ -141,7 +141,7 @@ $icon-arrow-font-size: 30px;
// IcoMoon Custom Icons Font - END
// category icons
-@import "iconcategory";
+@import 'iconcategory';
// category icons - END
//// Base font size
@@ -153,7 +153,7 @@ $font-size-menu-sm: 40px !default;
$font-size-menu-lg: 25px !default;
$font-size-title: 24px !default;
$font-size-title-lg: 30px !default;
-$font-size-title-sub: calc(#{$font-size-title} * 0.85);
+$font-size-title-sub: calc(#{$font-size-title} * .85);
$letter-spacing-title: 2.87px;
$line-height-title: 20px;
$line-height-title-sm: 25px;
@@ -178,7 +178,7 @@ $line-height-submenu: 60px;
// COLORS
$amber: #f7c525; // rgb(247, 197, 37)
-$black: #000000; // rgb(0, 0, 0)
+$black: #000; // rgb(0, 0, 0)
$azure: #004fe7; // rgb(0, 79, 231) // 'Azure'
$asphalt: #707071; // rgb(112, 112, 113)
$asphalt-dark: #d9d9d9; // rgb(112, 112, 113)
@@ -201,7 +201,7 @@ $state-success-bg:$brand-info !default;
$state-info-bg: $brand-info !default;
$state-info-text: $asphalt !default;
$state-info-border: $asphalt !default;
-
+$database-link-hover-color: #00359b;
$header-bg-color: $midnight;
//// ALERTS (see states, above, and compiled.scss - Code needs to go there to overwrite defaults)
@@ -363,7 +363,7 @@ $get-it-link-offset-left: 10px;
//$sidebar-item-hover-bg: transparentize($brand-secondary, .9) !default;
//$sidebar-item-active-hover-bg: transparentize($brand-primary, .1) !default;
-$a-visited-color: initial !default;
+$a-visited-color: $black !default;
//// ELEMENT COLORS - END
// COLORS - END
@@ -481,4 +481,4 @@ $screen-xl-min: $screen-xl !default;
$screen-lg-max: $screen-xl - 1 !default;
@import '../../bootstrap3/scss/vendor/bootstrap/variables';
-$mobile-navigation-menu-breakpoint: $screen-md-max !default; // use mobile navigation until this width
\ No newline at end of file
+$mobile-navigation-menu-breakpoint: $screen-md-max !default; // use mobile navigation until this width
diff --git a/themes/fid_adlr/scss/compiled.scss b/themes/fid_adlr/scss/compiled.scss
index 81313dfb2c8..cead2b964c3 100644
--- a/themes/fid_adlr/scss/compiled.scss
+++ b/themes/fid_adlr/scss/compiled.scss
@@ -30,6 +30,8 @@
// 3. Import finc's compiled.scss to have the variables and mixins defined above applied to it
@import '../../fid/scss/compiled';
@import 'lightbox';
+@import 'getItBox';
+
// 4. Customize further -- pls. comment and explain
// PLEASE ORGANIZE YOUR CSS ACCORDING TO THIS GENERAL RULE - keep exceptions to a minimum
@@ -113,11 +115,6 @@ h1 {
padding-bottom: 5px;
padding-top: 5px;
- // overwrite finc margin-top of 0
- &:first-of-type {
- margin-top: $line-height-title-lg;
- }
-
@media (max-width: $screen-sm-max) {
padding-top: $line-height-title-sm;
}
@@ -130,6 +127,38 @@ h1 {
font-size: em(30px);
line-height: em($line-height-title-lg);
}
+
+ // overwrite finc margin-top of 0
+ &:first-of-type {
+ margin-top: $line-height-title-lg;
+ }
+
+ .home.container & {
+ @media screen and (max-width: $screen-sm-max) {
+ font-size: $font-size-menu-sm;
+ }
+ }
+}
+
+h1,
+h3 {
+ .home.container & {
+ color: $azure;
+
+ @media screen and (max-width: $screen-xs-max) {
+ font-size: 26px;
+ letter-spacing: 1.7px;
+ line-height: 50px;
+ padding-bottom: 10px;
+ }
+
+ // Fixme: This seems to duplicate content from the query above - CK
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ letter-spacing: 1.7px;
+ line-height: 50px;
+ padding-bottom: 10px;
+ }
+ }
}
// ++ h2
@@ -147,6 +176,16 @@ h2 {
font-size: em($font-size-title-lg);
line-height: em($line-height-title-lg);
}
+
+ .home.container .blog & {
+ font-size: $font-size-menu-lg;
+ line-height: 50px;
+ padding-bottom: 30px;
+
+ @media screen and (max-width: $screen-md-max) {
+ font-size: 30px;
+ }
+ }
}
// ++ h3
@@ -173,6 +212,29 @@ h3 {
font-size: $font-size-title-sub;
line-height: 1.35em;
}
+
+ .home.container & {
+ line-height: 34px;
+
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ font-size: 34px;
+ }
+ }
+
+ .home.container .services & {
+ font-size: 30px;
+ line-height: 30px;
+ margin-left: $home-services-sub-headline-offset;
+
+ .icon-check-circle {
+ margin-left: calc(-#{$home-services-sub-headline-offset});
+ }
+
+ @media screen and (max-width: $screen-md-max) {
+ font-size: 26px;
+ letter-spacing: normal;
+ }
+ }
}
// ++ h4
@@ -207,11 +269,12 @@ ul {
color: $asphalt;
.openurls & {
- a {
+ a,
+ a:visited {
color: $asphalt;
&:hover {
- color: #00359b;
+ color: $database-link-hover-color;
}
}
}
@@ -307,13 +370,27 @@ a {
&:hover {
text-decoration: none;
}
-}
-// #17913 adjust BARF to adlr design
-a.exclude {
- &:hover,
- &:focus {
- outline: none;
+ // #17913 adjust BARF to adlr design
+ &.exclude {
+ &:hover,
+ &:focus {
+ outline: none;
+ }
+ }
+
+
+ &:not(.btn):not(.search-filter-toggle):not(.text):visited {
+ .home-links &,
+ .navbar-header &,
+ .header-menu-collapse &,
+ .language & {
+ color: $white;
+ }
+
+ .dbis_content & {
+ color: $asphalt;
+ }
}
}
@@ -429,6 +506,7 @@ a.exclude {
color: $state-info-text;
}
}
+
// ++ ALERTS - END
@import 'buttons';
@@ -478,7 +556,7 @@ a.exclude {
&.SID76,
&.collection-UBL-FID-EBC {
- // #16177 adapt the path to get the "adlr ebooks" logo
+ // #16177 adapt the path to get the 'adlr ebooks' logo
// FIXME set correct logo
background: $midnight-light;
color: $azure;
@@ -521,6 +599,7 @@ a.exclude {
display: inline-block;
}
}
+
// ++ BRANDING - END
// ++ DROPDOWNS
@@ -591,7 +670,7 @@ header,
width: auto;
// override finc display block
- // Fixme: Bitte in den "allgemeinen" Block verschieben, also, wo body, dropdown usw. definiert werden
+ // Fixme: Bitte in den 'allgemeinen' Block verschieben, also, wo body, dropdown usw. definiert werden
.collapse.in {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -601,11 +680,11 @@ header,
.collapsing,
&.collapsing {
+ transition: unset !important;
transition-duration: $transition-duration !important;
- transition: unset !important;
}
- // overwrite finc border definitions input[type="text"]
+ // overwrite finc border definitions input[type='text']
#searchForm input[type='text'] {
@include default-border($white);
}
@@ -728,7 +807,7 @@ input[type='checkbox']:hover,
top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + #{$content-top-padding});
}
- @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + 9 * #{$navbar-default-padding});
@@ -787,7 +866,7 @@ input[type='checkbox']:hover,
top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + #{$content-top-padding});
}
- @media (min-width:$screen-sm-min) and (max-width:$screen-md-max) {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
font-size: calc(#{$font-size-menu-sm} - 15px);
left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
top: calc(#{$navbar-header-height} + 9 * #{$line-height-submenu} + 10 * #{$navbar-default-padding});
@@ -818,6 +897,7 @@ input[type='checkbox']:hover,
position: absolute;
z-index: z-index(navigation-overlay, 0);
}
+
.submenu-collapse-wrapper {
position: absolute;
top: $navbar-header-height-home-sm;
@@ -839,21 +919,22 @@ input[type='checkbox']:hover,
&.collapsing {
.submenu-collapse-wrapper {
@include navigation-overlay;
+
@media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
position: absolute;
}
}
}
-}
-//// Define header navbar on mobile
-.header-menu-collapse.collapsing {
- padding: 0;
+ //// Define header navbar on mobile
+ &.collapsing {
+ padding: 0;
- .submenu-collapse-wrapper {
- @media (max-width: $screen-sm-max) {
- background-color: $white;
- padding: 0;
+ .submenu-collapse-wrapper {
+ @media (max-width: $screen-sm-max) {
+ background-color: $white;
+ padding: 0;
+ }
}
}
}
@@ -947,18 +1028,22 @@ header.collapsing .text-open,
.navbar-toggle {
margin-right: em(5px);
padding-left: em(10px);
+
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
padding-left: em(25px);
}
+
@media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
padding-left: em(10px);
}
+
@media screen and (min-width: $screen-xl-min) {
margin-right: em(6px);
padding-left: em(3px);
}
}
}
+
&.navbar {
min-height: 0;
}
@@ -1007,26 +1092,29 @@ header.collapsing .text-open,
color: transparent;
}
}
+
// ++++ Logo and home link - END
// ++++++ basic default (non start page)
-// Fixme: Ueberlegen, ob es klüger wäre, die Startseite als "Ausnahme" zu nehmen. Also den body standardmäßig für alle Seiten zu definieren und nur die Startseite dann extra zu stylen
-body:not(.template-name-home) {
- header {
+// Fixme: Ueberlegen, ob es klüger wäre, die Startseite als 'Ausnahme' zu nehmen. Also den body standardmäßig für alle Seiten zu definieren und nur die Startseite dann extra zu stylen
+header {
+ body:not(.template-name-home) & {
+
@media screen and (max-width: $screen-md-max) {
margin-bottom: calc(#{$navbar-header-height} + #{$search-input-height-fixed} + 35px);
}
- .headline, .home-links {
- display: none;
- }
-
@media screen and (min-width: $screen-lg-min) {
background-image: url('../images/header-bg-lg-mirror-stretched.png');
background-position: 100% 70%;
height: $default-header-height-lg; // needed for background image effect
}
+ .headline,
+ .home-links {
+ display: none;
+ }
+
// ++++++ Navbar in affix mode
.navbar.affix:not(.search) {
border: 0;
@@ -1036,6 +1124,7 @@ body:not(.template-name-home) {
height: em($navbar-header-height-affix-lg);
}
}
+
// ++++++ Navbar in affix mode - END
.navbar.affix-top {
@@ -1056,11 +1145,11 @@ body:not(.template-name-home) {
background: $azure;
}
- @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-min + 50px){
+ @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-min + 50px) {
background: transparent;
}
- @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max){
+ @media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
height: 120px;
width: $search-form-width-affix-lg;
}
@@ -1077,6 +1166,7 @@ body:not(.template-name-home) {
// search (box) and elements in affix mode - END
}
}
+
// ++++++ basic default - END
// ++++ Start Page
@@ -1087,7 +1177,7 @@ body:not(.template-name-home) {
@media screen and (max-width: $screen-xs-max) {
background-image: url('../images/header-bg-xs.png');
- background-position: 100% 0px;
+ background-position: 100% 0;
background-size: auto;
}
@@ -1111,6 +1201,7 @@ body:not(.template-name-home) {
background-repeat: no-repeat;
}
}
+
header {
.affix-top {
position: relative; // ignore affix header on start page
@@ -1127,6 +1218,7 @@ body:not(.template-name-home) {
}
}
}
+
.affix {
position: relative; // ignore affix header on start page
.menubar {
@@ -1136,12 +1228,14 @@ body:not(.template-name-home) {
}
}
}
+
@media screen and (min-width: $screen-lg-min) {
.container.navbar {
padding-right: em(20px);
}
}
}
+
.home-text {
border: 0;
color: $brand-secondary;
@@ -1158,11 +1252,13 @@ body:not(.template-name-home) {
@media screen and (max-width: $screen-xs-max) {
// Add correct data for font-size, letter-spacing, lineheight, texttransform
@include default-headings-font(26px, 1.7px, 36px, none);
+
height: $home-text-box-height-xs;
margin-left: 0;
max-width: calc(#{$screen-xs-max} / 2);
padding-bottom: $home-text-bottom-padding-xs;
padding-top: $home-text-top-padding-xs;
+
.home-links {
display: none;
}
@@ -1171,6 +1267,7 @@ body:not(.template-name-home) {
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
// $font-size, $letter-spacing, $lineheight, $texttransform
@include default-headings-font(40px, 3.27px, 50px, none);
+
height: $home-text-box-height-sm;
margin-bottom: 70px;
margin-left: $home-text-left-margin-sm;
@@ -1190,6 +1287,7 @@ body:not(.template-name-home) {
@media screen and (min-width: $screen-lg-min) {
// $font-size, $letter-spacing, $lineheight, $texttransform
@include default-headings-font(63px, 4.27px, 69px, none);
+
height: $home-text-box-height-lg;
margin-top: $navbar-header-height;
padding-bottom: $home-text-bottom-padding-lg;
@@ -1204,6 +1302,7 @@ body:not(.template-name-home) {
@media screen and (min-width: $screen-xl-min) {
margin-left: $home-text-left-margin-xl;
+
.headline {
padding-left: 200px;
}
@@ -1213,9 +1312,11 @@ body:not(.template-name-home) {
.search.container.navbar {
position: absolute;
+
@media screen and (max-width: $screen-xs-max) {
// $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
@include searchbox-toggler-and-content-styles(none, block, false, false, 'mobile');
+
padding-right: 0;
top: $home-text-box-height-xs;
width: 100%;
@@ -1224,17 +1325,45 @@ body:not(.template-name-home) {
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
// $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
@include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
+
top: $home-text-box-height-sm;
width: 100%;
}
@media screen and (min-width: $screen-lg-min) {
// $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
+
@include searchbox-toggler-and-content-styles(none, none, true, false, 'desktop');
top: calc(#{$home-text-box-height-lg} - 100px); // -100px for links only on lg sreens
}
}
+
+ .search-wrapper.container {
+ position: relative;
+ }
+
+ .nav-tabs {
+ border-bottom: 0;
+ margin-bottom: 30px;
+
+ @media screen and (max-width: $screen-xs-max) {
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(false, true);
+
+ &.open {
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(true, true);
+ }
+ }
+
+ @media screen and (min-width: $screen-sm-min) {
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(false, false);
+ }
+ }
}
+
+
// ++++ Start Page - END
// ++++ SEARCH BOX
@@ -1261,10 +1390,6 @@ body:not(.template-name-home) {
}
}
-.template-name-home .search-wrapper.container {
- position: relative;
-}
-
.search.container {
background-color: transparent;
border: 0;
@@ -1282,9 +1407,6 @@ body:not(.template-name-home) {
&.collapsing {
display: none;
- }
-
- &.collapsing {
transition: none !important;
}
@@ -1293,6 +1415,7 @@ body:not(.template-name-home) {
border: 0;
margin-top: 0;
z-index: z-index(sbox-dd-menu, 0);
+
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
width: $search-panel-width-xs-md;
}
@@ -1326,6 +1449,7 @@ body:not(.template-name-home) {
.searchForm {
display: inline-block;
+
ul.dropdown-menu-parent > li {
width: 100%;
}
@@ -1338,6 +1462,7 @@ body:not(.template-name-home) {
.navbar-left {
margin-bottom: 0;
}
+
label {
font: $font-family-sans-serif;
min-width: 90%;
@@ -1357,73 +1482,46 @@ body:not(.template-name-home) {
// FIXME: nav-tabs-/nav-tabs-open-Definitionen sortieren, auflösen und zuordnen
.nav-tabs {
border-bottom: 0;
-}
-.template-name-home {
- .nav-tabs {
+ body:not(.template-name-home) & {
border-bottom: 0;
margin-bottom: 30px;
- @media screen and (max-width: $screen-xs-max) {
- // parameter $is_collapsed, $is_mobile
- @include search-filter-styles(false, true);
-
- &.open {
- // parameter $is_collapsed, $is_mobile
- @include search-filter-styles(true, true);
- }
- }
-
- @media screen and (min-width: $screen-sm-min) {
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ // note difference to xs - always show expanded options as tabs
// parameter $is_collapsed, $is_mobile
@include search-filter-styles(false, false);
- }
- }
-}
-
-body:not(.template-name-home) {
- // FIXME: vereinheitlichen
- .nav-tabs {
- border-bottom: 0;
- margin-bottom: 30px;
- }
- @media screen and (max-width: $screen-xs-max) {
- .nav-tabs.open { // note difference to sm - show tabs as select
- // parameter $is_collapsed, $is_mobile
- @include search-filter-styles(true, true);
}
}
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
- .nav-tabs { // note difference to xs - always show expanded options as tabs
+ .nav-tabs.open {
+ body:not(.template-name-home) & {
+ @media screen and (max-width: $screen-xs-max) {
+ // note difference to sm - show tabs as select
// parameter $is_collapsed, $is_mobile
- @include search-filter-styles(false, false);
- }
- }
+ @include search-filter-styles(true, true);
+ }
- @media screen and (min-width: $screen-lg-min) {
- .nav-tabs.open { // note difference to sm - show tabs as select
- // parameter $is_collapsed, $is_mobile
- @include search-filter-styles(true, false);
+ @media screen and (min-width: $screen-lg-min) {
+ // note difference to sm - show tabs as select
+ // parameter $is_collapsed, $is_mobile
+ @include search-filter-styles(true, false);
+ }
}
}
}
+
// ++++ SEARCH TABS - END
// ++++ SEARCH BOX - END
// ++++++ Search input field
input.searchForm_lookfor {
- color: $white;
-
- &::placeholder,
- &:placeholder-shown {
- color: $white;
- }
-
@include default-border-radius;
+
background-color: transparent;
+ color: $white;
height: $search-input-height-fixed;
@media screen and (max-width: $screen-xs-max) {
@@ -1441,6 +1539,11 @@ input.searchForm_lookfor {
width: $search-input-width-lg;
}
+ &::placeholder,
+ &:placeholder-shown {
+ color: $white;
+ }
+
// Fixme: Ueberlegen, ob es sinnvoll ist, form-control zu entfernen
&.form-control {
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
@@ -1479,10 +1582,10 @@ input.searchForm_lookfor {
text-decoration: underline;
}
- &:focus {
- color: $seafoam;
- outline: none;
- }
+ &:focus {
+ color: $seafoam;
+ outline: none;
+ }
}
// ++++++ Quick filter - END
@@ -1605,22 +1708,28 @@ input.searchForm_lookfor {
.container .sidebar.right {
@media screen and (max-width: $screen-xs-max) {
padding: 10px;
+
select {
max-width: none;
}
}
+
@media screen and (min-width: $screen-sm-min) {
padding-left: 20px;
}
+
select {
@include default-border($black);
+
background-color: $white;
height: $search-input-height-fixed;
width: 100%;
}
+
.btn-link {
color: $black;
}
+
#filter-header {
background-color: $midnight-medium;
font-family: $font-family-monospace;
@@ -1629,6 +1738,10 @@ input.searchForm_lookfor {
line-height: em(35px);
padding: 12px;
}
+
+ &.record {
+ padding-left: 0;
+ }
}
.search-header {
@@ -1638,15 +1751,17 @@ input.searchForm_lookfor {
.search-stats {
padding-bottom: 3em;
+
@media screen and (max-width: $screen-md-min) {
padding-bottom: 0;
}
}
- .search-controls a {
+ .search-controls a {
@include main-link;
- padding: 0.75em 0;
- color: black;
+
+ color: $black;
+ padding: .75em 0;
text-decoration: none;
}
}
@@ -1743,7 +1858,9 @@ input.searchForm_lookfor {
.limit-inner .btn,
.sort-inner .btn {
- vertical-align: middle;
+ height: 60px;
+ min-width: 60px;
+ vertical-align: top;
}
}
@@ -1815,24 +1932,75 @@ input.searchForm_lookfor {
}
}
-.title-toolbar > .result-body {
-
+.title-toolbar {
@media screen and (max-width: $screen-xs-max) {
- padding-top: 20px;
+ display: flex;
+ flex-direction: column-reverse;
}
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
- width: 85%;
+ > .result-body {
+
+ @media screen and (max-width: $screen-xs-max) {
+ padding-top: 20px;
+ }
+
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ width: 85%;
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
+ width: 90%;
+ }
}
- @media screen and (min-width: $screen-lg-min) {
- width: 90%;
+ > .toolbar-details {
+ padding-top: 12px;
+
+ @media screen and (max-width: $screen-xs-max) {
+ display: inline-flex;
+ flex-direction: row-reverse;
+ position: relative;
+ top: -2.5em;
+ }
+
+ @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+ display: inline-flex;
+ flex-direction: row-reverse;
+ position: absolute;
+ top: em(-100px);
+ width: 15%;
+ }
+
+ @media screen and (min-width: $screen-lg-min) {
+ width: 10%;
+ }
+
+ // FIXME: SCHACHTELUNG NOETIG?
+ & > .toolbar-menu {
+ display: inline;
+ @media screen and (min-width: $screen-lg-min) {
+ display: block;
+ padding-top: em(20px);
+ }
+ }
+ }
+
+ .favorite {
+ display: inline-block;
+ padding-left: 1em;
}
}
.result-links {
+ // move favorites and other icons to the right
+ text-align: right;
+
+ @media screen and (min-width: $screen-xl-min) {
+ width: 20%;
+ }
- .save-record, #toolbar-menu {
+ .save-record,
+ #toolbar-menu {
color: $violet;
&:hover,
@@ -1845,13 +2013,6 @@ input.searchForm_lookfor {
.savedLists.loaded {
display: none;
}
-
- // move favorites and other icons to the right
- text-align: right;
-
- @media screen and (min-width: $screen-xl-min) {
- width: 20%;
- }
}
.result:nth-of-type(2n) {
@@ -1873,17 +2034,20 @@ input.searchForm_lookfor {
.switchtab-info {
color: $violet;
- a {
+ a,
+ a:not(.btn):not(.search-filter-toggle):not(.text):visited {
color: $violet;
}
}
.facet-group {
+ @include accordeon(false);
+
.facet {
- -webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
+ -webkit-hyphens: auto;
hyphens: auto;
word-break: break-all; // fallback for hyphens: auto (Chrome on Desktop and bug on Mozilla for capitalized words)
@@ -1908,7 +2072,7 @@ input.searchForm_lookfor {
padding-left: 0;
}
- .text{
+ .text {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: -webkit-box;
@@ -1916,7 +2080,7 @@ input.searchForm_lookfor {
-ms-word-break: break-word;
word-break: break-word;
- & > span {
+ > span {
display: inline-block;
}
}
@@ -1934,8 +2098,11 @@ input.searchForm_lookfor {
.active-filters,
.switchtab-info {
@include default-border($violet !important);
+
margin-top: 1em;
- .facet {
+
+ .facet,
+ .facet:not(.btn):not(.search-filter-toggle):not(.text):visited {
background-color: transparent;
color: $violet;
}
@@ -1945,13 +2112,11 @@ input.searchForm_lookfor {
font-family: $font-family-monospace;
font-weight: 700;
text-transform: uppercase;
+
&:hover {
border-color: $iron;
}
}
- .facet-group {
- @include accordeon(false);
- }
// MyResearch Sidebar Menu - START
.myresearch-menu {
@@ -1959,6 +2124,7 @@ input.searchForm_lookfor {
a {
@include main-link;
+
border: 3px solid $midnight-medium;
color: $azure;
display: flex;
@@ -1970,27 +2136,31 @@ input.searchForm_lookfor {
color: $azure;
text-decoration: none;
}
- }
- a:not(:last-of-type) {
- border-bottom: 3px solid $midnight-medium;
- }
+ &:not(.btn):not(.search-filter-toggle):not(.text):visited {
+ color: $azure;
+ }
- a:last-child {
- margin-bottom: 0;
- }
+ &:not(:last-of-type) {
+ border-bottom: 3px solid $midnight-medium;
+ }
- a:focus,
- a:hover {
- background-color: transparent;
- border: 3px solid $azure;
- outline: none;
- }
+ &:last-child {
+ margin-bottom: 0;
+ }
- a.active {
- background-color: transparent;
- border: 3px solid $azure;
- text-decoration: none;
+ &:focus,
+ &:hover {
+ background-color: transparent;
+ border: 3px solid $azure;
+ outline: none;
+ }
+
+ &.active {
+ background-color: transparent;
+ border: 3px solid $azure;
+ text-decoration: none;
+ }
}
.icon {
@@ -2006,7 +2176,7 @@ input.searchForm_lookfor {
.badge,
a.active .badge {
background-color: $asphalt;
- font-size: 0.82em;
+ font-size: .82em;
height: min-content;
padding: 3px 7px;
}
@@ -2014,35 +2184,36 @@ input.searchForm_lookfor {
.list-link {
width: 100%;
}
-
}
//// Offcanvas is used to widths of 767px ($screen-xs-max)
// Sidebar Menu - END
}
-.facet-loading-overlay-label{
- background-color:transparent;
- color:#fff;
- padding:1px .5rem;
+.facet-loading-overlay-label {
+ background-color: transparent;
+ color: $white;
+ padding: 1px .5rem;
}
-@media only screen and (max-width: $screen-sm-max) {
- .offcanvas-right .sidebar {
+.offcanvas-right .sidebar {
+ @media only screen and (max-width: $screen-sm-max) {
background: $white;
height: 100%;
+ overflow-y: auto;
padding: 1rem;
position: fixed;
- overflow-y: auto;
right: -80vw;
top: 0;
transition: left .5s, right .5s;
width: 80vw;
}
- .offcanvas.active.offcanvas-right .sidebar {
- right: 0;
+ &.offcanvas.active {
+ @media only screen and (max-width: $screen-sm-max) {
+ right: 0;
+ }
}
}
@@ -2054,7 +2225,7 @@ input.searchForm_lookfor {
&:active,
&:focus,
&:visited {
- color: $black ;
+ color: $black;
}
}
@@ -2090,17 +2261,26 @@ input.searchForm_lookfor {
min-width: 98px;
}
}
+
// DATE-RANGE slider - END
// ++ FACETTES, SIDEBAR - END
// ++ SEARCH-RESULTS PAGE - END
-// FIXME: Bitte verschieben: Vom Allgemeinen zum Spezifischen; Am Besten direkt unter "breadcrumbs", daran die Sonderformen anschließen: Startseite, Search Results, Record View ...
+// FIXME: Bitte verschieben: Vom Allgemeinen zum Spezifischen; Am Besten direkt unter 'breadcrumbs', daran die Sonderformen anschließen: Startseite, Search Results, Record View ...
// ++ GENERAL CONTENT PAGE
.main {
padding-bottom: 20px;
padding-top: 20px;
+ @media screen and (min-width: $screen-lg-min) {
+ background-image: url('../images/background-shape-left.svg'),
+ url('../images/background-shape-right.svg');
+ background-position: center left,
+ bottom right;
+ background-repeat: no-repeat;
+ }
+
.container,
.footer {
background: transparent;
@@ -2114,7 +2294,7 @@ input.searchForm_lookfor {
transition: none !important;
}
- .record {
+ .record {
.mainbody {
padding-bottom: 2em;
padding-right: 0;
@@ -2205,26 +2385,19 @@ input.searchForm_lookfor {
}
}
- .author-data [property="name"] a {
+ .author-data [property='name'] a {
font-weight: 700;
}
- }
- .record div[id^="side-panel-"] {
- margin-left: 15px;
- margin-right: 15px;
- @media screen and (min-width: $screen-lg-min) {
- width: 68%;
- }
- }
+ div[id^='side-panel-'] {
+ margin-left: 15px;
+ margin-right: 15px;
- @media screen and (min-width: $screen-lg-min) {
- background-image: url('../images/background-shape-left.svg'),
- url('../images/background-shape-right.svg');
- background-position: center left,
- bottom right;
- background-repeat: no-repeat;
+ @media screen and (min-width: $screen-lg-min) {
+ width: 68%;
+ }
+ }
}
.licenses > li > a::before {
@@ -2240,12 +2413,13 @@ input.searchForm_lookfor {
.dbis_content {
ul > li {
list-style: none;
+
span {
padding-right: .5em;
}
}
- span[class^="dbis-list-accessinfo-access_"]::after {
+ span[class^='dbis-list-accessinfo-access_']::after {
content: '\e913';
font-family: icomoon, sans-serif;
font-style: normal;
@@ -2258,9 +2432,11 @@ input.searchForm_lookfor {
.dbis_description {
@include accordeon(false);
+
p {
margin: 1em;
}
+
.title {
-webkit-appearance: button;
background-color: transparent;
@@ -2305,6 +2481,7 @@ input.searchForm_lookfor {
}
}
}
+
// ++ GENERAL CONTENT PAGE - END
// ++ DETAILS/RECORD VIEW PAGE
@@ -2312,23 +2489,28 @@ input.searchForm_lookfor {
.table {
border: 0;
- & tr {
+ tr {
border-bottom: 3px solid $midnight-medium;
+
@media screen and (min-width: $screen-lg-min) {
&:first-of-type {
border-top: 3px solid $midnight-medium;
}
}
}
- & > tbody {
- & > tr {
- & > td {
+
+ > tbody {
+ > tr {
+ > td {
color: $asphalt;
}
- & > th, & > td {
+
+ > th,
+ > td {
font-weight: normal;
padding: 20px;
}
+
&:nth-of-type(2n+1) {
background-color: transparent;
}
@@ -2346,7 +2528,7 @@ input.searchForm_lookfor {
.tab-content {
border: 0;
- & > .active {
+ > .active {
background-color: transparent;
}
@@ -2362,16 +2544,16 @@ input.searchForm_lookfor {
.table {
tr {
border-bottom: 2px solid $midnight-medium;
+ color: $black;
@media screen and (min-width: $screen-lg-min) {
&:first-of-type {
border-top: 0;
}
}
- color: $black;
- & > th,
- & > td {
+ > th,
+ > td {
padding: 4px;
}
}
@@ -2389,50 +2571,6 @@ input.searchForm_lookfor {
}
}
-.title-toolbar {
- @media screen and (max-width: $screen-xs-max) {
- display: flex;
- flex-direction: column-reverse;
- }
-
- & > .toolbar-details {
- padding-top: 12px;
-
- @media screen and (max-width: $screen-xs-max) {
- display: inline-flex;
- flex-direction: row-reverse;
- position: relative;
- top: -2.5em;
- }
-
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
- display: inline-flex;
- flex-direction: row-reverse;
- position: absolute;
- top: em(-100px);
- width: 15%;
- }
-
- @media screen and (min-width: $screen-lg-min) {
- width: 10%;
- }
-
- // FIXME: SCHACHTELUNG NOETIG?
- & > .toolbar-menu {
- display: inline;
- @media screen and (min-width: $screen-lg-min) {
- display: block;
- padding-top: em(20px);
- }
- }
- }
-
- .favorite {
- display: inline-block;
- padding-left: 1em;
- }
-}
-
// FIXME: Bitte nach oben in den allgemeinen Teil bei UL als Sonderfall definieren
.worldcat .openurls {
ul {
@@ -2441,7 +2579,7 @@ input.searchForm_lookfor {
}
// FIXME: IST DER div NOETIG?
-div[class$="-tab"] {
+div[class$='-tab'] {
.media-body {
display: inline;
@@ -2456,19 +2594,15 @@ div[class$="-tab"] {
padding-left: 0;
}
-.container .sidebar.right.record {
- padding-left: 0;
-}
-
-@import 'getItBox';
-
.record #side-collapse-Details {
word-break: break-word;
+
th {
min-width: 170px;
text-align: left;
}
}
+
// ++ DETAILS/RECORD VIEW - END
// ++ ADVANCED SEARCH
@@ -2482,16 +2616,17 @@ div[class$="-tab"] {
@media screen and (max-width: $screen-xs-max) {
padding-right: 15px;
}
- }
- fieldset.range {
- @media screen and (max-width: $screen-xs-max) {
- float: left;
- margin-left: 0;
- width: unset;
+ &.range {
+ @media screen and (max-width: $screen-xs-max) {
+ float: left;
+ margin-left: 0;
+ width: unset;
+ }
}
}
}
+
// ++ ADVANCED SEARCH - END
//
@@ -2540,6 +2675,7 @@ div[class$="-tab"] {
}
> .last > a {
+ // Fixme: Can we delete this?
//margin-top: 22px;
}
@@ -2550,7 +2686,7 @@ div[class$="-tab"] {
> a,
> a:hover,
> a:focus {
-
+ // Fixme: Can we delete this? CK
}
}
@@ -2579,6 +2715,7 @@ div[class$="-tab"] {
}
}
}
+
// Pagination (multiple pages) - END
// PAGE ELEMENTS (Top --> Down) - END
@@ -2591,35 +2728,6 @@ div[class$="-tab"] {
margin-top: 100px;
}
- h1, h3 {
- color: $azure;
- @media screen and (max-width: $screen-xs-max) {
- font-size: 26px;
- letter-spacing: 1.7px;
- line-height: 50px;
- padding-bottom: 10px;
- }
-
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
- letter-spacing: 1.7px;
- line-height: 50px;
- padding-bottom: 10px;
- }
- }
-
- h1 {
- @media screen and (max-width: $screen-sm-max) {
- font-size: $font-size-menu-sm;
- }
- }
-
- h3 {
- @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
- font-size: 34px;
- }
- line-height: 34px;
- }
-
.black {
color: $black;
}
@@ -2630,16 +2738,6 @@ div[class$="-tab"] {
font-size: $font-size-large;
text-decoration: underline;
}
-
- h2 {
- font-size: $font-size-menu-lg;
- line-height: 50px;
- padding-bottom: 30px;
-
- @media screen and (max-width: $screen-md-max) {
- font-size: 30px;
- }
- }
}
.box {
@@ -2661,7 +2759,8 @@ div[class$="-tab"] {
width: 75px;
}
- .databases, .new-items {
+ .databases,
+ .new-items {
a {
font-family: $font-family-monospace;
letter-spacing: 2px;
@@ -2683,12 +2782,15 @@ div[class$="-tab"] {
text-transform: uppercase;
}
}
+
span {
font-size: $font-size-base;
}
+
&.box {
margin-bottom: 43px;
margin-left: 40px;
+
@media screen and (max-width: $screen-sm-max) {
margin-left: 0;
margin-top: 70px;
@@ -2700,6 +2802,7 @@ div[class$="-tab"] {
font-family: $font-family-sans-serif;
font-size: $font-size-large;
line-height: 45px;
+
@media screen and (max-width: $screen-sm-max) {
font-size: $font-size-base;
margin-top: 50px;
@@ -2707,25 +2810,13 @@ div[class$="-tab"] {
}
.services {
- h3 {
- font-size: 30px;
- line-height: 30px;
- margin-left: $home-services-sub-headline-offset;
- .icon-check-circle {
- margin-left: calc(-#{$home-services-sub-headline-offset});
- }
- @media screen and (max-width: $screen-md-max) {
- font-size: 26px;
- letter-spacing: normal;
- }
- }
-
@media screen and (min-width: $screen-md-max) {
padding-left: 80px;
}
.icon-check-circle {
font-size: 30px;
+
@media screen and (max-width: $screen-md-max) {
font-size: 26px;
}
@@ -2733,24 +2824,29 @@ div[class$="-tab"] {
> div {
margin-top: 40px;
+
@media screen and (max-width: $screen-sm-max) {
margin-bottom: 60px;
}
}
+
.item {
color: $asphalt;
font-family: $font-family-sans-serif;
line-height: 34px;
margin-left: $home-services-sub-headline-offset;
margin-top: 25px;
+
@media screen and (max-width: $screen-sm-max) {
font-size: 20px;
margin-right: 50px;
margin-top: 0;
}
}
+
.headline {
margin-left: 20px;
+
@media screen and (max-width: $screen-sm-max) {
margin-left: 13px;
margin-top: 2px;
@@ -2763,6 +2859,7 @@ div[class$="-tab"] {
}
.no-padding-sm-l {
+
@media screen and (max-width: $screen-sm-max) {
padding-left: 0;
}
@@ -2773,11 +2870,13 @@ div[class$="-tab"] {
}
.no-padding-sm-r {
+
@media screen and (max-width: $screen-sm-max) {
padding-right: 0;
}
}
}
+
// +++++ Home Page - END
// +++++ Footer - START
@@ -2785,26 +2884,27 @@ div[class$="-tab"] {
// #16385 display sidebar / sidefacets for sm like xs
.mainbody {
- @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max) {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
width: 100%;
}
}
.offcanvas.active.offcanvas-right {
- @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max) {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
margin-left: -80vw;
margin-right: 80vw;
}
}
.offcanvas .close-offcanvas {
- width: auto;
margin: 0;
+ width: auto;
- @media (min-width:$screen-sm-min) and (max-width:$screen-sm-max) {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
display: block;
}
}
+
// #16385 display sidebar / sidefacets for sm like xs - END
.main footer,
@@ -2841,11 +2941,11 @@ footer {
letter-spacing: em(2px);
line-height: em(42px);
text-transform: uppercase;
- }
- #footer-links ul {
- list-style: none;
- padding-left: 0;
+ ul {
+ list-style: none;
+ padding-left: 0;
+ }
}
#footer-contact-wrapper {
@@ -2857,7 +2957,7 @@ footer {
font-family: $font-family-monospace;
font-size: em(20px);
font-weight: 700;
- letter-spacing: em(0.8px);
+ letter-spacing: em(.8px);
line-height: em(20px);
}
@@ -2949,7 +3049,7 @@ footer {
// Small devices Tablets (≥768px) .col-sm-
@media (min-width: $screen-sm-min) {
- background-size: calc(100%/2 + #{$container-sm}/4) 100%;
+ background-size: calc(100% / 2 + #{$container-sm} / 4) 100%;
#footer-links {
margin-top: 50px;
@@ -2964,17 +3064,20 @@ footer {
// Medium devices Desktops (≥992px) .col-md-
@media (min-width: $screen-md-min) {
- background-size: calc(100%/2 + #{$container-md}/4) 100%;
+ background-size: calc(100% / 2 + #{$container-md} / 4) 100%;
+
#footer-links {
font-size: em(24px);
letter-spacing: em(1px);
line-height: em(42px);
}
+
#footer-contact div:first-child {
font-size: em(30px);
font-weight: 700;
line-height: em(34px);
}
+
#footer-contact-wrapper {
margin-right: -15px;
}
@@ -2982,9 +3085,10 @@ footer {
// Large devices Desktops (≥1200px) .col-lg-
@media (min-width: $screen-lg-min) {
- background-size: calc(100%/2 + #{$container-lg}/4);
+ background-size: calc(100% / 2 + #{$container-lg} / 4);
}
}
+
// +++++ Footer - END
#user-update-form [name=job_title] + p {
@@ -3003,7 +3107,7 @@ footer {
// Contact / Feedback
.feedback-content .form-group {
- label[data-required="true"][for]::after {
+ label[data-required='true'][for]::after {
content: ' *';
}
@@ -3021,18 +3125,24 @@ footer {
}
.switchtab-info {
+ padding-left: 1em;
+ padding-right: 1em;
+
@media (max-width: $screen-xs-max) {
display: none;
}
- padding-left: 1em;
- padding-right: 1em;
- .switchtab-text, .switchtab-heading, .switchtab-links {
+
+ .switchtab-text,
+ .switchtab-heading,
+ .switchtab-links {
padding-bottom: .75em;
padding-top: .75em;
}
+
.switchtab-text {
hyphens: none;
}
+
.switchtab-heading {
font-family: $font-family-monospace;
font-weight: bold;
@@ -3065,4 +3175,4 @@ footer {
@media (min-width: $screen-lg-min) {
min-height: unset;
}
-}
\ No newline at end of file
+}
--
GitLab