Home
Diffusion Pillar (wip-redesign) Browse

pillar/src/styles/_error.sass
742a16fb9fedwip-redesign

Last Change
Raw File

_error.sass
View Options

body.error
width: 100%
height: 100%
.error-watchamissing
padding: 0 15px
h2
color: $color-danger
font-size: 1.5em
h3
margin-top: 5px
font-size: 1.4em
p
color: $color-text-light-primary
font-size: .95em
a:hover
text-decoration: none
h3
color: lighten($color-primary, 10%)
p
color: $color-text-light
#error_container
display: flex
justify-content: center
align-items: center
position: absolute
top: 0
left: 0
right: 0
bottom: 0
&.standalone
width: 100%
height: 100%
position: fixed
#error_box
.error-lead
padding: 10px 10px
p
display: block
&.extra
padding-top: 0
a
color: $color-primary
#error_box
min-width: 60%
width: 100%
max-width: 800px
display: flex
justify-content: center
align-items: center
flex-direction: column
+container-box
box-shadow: 0 0 15px rgba(black, .2)
padding: 0
background-color: $color-background-nav
border-top-left-radius: 3px
border-top-right-radius: 3px
overflow: hidden
.error-top-container
position: relative
width: 100%
background-color: $color-background-nav
.error-top-header-overlay
background: repeating-linear-gradient(-45deg, rgba(white, .1), rgba(white, .1) 10px, transparent 10px, transparent 20px)
position: absolute
top: 0
left: 0
right: 0
bottom: 0
width: 100%
z-index: 1
.error-top-header
width: 100%
position: absolute
top: 0
bottom: 0
background:
size: cover
position-y: 12%
z-index: 0
.error-title
position: relative
z-index: 2
width: auto
display: flex
margin: 0 auto
padding: 25px 0 10px 0
color: white
font:
size: 1.8em
weight: 300
span.icon
display: flex
align-items: center
font-size: 2em
span.text
display: flex
align-items: center
text-align: left
line-height: 1.2em
margin-right: auto
.error-lead
position: relative
z-index: 1
display: block
width: 100%
line-height: 1.6em
color: $color-text-light-secondary
font:
size: .9em
weight: 300
a
text-decoration: none
&:hover
text-decoration: underline
&.extra
padding: 15px
font-size: .9em
color: $color-text-light-secondary
hr
margin: 0 0
width: 100%
border: none
height: 3px
background-color: lighten($color-background-nav, 5%)
.buttons
position: relative
z-index: 2
margin: 5px 0 20px 5px
a
font-size: 1.2em
margin: 0 15px
&.sign-up
+button($color-primary, 3px, true)
&.sign-in
+button($color-background, 3px)
border-color: transparent
#node-overlay
#error_container
@include overlay(rgba($color-background-nav, .8), 0%, transparent, 60%)
#error_box
top: 50px
position: absolute
left: 50%
transform: translateX(-50%)
border-radius: 3px
box-shadow: 0 0 100px rgba(black, .85)
overflow: hidden