Improved graphics

Changed HTML and CSS
This commit is contained in:
Sejki 2020-07-15 19:14:58 +02:00
parent 35ef6d981c
commit 0d373e6322
2 changed files with 57 additions and 41 deletions

View file

@ -1,33 +1,55 @@
body { .body {
width: 400px; display: block;
margin: auto;
padding: 10px;
width: 50%;
text-align: center; text-align: center;
background-color: #191a1c; margin-bottom: 15px;
color: whitesmoke; border: 3px;
left: 50%;
top: 50%;
} }
.container { .container {
display: block; display: block;
text-align: center; text-align: center;
margin: 0 auto; margin: auto;
width: 80%; width: 50%;
margin-bottom: 15px; margin-bottom: 15px;
border: 3px;
padding: 10px;
} }
.goButton { .goButton {
background-color: transparent;
position: relative;
display: inline-block;
padding: 15px 30px;
color: teal;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
border-radius: 5px; border-radius: 5px;
background-color: #075656; display: flex;
border: 4px solid #075656; justify-content: center;
color: whitesmoke; align-items: center;
border: transparent;
font-weight: 400; font-weight: 400;
padding: 4px 15px; padding: 4px 15px;
margin-right: 25px; margin-right: 25px;
text-align: center; text-align: center;
width: 100%;
transition: 0.2s;
overflow: hidden;
margin-top: 90px;
} }
.goButton:hover{
color: #075656;
background: teal;
box-shadow: 0 0px 10px teal, 0 0px 40px teal, 0 0 80px teal;
}
.label { .label {
font-size: 1.1rem; font-size: 1.1rem;
@ -35,23 +57,15 @@ body {
display: block; display: block;
} }
.button { .selectYtSubscriptions{
padding: 15px 25px; color: teal;
font-size: 24px; font: 36px Tahoma, Helvetica, Arial, Sans-Serif;
text-shadow: 0px 2px 3px rgb(0, 0, 0);
text-align: center; text-align: center;
cursor: pointer; margin: 90px;
outline: none; }
color: #fff;
background-color: #4CAF50; .selectYtSubscriptions:hover{
border: none; text-shadow: 0px 2px 3px rgb(0, 255, 255);
border-radius: 15px; transition: 0.2s;
box-shadow: 0 9px #999; }
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

View file

@ -7,16 +7,18 @@
<script src="YTtoLBRY.js" charset="utf-8"></script> <script src="YTtoLBRY.js" charset="utf-8"></script>
</head> </head>
<body> <body style="background-color:#474747;">
<div class="container">
<iframe width="560" height="315" src="https://lbry.tv/$/embed/howtouseconverter/c9827448d6ac7a74ecdb972c5cdf9ddaf648a28e" allowfullscreen></iframe> <iframe width="100%" height="400px" src="https://lbry.tv/$/embed/howtouseconverter/c9827448d6ac7a74ecdb972c5cdf9ddaf648a28e" allowfullscreen></iframe>
<div class="selectYtSubscriptions">Select Youtube Subscriptions</div>
<label for="file">Select Youtube Subscriptions</label> <hr>
<input type="file" id="subconv" class="PickFile"> <input type="file" id="subconv" class="PickFile">
<input type="button" id="go-button" value="GO" class="goButton"> <hr>
<ul id="lbry-channel-list"> <input type="button" id="go-button" value="All done!" class="goButton">
</ul> <ul id="lbry-channel-list">
<script type="text/javascript" src="content.js"></script> </ul>
<script type="text/javascript" src="content.js"></script>
</div>
</body> </body>
</html> </html>