Popup design
This commit is contained in:
Leonetienne
@@ -0,0 +1,37 @@
|
||||
body {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
body .bgmask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: -8;
|
||||
background-image: linear-gradient(#0000 50%, #04254e);
|
||||
}
|
||||
|
||||
body .bggatter {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: -9;
|
||||
-webkit-mask-image: url("../image/grid.png");
|
||||
background-color: #5954a4;
|
||||
}
|
||||
|
||||
body .bggatter__wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
z-index: -9;
|
||||
}
|
||||
|
||||
body .bgdrop {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: -10;
|
||||
background-color: #04254e;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
button {
|
||||
padding: 0.5em 2em;
|
||||
color: #04254e;
|
||||
font-size: 14pt;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.15s ease,
|
||||
transform 0.15s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
/*background-color: #5954a4;*/
|
||||
color: #fff;
|
||||
animation: color-cycle;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes color-cycle {
|
||||
0% {background-color: #ff6666; transform: scale(1.075);}
|
||||
16.67% {background-color: #c966ff;}
|
||||
33.33% {background-color: #6678ff;}
|
||||
50% {background-color: #66edff; transform: scale(1.15);}
|
||||
66.66% {background-color: #66ff70;}
|
||||
83.33% {background-color: #fcff66;}
|
||||
100% {background-color: #ff6666; transform: scale(1.075);}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "zilla-slab.css"
|
||||
@@ -0,0 +1,49 @@
|
||||
@font-face {
|
||||
font-family: "ZillaSlab";
|
||||
src: url("../../font/zilla-slab/ZillaSlab-Regular.ttf") format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ZillaSlab";
|
||||
src: url("../../font/zilla-slab/ZillaSlab-Italic.ttf") format('truetype');
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ZillaSlab";
|
||||
src: url("../../font/zilla-slab/ZillaSlab-Bold.ttf") format('truetype');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ZillaSlab";
|
||||
src: url("../../font/zilla-slab/ZillaSlab-BoldItalic.ttf") format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ZillaSlab";
|
||||
src: url("../../font/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ZillaSlab";
|
||||
src: url("../../font/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
|
||||
font-weight: lighter;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ZillaSlab";
|
||||
src: url("../../font/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ZillaSlab";
|
||||
src: url("../../font/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
label {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 5px;
|
||||
height: 25pt;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
color: #04254e;
|
||||
font-size: 14pt;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
* {
|
||||
font-family: 'ZillaSlab' !important;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
p,
|
||||
a,
|
||||
label {
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
line-height: 1em;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
@@ -0,0 +1,34 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/background.css">
|
||||
<link rel="stylesheet" href="css/typography.css">
|
||||
<link rel="stylesheet" href="css/modular.css">
|
||||
<link rel="stylesheet" href="css/form.css">
|
||||
<link rel="stylesheet" href="css/button.css">
|
||||
<link rel="stylesheet" href="css/font/include.css">
|
||||
<title>Tubio - Companion Extension</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="bgdrop"></div>
|
||||
<div class="bggatter__wrapper">
|
||||
<div class="bggatter"></div>
|
||||
</div>
|
||||
<div class="bgmask"></div>
|
||||
|
||||
|
||||
<h1 class="text-center pt-1">Tubio</h1>
|
||||
<h2 class="text-center">Companion Extension</h2>
|
||||
|
||||
<div class="flex justify-content-center">
|
||||
<div class="flex flex-col align-items-center">
|
||||
<button >Download!</button>
|
||||
|
||||
<label for="tubio-address" style="margin-top: 3em;">Where can i reach tubio?</label>
|
||||
<input type="text" id="tubio-address" class="text-center" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user