iwmlib/css/index.css

186 lines
3.7 KiB
CSS

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;
}
h2 {
padding-left: 20px;
}
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-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: flex-start;
align-content: flex-start;
}
/** See https://github.com/electron/electron/issues/4420 */
::selection {
background: transparent;
}