iwmlib/lib/card/test/example/_theme/css/card.css

650 lines
13 KiB
CSS
Raw Permalink Normal View History

/* Color */
/* Font Properties */
/* Spacing */
/* Borders */
/* Shadows */
/*
$context: "../../../../../..";
$white: #FEFEFE;
$shady-white: rgb(240, 240, 240);
$gray: #CCC;
$dark: #333;
$black: #222;
$small-edge-radius: 3px;
$big-edge-radius: 10px;
$small-pad: 16px;
$big-pad: 32px;
$tuebingen-red: #e73230;
$increased-letter-spacing: 0.1em;
$font-color: $black;
$text-font-size: 26px;
$medium-font-size: 28px;
$large-font-size: 32px;
$regular-font-size: 1.451rem;
$subtitle-font-size: $medium-font-size;
$title-font-size: $subtitle-font-size * 1.641;
/* Font Weights */
/*
$strong-font-weight: 700;
$medium-font-weight: 500;
$light-font-weight: 300;
*/
/**
The essential.scss defines proerties that
are essential for the basic features of an
info card and are completely
*/
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.info-card {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.zoomable-wrapper {
display: inline-block;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-size: 0;
}
.zoomable-wrapper figure {
display: inline-block;
}
.zoomable-wrapper figcaption {
font-size: initial;
}
.zoomable-wrapper > figure > div {
height: 100%;
}
.zoomable-wrapper svg {
overflow: visible;
width: 100%;
height: 100%;
}
div {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*
If any default style by the browser or
certain plugins (e.g. Bulma) needs to be overwritten,
this can be done in this file.
*/
/* Remove the negative margin from Bulma's columns. */
.columns {
margin: 0 !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
color: unset;
}
.content:not(:last-child) {
margin-bottom: 0;
}
.button {
border-color: unset;
border: unset;
border-radius: unset;
}
.button:active, .button:hover {
border-color: unset;
}
.icon {
width: unset;
height: unset;
}
/* Color */
/* Font Properties */
/* Spacing */
/* Borders */
/* Shadows */
/*
$context: "../../../../../..";
$white: #FEFEFE;
$shady-white: rgb(240, 240, 240);
$gray: #CCC;
$dark: #333;
$black: #222;
$small-edge-radius: 3px;
$big-edge-radius: 10px;
$small-pad: 16px;
$big-pad: 32px;
$tuebingen-red: #e73230;
$increased-letter-spacing: 0.1em;
$font-color: $black;
$text-font-size: 26px;
$medium-font-size: 28px;
$large-font-size: 32px;
$regular-font-size: 1.451rem;
$subtitle-font-size: $medium-font-size;
$title-font-size: $subtitle-font-size * 1.641;
/* Font Weights */
/*
$strong-font-weight: 700;
$medium-font-weight: 500;
$light-font-weight: 300;
*/
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url(../fonts/material-icon-font/MaterialIcons-Regular.eot);
/* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/material-icon-font/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/material-icon-font/MaterialIcons-Regular.woff) format("woff"), url(../fonts/material-icon-font/MaterialIcons-Regular.ttf) format("truetype");
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
/* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
}
/**
* 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: "Calibri", sans-serif;
color: white;
background-color: #333;
-webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
border-radius: 3px;
/*
This mixin selects the elements of $selector
and adjust the style it there are n children of this selector
inside the parent.
*/
}
.info-card .ui {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 10px;
z-index: 11;
position: absolute;
top: 0;
}
.info-card .speech {
width: 52px;
height: 52px;
}
.info-card:before {
content: '';
display: block;
content: '';
position: absolute;
z-index: -1;
border-radius: 3px;
top: -8px;
left: -8px;
width: calc(100% + 16px);
height: calc(100% + 16px);
-webkit-box-shadow: 0 0 15px #008bd2;
box-shadow: 0 0 15px #008bd2;
background: repeating-linear-gradient(-45deg, #008bd2, #008bd2 20px, #33a2db 20px, #33a2db 40px);
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;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.info-card.speech-plugin-is-reading .speech.button:before {
content: 'stop';
}
.info-card.speech-plugin-is-reading:before {
opacity: 1;
}
@-webkit-keyframes 'slide' {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 100%;
}
}
.info-card .img-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 200;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info-card .img-overlay img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
@-webkit-keyframes pulse {}
@keyframes pulse {}.info-card nav {
z-index: 200;
position: absolute;
top: 20px;
right: 20px;
}
.info-card nav > * {
margin-right: 6.66667px;
}
.info-card a {
color: #008bd2;
}
.info-card a:hover {
color: #008bd2;
}
.info-card .mainview {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
border-radius: inherit;
}
.info-card p {
font-size: 26px;
}
.info-card header {
height: 35%;
color: #f2f2f2;
background: -webkit-gradient(linear, left bottom, left top, from(#333333), color-stop(200%, #6f6f6e));
background: linear-gradient(to top, #333333, #6f6f6e 200%);
padding: 60px;
padding-bottom: 20px;
border-radius: inherit;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
z-index: 1;
}
.info-card header h1 {
-webkit-margin-before: 0;
font-size: 52px;
font-weight: 500;
margin-bottom: -2px;
}
.info-card header .overview {
padding: 0 20px;
margin-top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-grid-column: 2;
grid-column-start: 2;
}
.info-card header p {
font-weight: 400;
}
.info-card header p.misc {
font-size: 26px;
font-style: italic;
font-weight: 300;
opacity: 0.5;
margin-bottom: 0.641em;
}
.info-card .thumbnail-wrapper {
overflow: hidden;
border-radius: 3px;
}
.info-card .thumbnail-wrapper:before {
content: ' ';
position: absolute;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
}
.info-card .thumbnail-wrapper .button {
position: absolute;
bottom: 0;
right: 0;
}
.info-card .thumbnail {
height: 100%;
min-width: 100%;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
}
.info-card .subcards-container {
background-color: #333333;
height: 65%;
display: -ms-grid;
display: grid;
grid-auto-rows: 1fr;
grid-gap: 20px;
padding: 60px;
padding-top: 20px;
-ms-grid-columns: (1fr)[9];
grid-template-columns: repeat(9, 1fr);
grid-template-areas: '. tl tl tl . tr tr tr .' '. bl bl bl . br br br .';
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(5):nth-child(4),
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(5) ~ .subcard-wrapper:nth-child(4) {
-ms-grid-row: 2;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
grid-area: bl;
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(5):nth-child(5),
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(5) ~ .subcard-wrapper:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column: 6;
-ms-grid-column-span: 3;
grid-area: br;
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(4):first-child,
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(4) ~ .subcard-wrapper:first-child {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
grid-area: tl;
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(4):nth-child(2),
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(4) ~ .subcard-wrapper:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 6;
-ms-grid-column-span: 3;
grid-area: tr;
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(4):nth-child(3),
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(4) ~ .subcard-wrapper:nth-child(3) {
-ms-grid-row: 2;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
grid-area: bl;
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(4):nth-child(4),
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(4) ~ .subcard-wrapper:nth-child(4) {
-ms-grid-row: 2;
-ms-grid-column: 6;
-ms-grid-column-span: 3;
grid-area: br;
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(3):first-child,
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(3) ~ .subcard-wrapper:first-child {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
grid-area: tl;
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(3):nth-child(2),
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(3) ~ .subcard-wrapper:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 6;
-ms-grid-column-span: 3;
grid-area: tr;
}
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(3):nth-child(3),
.info-card .subcards-container .subcard-wrapper:first-child:nth-last-child(3) ~ .subcard-wrapper:nth-child(3) {
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-column: 4;
-ms-grid-column-span: 3;
grid-column: 4 / 7;
}
.info-card .subcards-container .subcard-wrapper {
padding: 0;
}
.info-card .subcards-container > div {
width: auto;
grid-column: span 3;
}
.card-icon,
.zoomable-icon {
position: absolute;
bottom: 0;
right: 0;
}
.speech-only-text {
opacity: 0;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: -1;
}
figure {
position: relative;
border: 3px solid #f2f2f2;
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
-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: 3px 0 0 0;
}
.view-button.icon {
position: absolute;
bottom: 0;
right: 0;
padding: 26px 26px;
margin: -23px -13px;
}
.view-button.icon.inverted:before {
color: #f2f2f2;
}
.view-button.icon:before {
color: #333333;
font-size: 36px;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.icon {
min-width: 44px;
min-height: 44px;
color: #191919;
background-color: #f2f2f2;
pointer-events: none;
}
.icon.button {
pointer-events: all;
border-radius: 3px;
}
.icon.button.corner-button {
border-radius: 0;
}
.icon.button.corner-button.bottom-right {
border-top-left-radius: 3px;
}
.icon.inverted {
color: #f2f2f2;
background-color: #191919;
}
.icon.transparent-background {
background-color: transparent;
}
.icon.active {
color: #f2f2f2;
background-color: #008bd2;
}
.icon:before {
font-family: "Material Icons";
font-size: 36px;
}
.icon.info:before {
content: 'info_outline';
}
.icon.close:before {
content: 'close';
}
.icon.zoom:before {
content: 'search';
}
.icon.speech:before {
content: 'record_voice_over';
}
.icon.language:before {
content: 'language';
}
.info-card.debug .view-button {
background-color: rgba(255, 0, 0, 0.5) !important;
}
.info-card.debug .view-button.disabled {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}