Move some classes from landing to general

This commit is contained in:
Konstantinos Triantafyllou 2023-02-17 19:20:39 +02:00
parent 68fe02948c
commit a83c675f25
2 changed files with 105 additions and 101 deletions

View File

@ -18,6 +18,9 @@
@general-search-form-background-image: none;
@general-search-form-background-position: center bottom;
@general-download-from-border-radius: @global-border-radius;
@general-download-from-background-color: @ciel-color;
@general-tab-featured-tab: @global-primary-background;
@general-number-card-border-width: 6px;
@ -42,6 +45,15 @@ main {
max-width: 500px;
}
/* Special characters */
.bullet:before {
content: '\2022';
}
.space:before {
content: '\00A0';
}
/* Visually hidden (for icons) */
.visually-hidden {
border: 0 !important;
@ -56,12 +68,8 @@ main {
white-space: nowrap !important;
}
/* UsageCounts gradient color */
.text-usage-counts:extend(.uk-text-background) {
background-image: @usage-counts-icon-gradient;
}
.metrics-number:extend(.uk-text-background) {
background-image: @usage-counts-number-gradient;
background-image: @usage-counts-number-gradient;
}
/* Number */
@ -158,7 +166,7 @@ noscript, ol, section, table, tfoot, ul, video;
}
each(@lines, {
&.lines-@{value} > *{
&.lines-@{value} > * {
-webkit-line-clamp: @value;
}
});
@ -190,7 +198,7 @@ noscript, ol, section, table, tfoot, ul, video;
/* Search Form */
.search-form, .generalSearchForm {
background-color: @general-search-form-background;
background-image: @general-search-form-background-image;
background-image: @general-search-form-background-image;
background-position: @general-search-form-background-position;
}
@ -206,6 +214,22 @@ noscript, ol, section, table, tfoot, ul, video;
}
}
/* Download drop */
.download-drop {
width: unset;
.download-drop-item {
padding: 10px 20px;
margin: 0 4px;
border-radius: @general-download-from-border-radius;
&:hover {
background: @general-download-from-background-color;
}
}
}
.uk-tab {
& > li.uk-active > a.featuredTab, & > * > a.featuredTab {
color: @general-tab-featured-tab !important;
@ -246,6 +270,25 @@ noscript, ol, section, table, tfoot, ul, video;
}
}
/* General Icons */
.open-access {
color: @open-access-color;
}
.closed-access {
color: @close-access-color;
}
.text-usage-counts:extend(.uk-text-background),
a:hover .text-usage-counts-hover:extend(.uk-text-background) {
background-image: @usage-counts-icon-gradient;
}
.bip-icon, a:hover .bip-icon-hover {
color: @bip-color;
}
/* Social buttons */
.twitter {
&, &:hover {

View File

@ -41,12 +41,6 @@
@landing-tab-color-active: @landing-portal-color;
@landing-tab-border-active: @landing-portal-color;
@landing-download-from-background: @global-background;
@landing-download-from-border-width: @global-border-width;
@landing-download-from-border: @global-border;
@landing-download-from-border-radius: @global-border-radius;
@landing-download-from-background-color: @ciel-color;
@landing-card-tab-border-radius: @global-border-radius;
@landing-card-tab-border-width: 5px;
@ -60,9 +54,9 @@
@landing-metrics-grip-gap: 80px;
.landing {
#landing-center-content {
min-height: @landing-sidebar-height;
}
#landing-center-content {
min-height: @landing-sidebar-height;
}
#landing-left-sidebar {
width: @landing-left-sidebar-width;
@ -170,101 +164,68 @@
z-index: @landing-z-index + 1;
}
.download-from > * {
background-color: @landing-download-from-background;
border: @landing-download-from-border-width solid @landing-download-from-border;
border-radius: @landing-download-from-border-radius;
}
.card-tab {
border-radius: @landing-card-tab-border-radius;
border-left: @landing-card-tab-border-width solid @landing-section-separator;
}
.landing-action-bar {
padding: @landing-action-bar-padding;
border-radius: @landing-action-bar-border-radius;
border: @landing-portal-color solid @landing-action-bar-border-width;
.landing-action-bar-grid-gap {
grid-gap: @landing-action-bar-grid-gap;
}
.landing-action-button-orcid {
icon {
color: @landing-action-button-orcid-color;
}
&.uk-disabled {
color: @landing-action-button-orcid-disabled-color;
icon {
color: @landing-action-button-orcid-disabled-color;
}
}
}
}
.landing-action-bar {
padding: @landing-action-bar-padding;
border-radius: @landing-action-bar-border-radius;
border: @landing-portal-color solid @landing-action-bar-border-width;
.landing-action-bar-divider {
background: @disable-color;
width: @landing-action-bar-divider-width;
height: @landing-action-bar-divider-height;
}
.landing-action-bar-grid-gap {
grid-gap: @landing-action-bar-grid-gap;
}
}
// TODO: when we get there
.landing-action-bar-mobile {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: @global-z-index - 20;
& > div {
padding: 10px 20px;
border-top: @landing-action-bar-border-width solid lightgrey;
}
}
// ----------------------
.landing-action-bar-divider {
background: @disable-color;
width: @landing-action-bar-divider-width;
height: @landing-action-bar-divider-height;
}
.download-drop {
width: unset;
.download-drop-item {
padding: 10px 20px;
margin: 0 4px;
border-radius: @landing-download-from-border-radius;
&:hover {
background: @landing-download-from-background-color;
}
}
}
// TODO: when we get there
.landing-action-bar-mobile {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: @global-z-index - 20;
.landing-metrics-overview {
grid-gap: @landing-metrics-grip-gap;
}
.landing-metrics-card {
background-image: url("../metrics-bg.svg");
background-repeat: no-repeat;
background-size: cover;
}
& > div {
padding: 10px 20px;
border-top: @landing-action-bar-border-width solid lightgrey;
}
}
// To be moved?
.open-access {
color: @open-access-color;
}
.bip-icon {
color: @bip-color;
}
.landing-metrics-overview {
grid-gap: @landing-metrics-grip-gap;
}
.landing-metrics-card {
background-image: url("../metrics-bg.svg");
background-repeat: no-repeat;
background-size: cover;
}
// rules for overriding styles of altmetrics embedded library
.altmetric-embed {
position: relative !important;
z-index: 1 !important;
}
.altmetric-normal-legend {
margin: 0 40px 0 0 !important;
.altmetric-see-more-details {
display: none !important;
}
}
.altmetric-popover-content {
background-color: unset !important;
font-size: unset !important;
font-family: unset !important;
}
// rules for overriding styles of altmetrics embedded library
.altmetric-embed {
position: relative !important;
z-index: 1 !important;
}
.altmetric-normal-legend {
margin: 0 40px 0 0 !important;
.altmetric-see-more-details {
display: none !important;
}
}
.altmetric-popover-content {
background-color: unset !important;
font-size: unset !important;
font-family: unset !important;
}
}