Browse Source

Fixed some linter problems.

obersalzberg
Sebastian Kupke 2 years ago
parent
commit
fc6b30f03c
4 changed files with 79 additions and 89 deletions
  1. +23
    -25
      css/doctest.css
  2. +16
    -16
      css/flipeffect.css
  3. +39
    -47
      css/index.css
  4. +1
    -1
      rollup.config.js

+ 23
- 25
css/doctest.css View File

@ -1,12 +1,11 @@
html
{
padding: 0px;
font-size: 16px;
background: white;
font-family: Arial,sans-serif;
color: #000;
max-width: 932px;
margin:0 auto;
html {
padding: 0;
font-size: 16px;
background: white;
font-family: Arial, sans-serif;
color: #000;
max-width: 932px;
margin: 0 auto;
}
.grayBorder {
@ -24,10 +23,10 @@ html
}
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
@ -44,28 +43,27 @@ canvas {
margin-left: 8px;
}
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
position: relative;
height: 0;
overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
padding-bottom: 56.25%;
padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
padding-bottom: 75%;
padding-bottom: 75%;
}
.intrinsic-container iframe {
position: absolute;
border: 0;
top:0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
border: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

+ 16
- 16
css/flipeffect.css View File

@ -1,6 +1,5 @@
.flipWrapper
{
.flipWrapper {
position: absolute;
top: 0;
left: 0;
@ -16,7 +15,8 @@
width: 100%;
height: 100%;
/*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/
/*** 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;
@ -24,21 +24,21 @@
user-drag: none; */
}
.flipFace{
.flipFace {
box-shadow: 2px 2px 10px #000;
visibility: hidden;
}
.front{
.front {
width: 100%;
height: 100%;
position:absolute;
background-color:#333;
position: absolute;
background-color: #333;
}
.back{
background-color:#333;
position:absolute;
.back {
background-color: #333;
position: absolute;
border: 8px solid white;
}
@ -48,8 +48,8 @@
width: 44px;
height: 44px;
padding: 4px;
right: 0px;
top: 0px;
right: 0;
top: 0;
}
.infoBtn {
@ -58,8 +58,8 @@
width: 44px;
height: 44px;
padding: 4px;
right: 0px;
bottom: 0px;
right: 0;
bottom: 0;
}
.backBtn {
@ -68,6 +68,6 @@
width: 44px;
height: 44px;
padding: 4px;
right: 0px;
bottom: 0px;
right: 0;
bottom: 0;
}

+ 39
- 47
css/index.css View File

@ -1,19 +1,18 @@
html {
height: 100%;
width: 100%;
margin: 0px;
margin: 0;
}
body
{
margin: 0px;
padding: 0px;
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
font-size: 22pt;
-webkit-tap-highlight-color: #ccc;
background-color: #DDD;
background-color: #ddd;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
@ -22,24 +21,22 @@ body
user-select: none;
-webkit-hyphens: auto;
hyphens: auto;
/* https://davidwalsh.name/font-smoothing */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h3
{
h3 {
color: white;
padding: 4px;
margin: 2px;
background-color: rgba(0, 0, 15, .5);
background-color: rgba(0, 0, 15, 0.5);
}
a { text-decoration: none; }
div.wrapper
{
div.wrapper {
overflow: hidden;
width: 100%;
height: 100%;
@ -49,29 +46,32 @@ div.wrapper
/* 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; }
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; }
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; }
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; }
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; }
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
{
.thumbnail {
position: relative;
-ms-zoom: 0.25;
-moz-transform: scale(0.25);
@ -82,9 +82,7 @@ div.wrapper
-webkit-transform-origin: 0 0;
}
.thumbnail:after
{
.thumbnail::after {
content: "";
display: block;
position: absolute;
@ -95,11 +93,14 @@ div.wrapper
jamesfuthey blog. Otherwise touches would go through on iPad. ***/
}
.thumbnail iframe
{
iframe {
pointer-events: none;
}
.thumbnail iframe {
width: 1024px;
height: 624px;
-webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
-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;
@ -108,22 +109,20 @@ div.wrapper
animation: color_change 1s infinite alternate;
}
.thumbnail-container
{
.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;
color: #ddd;
}
div.preview
{
div.preview {
display: inline-block;
margin: 22px;
padding: 0px;
padding: 0;
color: #333;
font-size: 12pt;
text-align: center;
@ -131,8 +130,7 @@ div.preview
height: 196px;
}
div.title
{
div.title {
padding-top: 8px;
width: 256px;
height: 20px;
@ -140,10 +138,9 @@ div.title
overflow: hidden;
}
.container
{
margin: 0px;
padding: 0px;
.container {
margin: 0;
padding: 0;
border: 2pt #000;
min-height: 100%;
min-width: 100%;
@ -156,12 +153,7 @@ div.title
align-content: flex-end;
}
iframe {
pointer-events: none;
}
/** See https://github.com/electron/electron/issues/4420 */
::selection {
background: transparent;
}

+ 1
- 1
rollup.config.js View File

@ -19,4 +19,4 @@ export default [{
watch: {
clearScreen: false
}
}];
}]

Loading…
Cancel
Save