475 lines
10 KiB
SCSS
475 lines
10 KiB
SCSS
@import '_mixins.scss';
|
||
@import '_variables.scss';
|
||
@import '_essentials.scss';
|
||
@import '_overrides.scss';
|
||
@import '_icons.scss';
|
||
|
||
/**
|
||
* The card.scss is responsible for styling the top level of the card.
|
||
*
|
||
* + Info-Card
|
||
* ++ Header
|
||
* +++ Thubnail
|
||
* +++ Overview
|
||
* ++ Subcards-Container
|
||
* +++ n * Subcards
|
||
*/
|
||
|
||
.info-card {
|
||
font-family: $font-family;
|
||
color: white;
|
||
background-color: #333;
|
||
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
|
||
border-radius: 3px;
|
||
|
||
.ui {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 10px;
|
||
z-index: 11;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
|
||
.speech {
|
||
width: 52px;
|
||
height: 52px;
|
||
}
|
||
|
||
&:before {
|
||
content: '';
|
||
|
||
display: block;
|
||
content: '';
|
||
position: absolute;
|
||
z-index: -1;
|
||
|
||
// SIZE
|
||
|
||
$border: 16px;
|
||
border-radius: 3px;
|
||
|
||
top: -$border/2;
|
||
left: -$border/2;
|
||
width: calc(100% + #{$border});
|
||
height: calc(100% + #{$border});
|
||
|
||
// BACKGROUND
|
||
|
||
box-shadow: 0 0 15px #008bd2;
|
||
|
||
background: repeating-linear-gradient(
|
||
-45deg,
|
||
#008bd2,
|
||
#008bd2 20px,
|
||
#33a2db 20px,
|
||
#33a2db 40px
|
||
);
|
||
|
||
// ANIMATION
|
||
background-size: 56px 56px; /* This is unique for this background, need to find a pattern and develop a formula */
|
||
background-position-x: 0%;
|
||
-webkit-animation: 'slide' 20s infinite linear forwards;
|
||
|
||
opacity: 0;
|
||
transition: opacity 1s;
|
||
}
|
||
|
||
&.speech-plugin-is-reading {
|
||
.speech.button:before {
|
||
content: 'stop';
|
||
}
|
||
|
||
&:before {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes 'slide' {
|
||
0% {
|
||
background-position-x: 0%;
|
||
}
|
||
100% {
|
||
background-position-x: 100%;
|
||
}
|
||
}
|
||
|
||
.img-overlay {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
z-index: 200;
|
||
|
||
//padding: $default-space;
|
||
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
// padding: $default-space;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
}
|
||
}
|
||
|
||
nav {
|
||
z-index: 200;
|
||
position: absolute;
|
||
top: $default-space;
|
||
right: $default-space;
|
||
|
||
> * {
|
||
margin-right: $default-space / 3;
|
||
}
|
||
}
|
||
|
||
a {
|
||
// display: inline-block;
|
||
color: $link-color;
|
||
|
||
&:hover {
|
||
color: $link-color;
|
||
}
|
||
}
|
||
|
||
.mainview {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
|
||
//Inherits from info-card
|
||
border-radius: inherit;
|
||
}
|
||
|
||
p {
|
||
font-size: $regular-font-size;
|
||
}
|
||
|
||
header {
|
||
height: 35%;
|
||
color: $white;
|
||
background: linear-gradient(to top, $gray-dark, $gray 200%);
|
||
padding: $default-space * 3;
|
||
padding-bottom: $default-space;
|
||
border-radius: inherit;
|
||
|
||
display: grid;
|
||
grid-template-columns: 1fr 2fr;
|
||
grid-gap: 20px;
|
||
|
||
//box-shadow: $near-hover-box-shadow;
|
||
z-index: 1;
|
||
|
||
h1 {
|
||
-webkit-margin-before: 0;
|
||
font-size: $title-font-size;
|
||
font-weight: 500;
|
||
margin-bottom: -2px;
|
||
}
|
||
|
||
.overview {
|
||
// margin-left: $default-space;
|
||
padding: 0 $default-space;
|
||
margin-top: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
grid-column-start:2;
|
||
//justify-content: flex-end;
|
||
}
|
||
|
||
p {
|
||
font-weight: 400;
|
||
}
|
||
|
||
p.misc {
|
||
font-size: $regular-font-size;
|
||
font-style: italic;
|
||
font-weight: 300;
|
||
opacity: 0.5;
|
||
margin-bottom: 0.641em;
|
||
|
||
// // Added an icon before the build date.
|
||
// // Just for testing.
|
||
// &:before {
|
||
// opacity: 0.5;
|
||
// position: relative;
|
||
// top: 5px;
|
||
// margin-right: 10px;
|
||
// font-style: normal;
|
||
// content: "build";
|
||
// font: {
|
||
// family: $material-icons-font-family;
|
||
// };
|
||
// }
|
||
}
|
||
}
|
||
|
||
.thumbnail-wrapper {
|
||
overflow: hidden;
|
||
border-radius: $default-radius;
|
||
|
||
&:before {
|
||
content: ' ';
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
// z-index: 1;
|
||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
// Discuss: I added this for the thumbnail zoom icon
|
||
// explicitly. I got rid of the .zoomicon class, because
|
||
// everything was a zoomicon.
|
||
// Now every icon is just an icon. The icons directly on the
|
||
// subcards are card-icons.
|
||
//
|
||
// But a name for icons that can be on content elements of any
|
||
// card page is yet to be found. (e.g. zoomables).
|
||
.button {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.thumbnail {
|
||
height: 100%;
|
||
min-width: 100%;
|
||
object-fit: cover;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/*
|
||
This mixin selects the elements of $selector
|
||
and adjust the style it there are n children of this selector
|
||
inside the parent.
|
||
*/
|
||
@mixin childCountIs($selector, $n) {
|
||
// #{$var} just prints the string to css.
|
||
#{$selector}:first-child:nth-last-child(#{$n}),
|
||
#{$selector}:first-child:nth-last-child(#{$n}) ~ #{$selector} {
|
||
// @content prints the content to the mixin.
|
||
@content;
|
||
}
|
||
}
|
||
|
||
.subcards-container {
|
||
// flex: 1;
|
||
background-color: $gray-dark;
|
||
height: 65%;
|
||
|
||
// We should use css-grids instead of flexbox here:
|
||
// https://www.w3.org/TR/css-grid-1/
|
||
//"Unlike Flexible Box Layout, which is single-axis–oriented,
|
||
// Grid Layout is optimized for 2-dimensional layouts:
|
||
// those in which alignment of content is desired in both dimensions."
|
||
display: grid;
|
||
|
||
// Not sure why, but 1fr does not behave in the rows as expected:
|
||
// Expectation: All space is available and therefore 1fr means
|
||
// Half of the space available.
|
||
grid-auto-rows: 1fr;
|
||
grid-gap: $default-space;
|
||
padding: $default-space * 3;
|
||
padding-top: $default-space;
|
||
|
||
// The fr stands for fraction and should be preferably used with css grids.
|
||
grid-template-columns: repeat(9, 1fr);
|
||
grid-template-areas: '. tl tl tl . tr tr tr .' '. bl bl bl . br br br .';
|
||
|
||
@include childCountIs('.subcard-wrapper', 5) {
|
||
&:nth-child(4) {
|
||
grid-area: bl;
|
||
}
|
||
|
||
&:nth-child(5) {
|
||
grid-area: br;
|
||
}
|
||
}
|
||
|
||
@include childCountIs('.subcard-wrapper', 4) {
|
||
&:first-child {
|
||
grid-area: tl;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
grid-area: tr;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
grid-area: bl;
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
grid-area: br;
|
||
}
|
||
}
|
||
|
||
@include childCountIs('.subcard-wrapper', 3) {
|
||
&:first-child {
|
||
grid-area: tl;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
grid-area: tr;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
grid-row: 2;
|
||
grid-column: 4 / 7;
|
||
}
|
||
}
|
||
|
||
.subcard-wrapper {
|
||
padding: 0;
|
||
}
|
||
|
||
> div {
|
||
width: auto;
|
||
grid-column: span 3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-icon,
|
||
.zoomable-icon {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.speech-only-text {
|
||
opacity: 0;
|
||
position: absolute;
|
||
user-select: none;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
figure {
|
||
position: relative;
|
||
border: 3px solid $white;
|
||
box-shadow: $near-hover-shadow;
|
||
-webkit-margin-before: 0;
|
||
-webkit-margin-after: 0;
|
||
-webkit-margin-start: 0;
|
||
-webkit-margin-end: 0;
|
||
}
|
||
|
||
figure .icon {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
border-radius: $default-radius 0 0 0;
|
||
}
|
||
|
||
.view-button.icon {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
padding: 26px 26px;
|
||
margin: -23px -13px;
|
||
|
||
// padding: $default-space/2 $default-space;
|
||
|
||
&.inverted {
|
||
// background-color: transparent;
|
||
|
||
&:before {
|
||
color: $white;
|
||
}
|
||
}
|
||
|
||
&:before {
|
||
color: $gray-dark;
|
||
font-size: $large-font-size;
|
||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
color: $black;
|
||
background-color: $white;
|
||
pointer-events: none;
|
||
|
||
&.button {
|
||
pointer-events: all;
|
||
border-radius: $default-radius;
|
||
|
||
&.corner-button {
|
||
border-radius: 0;
|
||
|
||
&.bottom-right {
|
||
border-top-left-radius: $default-radius;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.inverted {
|
||
color: $white;
|
||
background-color: $black;
|
||
}
|
||
|
||
&.transparent-background {
|
||
background-color: transparent;
|
||
}
|
||
|
||
&.active {
|
||
color: $white;
|
||
background-color: $link-color;
|
||
}
|
||
|
||
&:before {
|
||
// This is a nice feature of SASS
|
||
// It lets you split attributes into
|
||
// namespaces.
|
||
//
|
||
// font-family:#, font-weight:#, font-size:#
|
||
// ==> font {family: #, weight: #, size: # }
|
||
font: {
|
||
family: $material-icons-font-family;
|
||
size: 36px;
|
||
}
|
||
|
||
@include beforeClass('.info') {
|
||
content: 'info_outline';
|
||
}
|
||
|
||
@include beforeClass('.close') {
|
||
content: 'close';
|
||
}
|
||
|
||
@include beforeClass('.zoom') {
|
||
content: 'search';
|
||
}
|
||
|
||
@include beforeClass('.speech') {
|
||
content: 'record_voice_over';
|
||
}
|
||
|
||
@include beforeClass('.language') {
|
||
content: 'language';
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-card.debug {
|
||
.view-button {
|
||
background-color: rgba(255, 0, 0, 0.5) !important;
|
||
|
||
&.disabled {
|
||
filter: grayscale(1);
|
||
}
|
||
}
|
||
}
|