michael.heier/satdress
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" />
<link rel="icon" type="image/png" href="https://i.imgur.com/4yaPtA2.png" />
<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" />
</head>
<body>
@ -28,8 +29,8 @@
</div>
<div class="domain-wrapper">
<input class="input" name="name" id="name" />
<span class="suffix" v-if="domains.length == 1">@{{ domains[0] }}</span>
<span class="suffix-hack" v-if="domains.length > 1">@</span>
<span v-if="domains.length == 1">@{{ domains[0] }}</span>
<span v-if="domains.length > 1">@</span>
<select name="domain" id="domain" id="domain" v-if="domains.length > 1">
<option v-for="domain in domains" :value="domain">{{ domain }}</option>
</select>

74
static/style.css
View File

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