heierbtc/satdress-custom2
1
0
Fork 0
forked from heierbtc/satdress-mirror
Code Issues Pull Requests Projects Releases Wiki Activity

css improvements

Browse Source
This commit is contained in:
Blaz Blokar 2022-01-19 23:52:15 +01:00 committed by Gregor Pogacnik
parent 15794baee6
commit 70077ea5d2
2 changed files with 36 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -5,6 +5,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/png" href="https://i.imgur.com/4yaPtA2.png" /> <link rel="icon" type="image/png" href="https://i.imgur.com/4yaPtA2.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=PT+Sans" />
<link rel="stylesheet" href="/static/style.css" /> <link rel="stylesheet" href="/static/style.css" />
</head> </head>
<body> <body>
@ -28,8 +29,8 @@
</div> </div>
<div class="domain-wrapper"> <div class="domain-wrapper">
<input class="input" name="name" id="name" /> <input class="input" name="name" id="name" />
<span class="suffix" v-if="domains.length == 1">@{{ domains[0] }}</span> <span v-if="domains.length == 1">@{{ domains[0] }}</span>
<span class="suffix-hack" v-if="domains.length > 1">@</span> <span v-if="domains.length > 1">@</span>
<select name="domain" id="domain" id="domain" v-if="domains.length > 1"> <select name="domain" id="domain" id="domain" v-if="domains.length > 1">
<option v-for="domain in domains" :value="domain">{{ domain }}</option> <option v-for="domain in domains" :value="domain">{{ domain }}</option>
</select> </select>

74
static/style.css
View File

@ -1,3 +1,7 @@
* {
box-sizing: border-box;
}
body { body {
display: flex; display: flex;
align-items: center; align-items: center;
@ -128,46 +132,34 @@ label {
background-color: #f3f3f3; background-color: #f3f3f3;
} }
input#name {
margin-right: 4px;
margin-bottom: 0;
}
select#domain { select#domain {
width: 50%; min-height: 100%;
height: 35px; margin-left: 4px;
margin-bottom: 0;
outline: none; outline: none;
padding: 0 10px; padding: 0 10px;
font-size: 14px; font-size: 14px;
border-radius: 5px; border-radius: 5px;
margin-bottom: 25px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
border: 1px solid #999; border: 1px solid #999;
background-color: #f3f3f3; background-color: #f3f3f3;
} }
.input.full-width { .input.full-width {
width: calc(100% - 20px); width: 100%;
} }
.suffix {
height: 35px;
width: 50%;
padding: 0 10px;
margin-bottom: 25px;
display: inline-flex;
font-size: 16px;
font-weight: 600;
align-items: center;
word-break: keep-all;
letter-spacing: 0.5px;
}
.suffix-hack { .domain-wrapper {
height: 35px; display: flex;
padding: 0 10px; flex-direction: row;
margin-bottom: 25px;
display: inline-flex;
font-size: 16px;
font-weight: 600;
align-items: center; align-items: center;
word-break: keep-all; padding-bottom: 20px;
letter-spacing: 0.5px;
} }
select { select {
@ -239,11 +231,6 @@ select {
word-break: break-all; word-break: break-all;
} }
.domain-wrapper {
display: flex;
flex-direction: row;
}
#qr { #qr {
margin: 20px auto; margin: 20px auto;
display: block; display: block;
@ -270,24 +257,29 @@ select {
.domain-wrapper { .domain-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
}
input#name {
margin: 0;
margin-bottom: 10px;
width: 100%;
max-width: 100%;
}
select#domain {
margin: 0;
margin-top: 10px;
width: 100%;
max-width: 100%;
} }
.input { .input {
margin-bottom: 5px; margin-bottom: 5px;
width: calc(100% - 25px); width: 100%;
} }
.input.full-width { .input.full-width {
margin-bottom: 25px; margin-bottom: 25px;
} }
.suffix {
padding: 0;
margin-bottom: 25px;
}
.suffix-hack {
padding: 0;
margin-bottom: 0px;
}
} }