project files added
This commit is contained in:
mhalfmann
+11
@@ -0,0 +1,11 @@
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
color: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
article {
|
||||
top: 66px;
|
||||
}
|
||||
+10719
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+440
@@ -0,0 +1,440 @@
|
||||
@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';
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
header {
|
||||
color: white;
|
||||
min-height: 33%;
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 67%;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 0px;
|
||||
padding: 32px;
|
||||
padding-right: 64px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 66px;
|
||||
}
|
||||
|
||||
.preview img {
|
||||
max-height: 120px;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.preview p {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
.preview {
|
||||
text-align: center;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 2px solid lightgrey;
|
||||
float: left;
|
||||
margin: 12px;
|
||||
max-height: 300px;
|
||||
max-width: 480px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mainview {
|
||||
background-color: #444;
|
||||
color: white;
|
||||
padding: 32px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 1400px;
|
||||
height: 1200px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.subcard {
|
||||
position: relative;
|
||||
background-color: white;
|
||||
height: 300px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.svg-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subcard h3 {
|
||||
color: black;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.zoom-icon {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
/* ------------ zoomables and zoomed items below ------------ */
|
||||
|
||||
.imggroupcontainer {
|
||||
margin-top: 10px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.imggroupcontainer:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imggroupcontainer:before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-top: -1.25em;
|
||||
}
|
||||
|
||||
.imgcontainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.singlefig {
|
||||
max-width: 50%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.videofig {
|
||||
max-width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.groupfig {
|
||||
max-width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
figure img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
figure svg {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
figure video {
|
||||
object-fit: cover;
|
||||
/*box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
|
||||
border: 10px solid rgba(122, 0, 0, 0.05);*/
|
||||
}
|
||||
|
||||
figure .mainimg {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
/*box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
|
||||
border: 10px solid rgba(122, 0, 0, 0.05);*/
|
||||
}
|
||||
|
||||
figure .groupmainimg {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
/*box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
|
||||
border: 10px solid rgba(122, 0, 0, 0.05);*/
|
||||
}
|
||||
|
||||
figcaption {
|
||||
/* position: absolute; */
|
||||
text-align: center;
|
||||
padding-top: 6px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.zoomcap {
|
||||
/*position: absolute;*/
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zoomed-figure {
|
||||
position: absolute;
|
||||
font-family: 'MyriadRegular', sans-serif;
|
||||
background: white;
|
||||
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.zoomed-figure img {
|
||||
top: 0px;
|
||||
/*box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
|
||||
border: 10px solid rgba(122, 0, 0, 0.05);*/
|
||||
}
|
||||
|
||||
.zoomed-figure figure {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.zoomed-figure figcaption {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.ZoomedIcon {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.subcard-content {
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
-webkit-hyphens: auto;
|
||||
}
|
||||
|
||||
/* ------------ bulma overwrites below ------------ */
|
||||
|
||||
.content h1 {
|
||||
min-height: 70px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.content figure {
|
||||
background: transparent;
|
||||
display: block;
|
||||
margin-left: 0em;
|
||||
margin-right: 0em;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
-webkit-hyphens: auto;
|
||||
}
|
||||
|
||||
.content:not(:last-child) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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 .icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 0px solid transparent;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.view-button.icon {
|
||||
background-color: #6699FF;
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.view-button.icon.inverted:before {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.view-button.icon:before {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.view-button.icon:hover {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.icon {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
color: white;
|
||||
background-color: #6699FF;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.icon.button {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.icon.button.corner-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.icon.button.corner-button.bottom-right {}
|
||||
|
||||
.icon.inverted {
|
||||
color: #f2f2f2;
|
||||
background-color: #6699FF;
|
||||
}
|
||||
|
||||
.icon.transparent-background {
|
||||
background-color: #6699FF;
|
||||
}
|
||||
|
||||
.icon.active {
|
||||
color: #f2f2f2;
|
||||
background-color: #6699FF;
|
||||
}
|
||||
|
||||
.icon:before {
|
||||
font-family: "Material Icons";
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.icon.info {
|
||||
background-color: transparent;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.icon.info:before {
|
||||
font-size: 44px;
|
||||
color: transparent;
|
||||
content: url("../assets/images/info.svg") "w";
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
+266
@@ -0,0 +1,266 @@
|
||||
:root {
|
||||
--white: rgb(250, 250, 250);
|
||||
--light-gray: rgb(219, 219, 219);
|
||||
--gray: rgb(66, 66, 66);
|
||||
--black: rgb(20, 20, 20);
|
||||
--dark-background: rgb(50, 50, 50);
|
||||
|
||||
--border-radius: 5px;
|
||||
}
|
||||
|
||||
html {
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dark-mode nav{
|
||||
border-color: var(--white);
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-top: 50px;
|
||||
min-width: 30%;
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
padding: 20px 30px;
|
||||
/* background-color: var(--light-gray); */
|
||||
border: 1px solid var(--black);
|
||||
}
|
||||
|
||||
nav > h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav > ol a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
html.dark-mode {
|
||||
background: var(--dark-background);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.dark-mode h1,
|
||||
.dark-mode h2,
|
||||
.dark-mode h3,
|
||||
.dark-mode h4,
|
||||
.dark-mode h5,
|
||||
.dark-mode h6 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #569cd6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dark-mode a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dark-mode button {
|
||||
border: 1px solid rgb(211, 211, 211);
|
||||
color: rgb(211, 211, 211);
|
||||
background: linear-gradient(to top, rgb(53, 53, 53), rgb(73, 73, 73));
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--gray);
|
||||
color: var(--gray);
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
display: none;
|
||||
}
|
||||
input[type='checkbox'] + .checkbox {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.controls > * {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.dark-mode .checkbox {
|
||||
background-color: var(--gray);
|
||||
border: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--black);
|
||||
}
|
||||
|
||||
.checkbox:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked + .checkbox {
|
||||
background-color: rgb(174, 238, 78);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked + .checkbox:after {
|
||||
left: 11px;
|
||||
top: 6px;
|
||||
width: 5px;
|
||||
height: 12px;
|
||||
border: solid var(--white);
|
||||
border-width: 0 4px 4px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
button:focus {
|
||||
box-shadow: 0 0 3px 1px #569cd6;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-style: italic;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.doctest {
|
||||
margin: 0;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.collapsed .doctest {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doctest-wrapper {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.doctest-titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: whitesmoke;
|
||||
background-color: #111;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.doctest-section-title {
|
||||
margin: 0;
|
||||
margin-left: 40px;
|
||||
|
||||
padding: 0;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.grayBorder {
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
.insetPadding {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
/*** For regions observed by InteraktionDelegates and -Mappers ***/
|
||||
-ms-content-zooming: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
canvas {
|
||||
-ms-content-zooming: none; /** Crucial for MS Edge pointer events **/
|
||||
touch-action: none; /** Crucial for MS Edge? **/
|
||||
}
|
||||
|
||||
#runtime-errors {
|
||||
left: -8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.intrinsic-container {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 16x9 Aspect Ratio */
|
||||
.intrinsic-container-16x9 {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
/* 4x3 Aspect Ratio */
|
||||
.intrinsic-container-4x3 {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.intrinsic-container iframe {
|
||||
position: absolute;
|
||||
border: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
|
||||
.flipWrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Fix to render
|
||||
.flipWrapper > div:first-child{
|
||||
z-index: 1;
|
||||
} */
|
||||
|
||||
.flipCard {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/
|
||||
|
||||
/* -webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none; */
|
||||
}
|
||||
|
||||
.flipFace {
|
||||
box-shadow: 2px 2px 10px #000;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.front {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.back {
|
||||
background-color: #333;
|
||||
position: absolute;
|
||||
border: 8px solid white;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
transform-origin: top right;
|
||||
position: absolute;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 4px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.infoBtn {
|
||||
transform-origin: bottom right;
|
||||
position: fixed;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 4px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.backBtn {
|
||||
transform-origin: bottom right;
|
||||
position: fixed;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 4px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
circle {
|
||||
stroke: white;
|
||||
fill: transparent;
|
||||
stroke-width: 8px;
|
||||
}
|
||||
|
||||
mask circle {
|
||||
stroke-width: 0;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.addedImage {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.debugRect {
|
||||
stroke: red;
|
||||
fill: transparent;
|
||||
stroke-width: 8px;
|
||||
}
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
font-size: 22pt;
|
||||
-webkit-tap-highlight-color: #ccc;
|
||||
background-color: #ddd;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-overflow-scrolling: auto;
|
||||
user-select: none;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
|
||||
/* https://davidwalsh.name/font-smoothing */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
background-color: rgba(0, 0, 15, 0.5);
|
||||
}
|
||||
|
||||
a { text-decoration: none; }
|
||||
|
||||
div.wrapper {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 0% 100%;
|
||||
transform: scale(0.25);
|
||||
}
|
||||
|
||||
/* Color animation from https://www.tjvantoll.com/2012/02/20/css3-color-animations/ */
|
||||
@-webkit-keyframes color_change {
|
||||
from { background-color: rgba(0, 0, 0, 0); }
|
||||
to { background-color: red; }
|
||||
}
|
||||
|
||||
@-moz-keyframes color_change {
|
||||
from { background-color: rgba(0, 0, 0, 0); }
|
||||
to { background-color: red; }
|
||||
}
|
||||
|
||||
@-ms-keyframes color_change {
|
||||
from { background-color: rgba(0, 0, 0, 0); }
|
||||
to { background-color: red; }
|
||||
}
|
||||
|
||||
@-o-keyframes color_change {
|
||||
from { background-color: rgba(0, 0, 0, 0); }
|
||||
to { background-color: red; }
|
||||
}
|
||||
|
||||
@keyframes color_change {
|
||||
from { background-color: rgba(0, 0, 0, 0); }
|
||||
to { background-color: red; }
|
||||
}
|
||||
|
||||
/*** CSS taken from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.7v7fshos5 ***/
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
-ms-zoom: 0.25;
|
||||
-moz-transform: scale(0.25);
|
||||
-moz-transform-origin: 0 0;
|
||||
-o-transform: scale(0.25);
|
||||
-o-transform-origin: 0 0;
|
||||
-webkit-transform: scale(0.25);
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.thumbnail::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: -1024px; /*** This is a deviation from the above mentioned
|
||||
jamesfuthey blog. Otherwise touches would go through on iPad. ***/
|
||||
}
|
||||
|
||||
iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.thumbnail iframe {
|
||||
width: 1024px;
|
||||
height: 624px;
|
||||
-webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
|
||||
animation-delay: 3s;
|
||||
-webkit-animation: color_change 1s infinite alternate;
|
||||
-moz-animation: color_change 1s infinite alternate;
|
||||
-ms-animation: color_change 1s infinite alternate;
|
||||
-o-animation: color_change 1s infinite alternate;
|
||||
animation: color_change 1s infinite alternate;
|
||||
}
|
||||
|
||||
.thumbnail-container {
|
||||
width: calc(1024px * 0.25);
|
||||
height: calc(624px * 0.25);
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 2px 2px 10px #000;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
div.preview {
|
||||
display: inline-block;
|
||||
margin: 22px;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
font-size: 12pt;
|
||||
text-align: center;
|
||||
width: 256px;
|
||||
height: 196px;
|
||||
}
|
||||
|
||||
div.title {
|
||||
padding-top: 8px;
|
||||
width: 256px;
|
||||
height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 2pt #000;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
display: -webkit-flex;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-align-content: flex-end;
|
||||
align-content: flex-end;
|
||||
}
|
||||
|
||||
/** See https://github.com/electron/electron/issues/4420 */
|
||||
::selection {
|
||||
background: transparent;
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
.popup {
|
||||
width: 800px;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
min-width: 400px;
|
||||
color: #191919;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
padding: 25.64px 40px;
|
||||
}
|
||||
|
||||
.popup img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.popup img:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.popup img:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.popup .notch {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.PopupContent p:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
|
||||
.info-card .subcard {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.info-card .subcard p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.info-card .content h1 {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.info-card .subcard .preview p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-card>.zoomable-wrapper figcaption, .info-card .mainview>.subcard figcaption {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
Reference in New Issue
Block a user