thetek
2e1d1f3cdd
* 🩹 fix 'learn more' font size * ✨ add support for offline nameservers * ✨ offline nameservers & 🎨 table code ✨ support for offline nameservers 🎨 rework table row generation code * 🩹 unite similar help buttons * 🩹 fix blocked message * 📦 compile html * 📦 compile jhtml
198 lines
3.6 KiB
Sass
198 lines
3.6 KiB
Sass
// variables
|
|
$c-bg: #21252b
|
|
$c-blue: #61afef
|
|
$c-fg: #d3d7de
|
|
$c-green: #98c379
|
|
$c-orange: #d19a66
|
|
$c-red: #e06c75
|
|
$f-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', 'Helvetica', sans-serif
|
|
|
|
// styles
|
|
*
|
|
box-sizing: border-box !important
|
|
|
|
html, body
|
|
background-color: $c-bg
|
|
color: $c-fg
|
|
font-family: $f-sans
|
|
margin: 0
|
|
padding: 0
|
|
overflow-x: hidden
|
|
|
|
input, button
|
|
font-family: $f-sans
|
|
|
|
#header
|
|
height: 4rem
|
|
padding: .5rem
|
|
width: 100vw
|
|
button
|
|
background-color: $c-bg
|
|
border: none
|
|
border-radius: .5rem
|
|
color: darken($c-fg, 50%)
|
|
cursor: pointer
|
|
float: right
|
|
height: 3rem
|
|
transition: all .3s ease
|
|
width: 3rem
|
|
&:hover
|
|
background-color: lighten($c-bg, 5%)
|
|
color: darken($c-fg, 20%)
|
|
|
|
#title
|
|
margin-bottom: 5rem
|
|
margin-top: 5rem
|
|
text-align: center
|
|
h1
|
|
font-size: 4rem
|
|
font-weight: 200
|
|
span
|
|
color: darken($c-fg, 50%)
|
|
|
|
#search
|
|
text-align: center
|
|
margin-bottom: 5rem
|
|
#searchbar
|
|
.buttonspacer
|
|
display: inline-block
|
|
width: 3.5rem
|
|
input
|
|
background-color: lighten($c-bg, 5%)
|
|
border: none
|
|
border-radius: .5rem 0 0 .5rem
|
|
color: $c-fg
|
|
font-size: 1.5rem
|
|
font-weight: 300
|
|
height: 3rem
|
|
padding: .5rem 1rem
|
|
transition: all .3s ease
|
|
vertical-align: bottom
|
|
&:focus
|
|
background-color: lighten($c-bg, 10%)
|
|
outline: none
|
|
button
|
|
border: none
|
|
cursor: pointer
|
|
height: 3rem
|
|
transition: all .3s ease
|
|
vertical-align: bottom
|
|
width: 3rem
|
|
&#dnswatch-search-submit
|
|
background-color: lighten($c-bg, 10%)
|
|
border-radius: 0 .5rem .5rem 0
|
|
color: darken($c-fg, 30%)
|
|
&:hover
|
|
background-color: lighten($c-bg, 15%)
|
|
color: $c-fg
|
|
&#help
|
|
background-color: transparent
|
|
border-radius: .5rem
|
|
color: darken($c-fg, 50%)
|
|
margin-left: .5rem
|
|
&:hover
|
|
background-color: lighten($c-bg, 5%)
|
|
color: darken($c-fg, 20%)
|
|
|
|
small
|
|
display: block
|
|
margin-top: 1rem
|
|
color: darken($c-fg, 30%)
|
|
|
|
#loadani
|
|
display: none
|
|
margin-top: 1rem
|
|
visibility: hidden
|
|
#spinner
|
|
animation: 1s linear infinite spinner
|
|
border: 2px solid transparent
|
|
border-bottom: 2px solid $c-blue
|
|
border-radius: .5rem
|
|
display: inline-block
|
|
height: 1rem
|
|
width: 1rem
|
|
span
|
|
color: $c-blue
|
|
margin-left: .5rem
|
|
|
|
#invaliddomain
|
|
color: $c-red
|
|
display: none
|
|
margin-top: 1rem
|
|
visibility: hidden
|
|
.feather
|
|
vertical-align: -.3rem
|
|
|
|
#results
|
|
small.random
|
|
color: darken($c-fg, 50%)
|
|
display: block
|
|
font-size: .8rem
|
|
margin-top: 1rem
|
|
text-align: center
|
|
button
|
|
background: none
|
|
border: none
|
|
color: darken($c-fg, 40%)
|
|
cursor: pointer
|
|
font-size: .8rem
|
|
outline: none
|
|
text-decoration: underline
|
|
|
|
table
|
|
margin-left: 25vw
|
|
width: 50vw
|
|
tr
|
|
height: 3rem
|
|
td.status
|
|
width: 3rem
|
|
&.check
|
|
color: $c-green
|
|
&.cross
|
|
color: $c-red
|
|
&.ref
|
|
color: $c-blue
|
|
&.offline
|
|
color: $c-orange
|
|
td.icon
|
|
border-left: solid transparent 2rem
|
|
width: 3rem
|
|
td.name small
|
|
color: darken($c-fg, 30%)
|
|
margin-left: 1rem
|
|
td.desc
|
|
text-align: right
|
|
&.blocked
|
|
color: $c-red
|
|
&.ref
|
|
color: $c-blue
|
|
td.help
|
|
text-align: right
|
|
width: 3rem
|
|
button
|
|
background-color: $c-bg
|
|
border: none
|
|
border-radius: .5rem
|
|
color: darken($c-fg, 50%)
|
|
cursor: pointer
|
|
height: 2rem
|
|
padding: .4rem
|
|
transition: all .3s ease
|
|
width: 2.1rem
|
|
&:hover
|
|
background-color: lighten($c-bg, 5%)
|
|
color: darken($c-fg, 20%)
|
|
svg
|
|
height: 1.2rem
|
|
vertical-align: -.2rem
|
|
width: 1.2rem
|
|
|
|
.uncolored-svg
|
|
filter: invert(.8)
|
|
|
|
@keyframes spinner
|
|
0%
|
|
transform: rotate(0deg)
|
|
100%
|
|
transform: rotate(360deg)
|