update user interface
This commit is contained in:
Georg Fischer
parent
ee7a681d61
commit
6a1f4fda80
89
index.html
89
index.html
@ -6,51 +6,60 @@
|
|||||||
<link rel="stylesheet" href="styles/main.css" />
|
<link rel="stylesheet" href="styles/main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<article class="content intro">
|
|
||||||
<h1 class="headline">glitch images</h1>
|
<div class="nav-wrapper dark-bg">
|
||||||
<p>drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
|
<div class="export-wrapper center">
|
||||||
<p>if you like this one, you can check out some of his other <a href="http://snorpey.github.io/experiments/">javascript experiments</a>.</p>
|
<h1 class="headline">glitch images</h1>
|
||||||
</article>
|
<button id="import-button" class="button" title="open image from your computer">import image</button>
|
||||||
<div class="content" id="controls">
|
<input type="file" id="import-input" accept="image/*" />
|
||||||
<div class="control-wrapper">
|
<button id="export-button" class="button" title="save image to your computer">download image</button>
|
||||||
<label class="control-label" for="amount-slider">amount</label>
|
<button id="imgur-button" class="button" title="share image via imgur.com"><span>share image</span></button>
|
||||||
<input class="control-input control-number" id="amount-number" type="number" min="0" max="99" value="50" maxlength="2" />
|
<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
|
||||||
<input class="control-input control-slider" id="amount-slider" type="range" min="0" max="99" value="50" step="1" maxlength="2" />
|
<div id="imgur-url-container">
|
||||||
|
<input id="imgur-url-input" type="text" readonly="readonly" />
|
||||||
|
<a href id="imgur-url-link" class="button social-link" href="http://imgur.com" target="_blank">open</a>
|
||||||
|
<a href id="twitter-link" class="button social-link" href="http://twitter.com" target="_blank" title="post your image on twitter">twitter</a>
|
||||||
|
<a href id="facebook-link" class="button social-link" href="http://facebook.com" target="_blank" title="post your image on facebook">facebook</a>
|
||||||
|
<a href id="reddit-link" class="button social-link" href="http://reddit.com" target="_blank" title="post your image on reddit">reddit</a>
|
||||||
|
<span id="imgur-url-error">sorry, something went wrong. maybe try again?</span>
|
||||||
|
</div>
|
||||||
|
<button class="intro-button button is-active">ℹ</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-wrapper">
|
|
||||||
<label class="control-label" for="seed-slider">seed</label>
|
|
||||||
<input class="control-input control-number" id="seed-number" type="number" min="0" max="100" value="50" maxlength="2" />
|
|
||||||
<input class="control-input control-slider" id="seed-slider" type="range" min="0" max="100" value="50" step="1" maxlength="2" />
|
|
||||||
</div>
|
|
||||||
<div class="control-wrapper">
|
|
||||||
<label class="control-label" for="iterations-slider">iterations</label>
|
|
||||||
<input class="control-input control-number" id="iterations-number" type="number" min="1" max="50" value="5" maxlength="2" />
|
|
||||||
<input class="control-input control-slider" id="iterations-slider" type="range" min="1" max="50" value="5" step="1" maxlength="2"/>
|
|
||||||
</div>
|
|
||||||
<div class="control-wrapper">
|
|
||||||
<label class="control-label" for="quality-slider">quality</label>
|
|
||||||
<input class="control-input control-number" id="quality-number" type="number" min="1" max="99" value="50" maxlength="2" />
|
|
||||||
<input class="control-input control-slider" id="quality-slider" type="range" min="1" max="99" value="50" step="1" maxlength="2" />
|
|
||||||
</div>
|
|
||||||
<button id="random-button" class="button is-hidden">randomize</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="export-wrapper">
|
<div class="nav-wrapper light-bg">
|
||||||
<button id="import-button" class="button" title="open image from your computer">import image</button>
|
<div class="content center" id="controls">
|
||||||
<input type="file" id="import-input" accept="image/*" />
|
<div class="control-wrapper">
|
||||||
<button id="export-button" class="button" title="save image to your computer">download image</button>
|
<label class="control-label" for="amount-slider">amount</label>
|
||||||
<button id="imgur-button" class="button" title="share image via imgur.com"><span>share image</span></button>
|
<input class="control-input control-number" id="amount-number" type="number" min="0" max="99" value="50" maxlength="2" />
|
||||||
<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
|
<input class="control-input control-slider" id="amount-slider" type="range" min="0" max="99" value="50" step="1" maxlength="2" />
|
||||||
<div id="imgur-url-container">
|
</div>
|
||||||
<input id="imgur-url-input" type="text" readonly="readonly" />
|
<div class="control-wrapper">
|
||||||
<a href id="imgur-url-link" class="button social-link" href="http://imgur.com" target="_blank">open</a>
|
<label class="control-label" for="seed-slider">seed</label>
|
||||||
<a href id="twitter-link" class="button social-link" href="http://twitter.com" target="_blank" title="post your image on twitter">twitter</a>
|
<input class="control-input control-number" id="seed-number" type="number" min="0" max="100" value="50" maxlength="2" />
|
||||||
<a href id="facebook-link" class="button social-link" href="http://facebook.com" target="_blank" title="post your image on facebook">facebook</a>
|
<input class="control-input control-slider" id="seed-slider" type="range" min="0" max="100" value="50" step="1" maxlength="2" />
|
||||||
<a href id="reddit-link" class="button social-link" href="http://reddit.com" target="_blank" title="post your image on reddit">reddit</a>
|
</div>
|
||||||
<span id="imgur-url-error">sorry, something went wrong. maybe try again?</span>
|
<div class="control-wrapper">
|
||||||
|
<label class="control-label" for="iterations-slider">iterations</label>
|
||||||
|
<input class="control-input control-number" id="iterations-number" type="number" min="1" max="50" value="5" maxlength="2" />
|
||||||
|
<input class="control-input control-slider" id="iterations-slider" type="range" min="1" max="50" value="5" step="1" maxlength="2"/>
|
||||||
|
</div>
|
||||||
|
<div class="control-wrapper">
|
||||||
|
<label class="control-label" for="quality-slider">quality</label>
|
||||||
|
<input class="control-input control-number" id="quality-number" type="number" min="1" max="99" value="50" maxlength="2" />
|
||||||
|
<input class="control-input control-slider" id="quality-slider" type="range" min="1" max="99" value="50" step="1" maxlength="2" />
|
||||||
|
</div>
|
||||||
|
<button id="random-button" class="button is-hidden">randomise</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="canvas-wrapper">
|
<div class="canvas-wrapper">
|
||||||
<canvas id="canvas" />
|
<canvas id="canvas"></canvas>
|
||||||
|
<article class="content intro is-active">
|
||||||
|
<div class="center">
|
||||||
|
<p>drag an image into the browser window to modify it. this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
|
||||||
|
<p>if you like this one, you can check out some of his other <a href="http://snorpey.github.io/experiments/">javascript experiments</a>.</p>
|
||||||
|
<button class="close">✕</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
<script src="scripts/lib/require-2.1.4.js" data-main="scripts/main"></script>
|
<script src="scripts/lib/require-2.1.4.js" data-main="scripts/main"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -20,6 +20,7 @@ require(
|
|||||||
'src/import-button',
|
'src/import-button',
|
||||||
'src/random-button',
|
'src/random-button',
|
||||||
'src/upload-imgur',
|
'src/upload-imgur',
|
||||||
|
'src/intro',
|
||||||
'util/feature-test',
|
'util/feature-test',
|
||||||
'lib/signals-1.0.0'
|
'lib/signals-1.0.0'
|
||||||
],
|
],
|
||||||
@ -33,6 +34,7 @@ require(
|
|||||||
import_button,
|
import_button,
|
||||||
random_button,
|
random_button,
|
||||||
imgur,
|
imgur,
|
||||||
|
intro,
|
||||||
testFeatures,
|
testFeatures,
|
||||||
Signal
|
Signal
|
||||||
)
|
)
|
||||||
@ -62,6 +64,7 @@ require(
|
|||||||
image.init( shared );
|
image.init( shared );
|
||||||
file.init( shared );
|
file.init( shared );
|
||||||
imgur.init( shared );
|
imgur.init( shared );
|
||||||
|
intro.init( shared );
|
||||||
}
|
}
|
||||||
|
|
||||||
function showError( required_features )
|
function showError( required_features )
|
||||||
|
|||||||
47
scripts/src/intro.js
Normal file
47
scripts/src/intro.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
/*global define*/
|
||||||
|
define(
|
||||||
|
function()
|
||||||
|
{
|
||||||
|
var signals;
|
||||||
|
var is_open = true;
|
||||||
|
var element = document.querySelectorAll( '.intro' )[0];
|
||||||
|
var button = document.querySelectorAll( '.intro-button' )[0];
|
||||||
|
var close_button = element.querySelectorAll( '.close' )[0];
|
||||||
|
|
||||||
|
function init( shared )
|
||||||
|
{
|
||||||
|
signals = shared.signals;
|
||||||
|
button.addEventListener( 'click', buttonClicked );
|
||||||
|
close_button.addEventListener( 'click', close );
|
||||||
|
}
|
||||||
|
|
||||||
|
function buttonClicked( event )
|
||||||
|
{
|
||||||
|
if ( is_open )
|
||||||
|
{
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
|
||||||
|
else
|
||||||
|
{
|
||||||
|
open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function open()
|
||||||
|
{
|
||||||
|
button.classList.add( 'is-active' );
|
||||||
|
element.classList.add( 'is-active' );
|
||||||
|
is_open = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function close()
|
||||||
|
{
|
||||||
|
button.classList.remove( 'is-active' );
|
||||||
|
element.classList.remove( 'is-active' );
|
||||||
|
is_open = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { init: init };
|
||||||
|
}
|
||||||
|
);
|
||||||
420
styles/main.css
420
styles/main.css
@ -1,40 +1,59 @@
|
|||||||
*
|
* {
|
||||||
{
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body
|
body {
|
||||||
{
|
|
||||||
padding: 50px;
|
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a
|
a {
|
||||||
{
|
|
||||||
color: #06f;
|
color: #06f;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover
|
a:hover {
|
||||||
{
|
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-hidden
|
.is-hidden {
|
||||||
{
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button
|
.full-width {
|
||||||
{
|
width: 100%;
|
||||||
background-color: #eaeaea;
|
}
|
||||||
|
|
||||||
|
.dark-bg {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-bg {
|
||||||
|
background-color: #efefef;
|
||||||
|
border-bottom: 1px #ddd solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
max-width: 860px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper {
|
||||||
|
padding-top: 17px;
|
||||||
|
padding-bottom: 17px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #ddd;
|
||||||
padding: 5px 9px;
|
padding: 5px 9px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #06f;
|
color: #666;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -43,223 +62,264 @@ a:hover
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover
|
.button:hover {
|
||||||
{
|
|
||||||
background-color: #06f;
|
background-color: #06f;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#random-button
|
.dark-bg .button {
|
||||||
{
|
background-color: #666;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-bg .button:hover {
|
||||||
|
background-color: #999;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-bg a {
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#random-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 3px;
|
top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headline
|
.headline {
|
||||||
{
|
font-size: 16px;
|
||||||
font-size: 12px;
|
color: #fff;
|
||||||
color: #333;
|
display: inline-block;
|
||||||
margin-bottom: 10px;
|
font-weight: normal;
|
||||||
|
margin-right: 20px;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro
|
.intro {
|
||||||
{
|
width: 100%;
|
||||||
max-width: 650px;
|
position: absolute;
|
||||||
|
top: -100%;
|
||||||
|
background-color: #fff;
|
||||||
|
background-color: rgba(255,255,255, 0.9);
|
||||||
|
-webkit-transition: all 0.5s ease-in;
|
||||||
|
transition: all 0.5s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
#controls
|
.intro.is-active {
|
||||||
{
|
top: 0;
|
||||||
float: left;
|
}
|
||||||
margin-top: 30px;
|
|
||||||
|
.intro .center {
|
||||||
|
padding: 30px;
|
||||||
|
max-width: 580px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro .close {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #06f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-button {
|
||||||
|
font-size: 17px;
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-button.is-active,
|
||||||
|
.intro-button.is-active:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#controls.is-active
|
#controls.is-active {
|
||||||
{
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-wrapper
|
.control-wrapper {
|
||||||
{
|
display: inline-block;
|
||||||
float: left;
|
width: 160px;
|
||||||
width: 200px;
|
margin-right: 20px;
|
||||||
margin-right: 20px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.control-label
|
.control-label {
|
||||||
{
|
font-size: 11px;
|
||||||
display: block;
|
display: block;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
text-align: center;
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
.control-slider
|
.control-slider {
|
||||||
{
|
display: block;
|
||||||
display: block;
|
float: left;
|
||||||
float: left;
|
border: none;
|
||||||
border: none;
|
width: 120px;
|
||||||
width: 160px;
|
height: 1px;
|
||||||
height: 1px;
|
margin-top: 6px;
|
||||||
margin-top: 6px;
|
background: #ddd;
|
||||||
background: #ddd;
|
-webkit-appearance: none;
|
||||||
-webkit-appearance: none;
|
-moz-appearance: none;
|
||||||
-moz-appearance: none;
|
appearance: none;
|
||||||
appearance: none;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.control-number
|
.control-number {
|
||||||
{
|
display: block;
|
||||||
display: block;
|
color: #333;
|
||||||
color: #333;
|
float: right;
|
||||||
float: right;
|
border: none;
|
||||||
border: none;
|
max-width: 30px;
|
||||||
max-width: 30px;
|
font-family: sans-serif;
|
||||||
font-family: sans-serif;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#import-input
|
#import-input {
|
||||||
{
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.export-wrapper
|
.download-link {
|
||||||
{
|
display: none;
|
||||||
clear: both;
|
|
||||||
float: left;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-link
|
.download-link.is-active {
|
||||||
{
|
display: inline-block;
|
||||||
display: none;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-link.is-active
|
.download-link span {
|
||||||
{
|
color: #999;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 15px;
|
text-decoration: none;
|
||||||
}
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.download-link span
|
#imgur-button {
|
||||||
{
|
|
||||||
color: #999;
|
|
||||||
display: inline-block;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#imgur-button
|
|
||||||
{
|
|
||||||
width: 85px;
|
width: 85px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#imgur-button.is-uploading,
|
#imgur-button.is-uploading,
|
||||||
#imgur-button.is-uploading:hover
|
#imgur-button.is-uploading:hover {
|
||||||
{
|
background-color: #ddd;
|
||||||
background-color: #eaeaea;
|
color: #666;
|
||||||
color: #06f;
|
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
#imgur-button span
|
#imgur-button span {
|
||||||
{
|
display: block;
|
||||||
display: block;
|
width: 154px;
|
||||||
width: 154px;
|
-webkit-transition: margin-left 0.5s ease-in;
|
||||||
transition: margin-left 0.5s ease-in;
|
transition: margin-left 0.5s ease-in;
|
||||||
transition-property: margin-left top;
|
-webkit-transition-property: margin-left top;
|
||||||
text-align: left;
|
transition-property: margin-left top;
|
||||||
overflow: hidden;
|
text-align: left;
|
||||||
}
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imgur-button.is-uploading span {
|
||||||
|
margin-left: -76px;
|
||||||
|
}
|
||||||
|
|
||||||
#imgur-button.is-uploading span
|
#imgur-button span::after {
|
||||||
{
|
content: 'loading…';
|
||||||
margin-left: -76px;
|
display: inline-block;
|
||||||
}
|
padding-left: 15px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
#imgur-button span::after
|
#imgur-url-container {
|
||||||
{
|
|
||||||
content: 'loading…';
|
|
||||||
display: inline-block;
|
|
||||||
padding-left: 15px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
#imgur-url-container
|
|
||||||
{
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.3s ease-in;
|
||||||
transition: opacity 0.3s ease-in;
|
transition: opacity 0.3s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
#imgur-url-container.is-active
|
#imgur-url-container.is-active {
|
||||||
{
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#imgur-url-input
|
#imgur-url-input {
|
||||||
{
|
padding: 5px 9px 4px 9px;
|
||||||
padding: 4px 9px;
|
border: none;
|
||||||
border: 1px #CCC solid;
|
border-radius: 2px;
|
||||||
border-radius: 3px;
|
font-family: sans-serif;
|
||||||
font-family: sans-serif;
|
font-size: 13px;
|
||||||
font-size: 13px;
|
color: #333;
|
||||||
color: #7C7C7C;
|
margin-right: 7px;
|
||||||
}
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
#imgur-url-error
|
#imgur-url-error {
|
||||||
{
|
padding: 5px 9px;
|
||||||
padding: 5px 9px;
|
line-height: normal;
|
||||||
line-height: normal;
|
color: #999;
|
||||||
color: #999;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#imgur-url-input,
|
#imgur-url-input,
|
||||||
#imgur-url-link,
|
#imgur-url-link,
|
||||||
#imgur-url-error
|
#imgur-url-error {
|
||||||
{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#imgur-url-container.upload-successful #imgur-url-input,
|
|
||||||
#imgur-url-container.upload-successful #imgur-url-link
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#imgur-url-container.upload-failed #imgur-url-error
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-link
|
|
||||||
{
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-successful .social-link
|
#imgur-url-container.upload-successful #imgur-url-input,
|
||||||
{
|
#imgur-url-container.upload-successful #imgur-url-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#imgur-url-container.upload-failed #imgur-url-error {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-successful .social-link {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.missing-feature {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 30px;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 860px) {
|
||||||
|
.nav-wrapper {
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
.missing-feature
|
padding-left: 10px;
|
||||||
{
|
padding-right: 10px;
|
||||||
clear: both;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvas-wrapper
|
|
||||||
{
|
|
||||||
width: 100%;
|
|
||||||
clear: both;
|
|
||||||
float: left;
|
|
||||||
margin-top: 30px;
|
|
||||||
|
|
||||||
}
|
|
||||||
#canvas
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user