1215 lines
21 KiB
Sass
1215 lines
21 KiB
Sass
@import _normalize
|
|
@import _config
|
|
@import _utils
|
|
|
|
@import _apps_base
|
|
@import _notifications
|
|
@import _comments
|
|
@import _error
|
|
|
|
|
|
html
|
|
height: 100%
|
|
-webkit-font-smoothing: antialiased
|
|
-moz-osx-font-smoothing: grayscale
|
|
|
|
body
|
|
height: 100%
|
|
font:
|
|
family: $font-body, sans-serif
|
|
size: $font-size
|
|
color: $color-text-dark
|
|
background-color: $color-background
|
|
|
|
+media-sm
|
|
width: 100%
|
|
max-width: 100%
|
|
min-width: auto
|
|
|
|
+media-xs
|
|
width: 100%
|
|
max-width: 100%
|
|
min-width: auto
|
|
|
|
h1, h2, h3, h4, h5
|
|
font:
|
|
family: $font-body
|
|
weight: 300
|
|
|
|
a
|
|
color: $color-primary-dark
|
|
&:hover
|
|
color: $color-primary
|
|
|
|
strong, b
|
|
font-weight: 500
|
|
|
|
.container
|
|
+media-xs
|
|
max-width: 100%
|
|
min-width: auto
|
|
padding:
|
|
left: 0
|
|
right: 0
|
|
|
|
&.box
|
|
+container-box
|
|
|
|
.container-page
|
|
background-color: $color-background
|
|
|
|
.page-content
|
|
position: relative
|
|
flex: 1
|
|
.container-box
|
|
+container-box
|
|
|
|
|
|
.navbar-fixed-top+.page-content
|
|
padding-top: $navbar-height
|
|
|
|
.alert+.navbar-fixed-top+.page-content
|
|
padding-top: 0
|
|
|
|
.alert
|
|
display: block
|
|
position: relative
|
|
z-index: 16
|
|
width: 100%
|
|
margin-bottom: 0
|
|
text-align: center
|
|
padding: 15px 20px
|
|
border-radius: 0
|
|
border-bottom: thin solid rgba(black, .1)
|
|
|
|
// overriden by alert types
|
|
color: $color-text-dark
|
|
background-color: $color-background
|
|
|
|
+clearfix
|
|
|
|
&.alert-danger,
|
|
&.alert-error
|
|
background-color: lighten($color-danger, 35%)
|
|
color: $color-danger
|
|
.alert-icon, .close
|
|
color: $color-danger
|
|
|
|
&.alert-warning
|
|
background-color: lighten($color-warning, 20%)
|
|
color: darken($color-warning, 20%)
|
|
.alert-icon, .close
|
|
color: darken($color-warning, 20%)
|
|
|
|
&.alert-success
|
|
background-color: lighten($color-success, 45%)
|
|
color: $color-success
|
|
|
|
.alert-icon, .close
|
|
color: $color-success
|
|
|
|
&.alert-info
|
|
background-color: lighten($color-info, 30%)
|
|
color: darken($color-info, 10%)
|
|
.alert-icon, .close
|
|
color: darken($color-info, 10%)
|
|
|
|
button.close
|
|
background: none
|
|
border: none
|
|
opacity: .5
|
|
position: absolute
|
|
top: 5px
|
|
right: 10px
|
|
padding: 10px
|
|
|
|
&:hover
|
|
opacity: 1
|
|
|
|
i
|
|
font-size: .8em
|
|
|
|
i.alert-icon
|
|
&:before
|
|
font-family: "pillar-font"
|
|
padding-right: 10px
|
|
|
|
&.success:before
|
|
content: '\e801'
|
|
&.info:before
|
|
content: "\e80c"
|
|
&.warning:before
|
|
content: "\e80b"
|
|
&.danger:before,
|
|
&.error:before
|
|
content: "\e83d"
|
|
|
|
|
|
/* When there's an alert, disable the fixed top */
|
|
.alert+.navbar-fixed-top
|
|
position: relative
|
|
margin-bottom: 0
|
|
|
|
&+.container
|
|
padding-top: 0
|
|
|
|
|
|
/* Navigation */
|
|
header.navbar-header
|
|
position: relative
|
|
margin: 0
|
|
z-index: 1 // to be on top of the overlay
|
|
height: 100%
|
|
|
|
.navbar-toggle
|
|
color: white
|
|
|
|
|
|
.navbar-overlay
|
|
display: none
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
z-index: 0
|
|
width: 100%
|
|
height: 100%
|
|
|
|
transition: background-color 350ms ease-in-out
|
|
|
|
&+.navbar-container
|
|
.search-input
|
|
margin: 8px 0
|
|
border-radius: 3px
|
|
border: thin solid transparent
|
|
|
|
+media-lg
|
|
border: thin solid rgba(white, .2)
|
|
|
|
#cloud-search, .tt-hint
|
|
&::placeholder
|
|
color: rgba(white, .8)
|
|
|
|
|
|
&.is-active
|
|
background-color: $color-background-nav
|
|
text-shadow: none
|
|
|
|
&+.navbar-container
|
|
.search-input
|
|
+media-sm
|
|
background-color: darken($color-background-nav, 6%)
|
|
+media-md
|
|
background-color: darken($color-background-nav, 6%)
|
|
+media-lg
|
|
border: thin solid transparent
|
|
background-color: darken($color-background-nav, 6%)
|
|
|
|
#cloud-search, .tt-hint
|
|
&::placeholder
|
|
color: rgba(white, .5)
|
|
|
|
+media-lg
|
|
display: block
|
|
|
|
|
|
.navbar-container
|
|
align-items: center
|
|
display: flex
|
|
width: 100%
|
|
|
|
.navbar-collapse
|
|
+media-xs
|
|
padding: 0
|
|
width: 100%
|
|
max-height: initial // overrides bs, we don't have many items
|
|
|
|
&.show-notifications
|
|
display: block
|
|
|
|
li
|
|
display: none
|
|
&.nav-notifications
|
|
display: block
|
|
position: absolute
|
|
top: 7px
|
|
left: 0
|
|
width: 100%
|
|
z-index: $z-index-base
|
|
|
|
#notifications
|
|
padding: 0 10px
|
|
|
|
|
|
nav.navbar, nav.sidebar
|
|
z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
|
|
border: none
|
|
border-width: 0
|
|
display: flex
|
|
align-items: center
|
|
background-color: $color-background-nav
|
|
|
|
nav
|
|
margin-left: auto
|
|
margin-right: 0
|
|
|
|
.navbar-nav
|
|
margin-right: 0
|
|
+media-xs
|
|
margin: 0
|
|
width: 100%
|
|
|
|
li
|
|
user-select: none
|
|
a.navbar-item
|
|
user-select: none
|
|
color: $color-text-light-secondary
|
|
height: $navbar-height
|
|
display: flex
|
|
align-items: center
|
|
padding:
|
|
top: 3px
|
|
bottom: 0
|
|
left: 20px
|
|
right: 20px
|
|
|
|
font-weight: 400
|
|
text-transform: uppercase
|
|
border-bottom: 3px solid transparent
|
|
transition: color 200ms ease-in-out, border-bottom 100ms ease-in-out
|
|
|
|
+media-md
|
|
padding-left: 15px
|
|
padding-right: 15px
|
|
+media-sm
|
|
padding-left: 10px
|
|
padding-right: 10px
|
|
|
|
&:hover, &:focus
|
|
color: $color-text-light
|
|
background-color: rgba($color-background-nav, .4)
|
|
border-bottom-color: $color-primary
|
|
|
|
&:focus
|
|
border-bottom-color: $color-primary
|
|
|
|
&.active
|
|
color: $color-text-light
|
|
background-color: $color-background-nav
|
|
border-bottom-color: lighten($color-secondary, 10%)
|
|
|
|
&:hover
|
|
border-bottom-color: lighten($color-secondary, 20%)
|
|
|
|
.pi-angle-down
|
|
position: relative
|
|
left: 5px
|
|
|
|
&.nav-item-sign-in
|
|
i
|
|
padding-right: 6px
|
|
font-size: 1.1em
|
|
|
|
img.gravatar
|
|
border-radius: 999em
|
|
height: 32px
|
|
width: 32px
|
|
box-shadow: 1px 1px 0 rgba(black, .2)
|
|
position: relative
|
|
|
|
|
|
.special
|
|
width: 18px
|
|
height: 18px
|
|
border-radius: 999em
|
|
position: absolute
|
|
background-color: white
|
|
z-index: 2
|
|
display: inline-block
|
|
top: 10px
|
|
left: 38px
|
|
font-size: 1.2em
|
|
box-shadow: 1px 1px 1px rgba(black, .2)
|
|
|
|
&.subscriber
|
|
background-color: $color-success
|
|
color: white
|
|
font-size: .6em
|
|
|
|
&.demo
|
|
background-color: $color-info
|
|
color: white
|
|
font-size: .6em
|
|
|
|
&.none
|
|
color: $color-danger
|
|
|
|
i
|
|
+position-center-translate
|
|
|
|
.navbar-brand
|
|
height: $navbar-height
|
|
display: flex
|
|
align-items: center
|
|
margin-left: 0 !important
|
|
color: white
|
|
padding:
|
|
top: 8px
|
|
left: 5px
|
|
right: 20px // overrides bs
|
|
|
|
&:hover
|
|
span.app-logo
|
|
transform: scale(1.1)
|
|
|
|
span.app-logo
|
|
font-size: 1.2em
|
|
position: relative
|
|
top: 3px
|
|
transition: transform 150ms ease-in-out
|
|
|
|
.dropdown
|
|
position: relative
|
|
min-width: 60px
|
|
|
|
&:hover
|
|
background-color: rgba($color-background-nav, .4)
|
|
|
|
&.open a
|
|
background-color: $color-background-nav
|
|
|
|
span.fa-stack
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%, -50%)
|
|
|
|
ul.dropdown-menu
|
|
padding-top: 0
|
|
|
|
li
|
|
a
|
|
background-color: rgba(white, .3)
|
|
text-shadow: none
|
|
height: initial
|
|
border-bottom: none
|
|
font:
|
|
family: $font-body
|
|
size: .9em
|
|
padding: 5px 15px 5px 5px
|
|
color: rgba($color-text, .8)
|
|
|
|
&:hover
|
|
color: $color-primary
|
|
|
|
&.subitem
|
|
font-size: .8em
|
|
padding-top: 0
|
|
text-transform: initial
|
|
|
|
i
|
|
width: 35px
|
|
text-align: center
|
|
|
|
&.subscription-status
|
|
padding:
|
|
top: 10px
|
|
bottom: 10px
|
|
|
|
transition: opacity 150ms ease-in-out
|
|
opacity: 1
|
|
|
|
&:hover
|
|
opacity: .8
|
|
|
|
a
|
|
text-transform: initial
|
|
|
|
&.none a
|
|
color: $color-danger
|
|
&.subscriber a
|
|
color: $color-success
|
|
|
|
&.demo a
|
|
color: $color-info
|
|
|
|
span.info
|
|
display: block
|
|
|
|
span.renew
|
|
display: block
|
|
color: $color-text-dark-primary
|
|
font-size: .9em
|
|
|
|
|
|
&.libraries
|
|
ul.dropdown-menu
|
|
background-color: lighten($color-background-nav, 5%)
|
|
color: white
|
|
padding-top: 5px
|
|
left: 0
|
|
right: auto
|
|
|
|
small
|
|
padding-left: 5px
|
|
li
|
|
a
|
|
background-color: transparent
|
|
color: $color-text-light-primary
|
|
|
|
&:hover
|
|
color: $color-primary
|
|
&.disabled a
|
|
color: $color-text-dark-primary
|
|
cursor: default
|
|
|
|
|
|
nav.sidebar
|
|
ul li.nav-item-sign-in a.navbar-item
|
|
font-size: .8em
|
|
|
|
|
|
.navbar-backdrop-container
|
|
width: 100%
|
|
height: 100%
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
|
|
img
|
|
display: none
|
|
position: fixed
|
|
width: 100%
|
|
align-self: flex-start
|
|
+media-md
|
|
display: block
|
|
+media-lg
|
|
display: block
|
|
|
|
|
|
.navbar-backdrop
|
|
z-index: 0
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
|
|
width: 100%
|
|
height: 100%
|
|
background:
|
|
size: 100%
|
|
position: 0 0
|
|
repeat: no-repeat
|
|
color: transparent
|
|
image: url(https://cloud.blender.org/static/assets/img/backgrounds/pattern_02_blur.jpg)
|
|
|
|
filter: none
|
|
|
|
&.project
|
|
display: none
|
|
+media-lg
|
|
display: block
|
|
left: -10px
|
|
width: 105%
|
|
&.blog
|
|
display: none
|
|
+media-lg
|
|
display: block
|
|
left: -10px
|
|
width: 105%
|
|
+media-md
|
|
display: block
|
|
left: -10px
|
|
width: 105%
|
|
|
|
|
|
.navbar-backdrop-overlay
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: $navbar-backdrop-height
|
|
background: linear-gradient(to bottom, rgba($color-background, 0) 25%, rgba($color-background,0.5) 50%, rgba($color-background,1) 100%)
|
|
|
|
|
|
/* Global, we want all menus to look like this */
|
|
ul.dropdown-menu
|
|
background-color: white
|
|
border: none
|
|
box-shadow: 0 10px 25px rgba(black, .1)
|
|
user-select: none
|
|
|
|
.divider
|
|
background-color: rgba(black, .1)
|
|
|
|
nav .dropdown:hover ul.dropdown-menu
|
|
display: block
|
|
|
|
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu
|
|
margin-top: 0
|
|
|
|
|
|
/* FOOTER */
|
|
#footer-container
|
|
position: relative
|
|
background-color: $color-background
|
|
|
|
.row
|
|
+media-xs
|
|
margin: 0
|
|
|
|
/* Footer Navigation */
|
|
footer
|
|
font-size: .75em
|
|
padding: 0 0 10px 0
|
|
a
|
|
color: $color-text-dark-primary
|
|
|
|
&:hover
|
|
color: $color-primary
|
|
|
|
ul.links
|
|
float: left
|
|
padding: 0
|
|
margin: 0
|
|
list-style-type: none
|
|
|
|
li
|
|
padding: 0 15px 0 0
|
|
margin: 0
|
|
float: left
|
|
|
|
#hop
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
visibility: hidden
|
|
position: fixed
|
|
right: 25px
|
|
bottom: 25px
|
|
z-index: 999
|
|
cursor: pointer
|
|
opacity: 0
|
|
background: $color-background-light
|
|
width: 32px
|
|
height: 32px
|
|
border-radius: 50%
|
|
color: $color-text-dark-secondary
|
|
font-size: 2em
|
|
box-shadow: 0 0 15px rgba(black, .2)
|
|
transform: scale(0.5)
|
|
transition: all 150ms ease-in-out
|
|
|
|
&:hover
|
|
transform: scale(1.2)
|
|
background-color: $color-background-nav
|
|
|
|
&.active
|
|
visibility: visible
|
|
opacity: 1
|
|
transform: scale(1)
|
|
|
|
|
|
#footer-navigation
|
|
font-size: .85em
|
|
margin-bottom: 5px
|
|
color: lighten($color-text, 30%)
|
|
border-top: thick solid lighten($color-text, 60%)
|
|
padding:
|
|
top: 15px
|
|
bottom: 15px
|
|
|
|
h4
|
|
color: lighten($color-text, 8%)
|
|
margin-bottom: 10px
|
|
|
|
a
|
|
color: $color-text-dark-primary
|
|
|
|
ul
|
|
position: relative
|
|
margin: 0
|
|
padding: 0 0 10px 0
|
|
list-style-type: none
|
|
|
|
li
|
|
position: relative
|
|
padding: 0
|
|
margin: 0
|
|
|
|
a
|
|
color: lighten($color-text, 35%)
|
|
|
|
&:hover
|
|
color: $color-primary
|
|
|
|
.footer-links
|
|
i
|
|
font-size: 80%
|
|
position: absolute
|
|
left: -14px
|
|
top: 20%
|
|
|
|
.special
|
|
padding:
|
|
top: 10px
|
|
bottom: 15px
|
|
font-size: .9em
|
|
border-left: thin solid darken($color-background, 20%)
|
|
|
|
|
|
img
|
|
max-width: 100%
|
|
opacity: .6
|
|
|
|
ul.footer-social
|
|
width: 100%
|
|
text-align:center
|
|
margin: 0 auto
|
|
display: flex
|
|
align-items: center
|
|
justify-content: space-around
|
|
|
|
li
|
|
display: inline-block
|
|
padding: 30px 0
|
|
|
|
i
|
|
font-size: 3em
|
|
|
|
|
|
.btn-outline
|
|
background-color: transparent
|
|
border-width: 1px
|
|
transition: background-color .1s
|
|
|
|
&:focus, &:active
|
|
box-shadow: none
|
|
|
|
.btn-empty
|
|
background-color: transparent
|
|
border-color: transparent
|
|
|
|
&:focus, &:active
|
|
box-shadow: none
|
|
|
|
|
|
.tooltip
|
|
transition: opacity 50ms ease-in-out
|
|
&.in
|
|
opacity: 1
|
|
|
|
.tooltip-inner
|
|
max-width: auto
|
|
white-space: nowrap
|
|
background-color: $color-background-nav-light
|
|
color: $color-text-light-primary
|
|
border-radius: 3px
|
|
|
|
&.top .tooltip-arrow
|
|
border-top-color: $color-background-nav-light
|
|
&.bottom .tooltip-arrow
|
|
border-bottom-color: $color-background-nav-light
|
|
&.left .tooltip-arrow
|
|
border-left-color: $color-background-nav-light
|
|
&.right .tooltip-arrow
|
|
border-right-color: $color-background-nav-light
|
|
|
|
.popover
|
|
background-color: lighten($color-background-nav, 5%)
|
|
border-radius: 3px
|
|
box-shadow: 1px 1px 2px rgba(black, .2)
|
|
border: thin solid lighten($color-background-nav, 10%)
|
|
|
|
&.in
|
|
opacity: 1
|
|
|
|
.popover-title
|
|
background-color: lighten($color-background-nav, 10%)
|
|
border-bottom: thin solid lighten($color-background-nav, 3%)
|
|
color: $color-text-light-primary
|
|
font-family: $font-body
|
|
|
|
.popover-content
|
|
color: $color-text-light
|
|
font-size: .9em
|
|
|
|
&.top .arrow:after
|
|
border-top-color: lighten($color-background-nav, 5%)
|
|
&.bottom .arrow:after
|
|
border-bottom-color: lighten($color-background-nav, 5%)
|
|
&.left .arrow:after
|
|
border-left-color: lighten($color-background-nav, 5%)
|
|
&.right .arrow:after
|
|
border-right-color: lighten($color-background-nav, 5%)
|
|
|
|
/* Inputs */
|
|
input, input.form-control,
|
|
textarea, textarea.form-control,
|
|
select, select.form-control
|
|
+input-generic
|
|
|
|
label, label.control-label
|
|
+label-generic
|
|
|
|
select, select.form-control
|
|
border-top-left-radius: 3px
|
|
border-top-right-radius: 3px
|
|
background-color: $color-background-light
|
|
|
|
option
|
|
background-color: white
|
|
|
|
input.fileupload
|
|
background-color: transparent
|
|
display: block
|
|
margin-top: 10px
|
|
|
|
textarea
|
|
resize: vertical
|
|
|
|
button, .btn
|
|
+button($color-text-dark-secondary, $color-background, false)
|
|
|
|
&-success
|
|
+button($color-success, $color-success, false)
|
|
&-warning
|
|
+button($color-warning, $color-warning, false)
|
|
&-danger
|
|
+button($color-danger, $color-danger, false)
|
|
&-info
|
|
+button($color-info, $color-info, false)
|
|
|
|
.input-group-flex
|
|
display: flex
|
|
|
|
.input-group-separator
|
|
margin: 10px 0
|
|
border-top: thin solid $color-background
|
|
|
|
/* File Upload forms */
|
|
.fieldlist
|
|
list-style: none
|
|
padding: 0
|
|
margin: 10px 0 0 0
|
|
|
|
li.fieldlist-item
|
|
background-color: $color-background-light
|
|
border: thin solid $color-background
|
|
border-left: 3px solid $color-primary
|
|
border-top-right-radius: 3px
|
|
border-bottom-right-radius: 3px
|
|
|
|
margin-bottom: 10px
|
|
padding: 10px
|
|
+clearfix
|
|
|
|
.form-group
|
|
margin-bottom: 0 !important // override bs
|
|
width: 100%
|
|
|
|
input.form-control
|
|
background-color: white !important
|
|
padding: 0 10px !important
|
|
border: thin solid $color-background-dark !important
|
|
|
|
div[class$="slug"]
|
|
width: 50%
|
|
float: left
|
|
display: flex
|
|
align-items: center
|
|
|
|
label
|
|
margin-right: 10px
|
|
|
|
.fieldlist-action-button
|
|
+button($color-success, 3px)
|
|
margin: 0 0 0 10px
|
|
padding: 5px 10px
|
|
text-transform: initial
|
|
|
|
.form-upload-file
|
|
margin-bottom: 10px
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
.form-upload-progress
|
|
margin-top: 10px
|
|
|
|
.form-upload-progress-bar
|
|
margin-top: 5px
|
|
background-color: $color-success
|
|
height: 5px
|
|
min-width: 0
|
|
border-radius: 3px
|
|
|
|
&.progress-uploading
|
|
background-color: hsl(hue($color-success), 80%, 65%) !important
|
|
|
|
&.progress-processing
|
|
+stripes($color-success, lighten($color-success, 15%), -45deg, 25px)
|
|
+stripes-animate
|
|
animation-duration: 1s
|
|
|
|
&.progress-error
|
|
background-color: $color-danger !important
|
|
|
|
.preview-thumbnail
|
|
width: 50px
|
|
height: 50px
|
|
min-width: 50px
|
|
min-height: 50px
|
|
margin-right: 10px
|
|
margin-top: 5px
|
|
border-radius: 3px
|
|
background-color: $color-background
|
|
|
|
.form-upload-file-meta-container
|
|
display: flex
|
|
|
|
.form-upload-file-meta
|
|
list-style: none
|
|
padding: 0
|
|
margin: 0
|
|
width: 100%
|
|
display: flex
|
|
flex-wrap: wrap
|
|
flex: 1
|
|
|
|
li
|
|
display: inline-block
|
|
padding: 5px 10px
|
|
|
|
&:first-child
|
|
padding-left: 0
|
|
|
|
&.dimensions, &.size
|
|
color: $color-text-dark-secondary
|
|
|
|
&.delete
|
|
margin-left: auto
|
|
|
|
&.name
|
|
+text-overflow-ellipsis
|
|
|
|
.file_delete
|
|
color: $color-danger
|
|
|
|
.form-upload-file-actions
|
|
list-style: none
|
|
padding: 0
|
|
margin: 0
|
|
display: flex
|
|
flex-wrap: wrap
|
|
|
|
li
|
|
display: inline-block
|
|
padding: 5px 10px
|
|
|
|
.file_delete
|
|
color: $color-danger
|
|
|
|
.form-group
|
|
&.error
|
|
.form-control, input
|
|
border-color: $color-danger !important
|
|
|
|
ul.error
|
|
padding: 5px 0 0 0
|
|
margin: 0
|
|
color: $color-danger
|
|
list-style-type: none
|
|
|
|
.checkbox label label
|
|
padding-left: 0
|
|
|
|
.checkbox label input[type=checkbox] + label
|
|
transition: color 100ms ease-in-out
|
|
|
|
.checkbox label input[type=checkbox]:checked + label
|
|
color: $color-success !important
|
|
|
|
|
|
|
|
/* Flyouts (only used on notifications for now) */
|
|
.flyout
|
|
display: block
|
|
font-size: .9em
|
|
background-color: white
|
|
border-radius: 3px
|
|
border: thin solid darken($color-background, 3%)
|
|
box-shadow: 1px 2px 2px rgba(black, .2)
|
|
|
|
& .flyout-title
|
|
font-weight: 600
|
|
display: block
|
|
padding: 8px 10px 5px 10px
|
|
font-size: 1.1em
|
|
float: left
|
|
cursor: default
|
|
|
|
&.notifications
|
|
position: absolute
|
|
right: 0
|
|
top: 60px
|
|
z-index: 9999
|
|
width: 420px
|
|
max-height: 1000%
|
|
border-top-color: white
|
|
overflow-x: hidden
|
|
|
|
|
|
/* Font aliases */
|
|
.pi /* blank item with the right spacing */
|
|
&:after
|
|
content: ''
|
|
font-family: "pillar-font"
|
|
font-style: normal
|
|
font-weight: normal
|
|
speak: none
|
|
display: inline-block
|
|
text-decoration: inherit
|
|
width: 1em
|
|
margin-right: .2em
|
|
text-align: center
|
|
font-variant: normal
|
|
text-transform: none
|
|
line-height: 1em
|
|
margin-left: .2em
|
|
-webkit-font-smoothing: antialiased
|
|
-moz-osx-font-smoothing: grayscale
|
|
position: relative
|
|
|
|
&:before
|
|
position: relative
|
|
|
|
.pi-license-cc-zero:before
|
|
content: '\e85a'
|
|
.pi-license-cc-sa:before
|
|
content: '\e858'
|
|
.pi-license-cc-nd:before
|
|
content: '\e859'
|
|
.pi-license-cc-nc:before
|
|
content: '\e857'
|
|
|
|
.pi-license-cc-0
|
|
@extend .pi-license-cc-zero
|
|
position: relative
|
|
top: 1px
|
|
.pi-license-cc-by-sa
|
|
@extend .pi-license-cc-sa
|
|
.pi-license-cc-by-nd
|
|
@extend .pi-license-cc-nd
|
|
.pi-license-cc-by-nc
|
|
@extend .pi-license-cc-nc
|
|
|
|
.pi-license-cc-by-sa,
|
|
.pi-license-cc-by-nd,
|
|
.pi-license-cc-by-nc
|
|
@extend .pi
|
|
|
|
&:after
|
|
content: '\e807'
|
|
left: -27px
|
|
|
|
&:before
|
|
left: 27px
|
|
|
|
#search-overlay
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
width: 100%
|
|
height: 100%
|
|
pointer-events: none
|
|
visibility: hidden
|
|
opacity: 0
|
|
z-index: $z-index-base + 4
|
|
transition: opacity 150ms ease-in-out
|
|
|
|
&.active
|
|
opacity: 1
|
|
visibility: visible
|
|
background-color: rgba($color-background-nav, .7)
|
|
|
|
.search-input
|
|
position: relative
|
|
float: left
|
|
padding: 0
|
|
margin: 0
|
|
|
|
+media-lg
|
|
max-width: 350px
|
|
+media-md
|
|
max-width: 350px
|
|
+media-sm
|
|
max-width: 120px
|
|
+media-xs
|
|
display: block
|
|
margin: 0 10px
|
|
width: 75%
|
|
position: absolute
|
|
z-index: $z-index-base
|
|
top: 2px
|
|
left: 40px
|
|
|
|
.search-icon
|
|
position: absolute
|
|
color: white
|
|
top: 4px
|
|
left: 10px
|
|
cursor: pointer
|
|
|
|
&:after
|
|
opacity: 0
|
|
content: 'Use advanced search...'
|
|
font-style: normal
|
|
background: darken($color-background-nav, 5%)
|
|
color: $color-text-light-primary
|
|
box-shadow: 1px 1px 3px rgba(black, .4)
|
|
padding: 3px 10px
|
|
font-size: .85em
|
|
border-radius: 3px
|
|
top: 30px
|
|
left: -10px
|
|
width: 150px
|
|
position: absolute
|
|
transition: top 150ms ease-in-out, opacity 150ms ease-in-out
|
|
pointer-events: none
|
|
|
|
&:hover
|
|
&:after
|
|
opacity: 1
|
|
top: 35px
|
|
|
|
|
|
#cloud-search, .tt-hint
|
|
background-color: transparent
|
|
width: 100%
|
|
outline: none
|
|
border: thin solid transparent
|
|
border-bottom: 3px solid transparent
|
|
font:
|
|
size: 1em
|
|
weight: 400
|
|
family: $font-body
|
|
margin: 0
|
|
padding: 0 20px 0 40px
|
|
min-height: 32px
|
|
color: white
|
|
+text-overflow-ellipsis
|
|
transition: border 100ms ease-in-out
|
|
|
|
&:focus
|
|
border: thin solid transparent
|
|
border-bottom: 3px solid lighten($color-primary, 5%)
|
|
outline: none
|
|
|
|
&::placeholder
|
|
color: rgba(white, .5)
|
|
transition: color 150ms ease-in-out
|
|
|
|
&:hover
|
|
&::placeholder
|
|
color: rgba(white, .6)
|
|
|
|
#page-overlay
|
|
background-color: rgba(black, .8)
|
|
position: fixed
|
|
top: 0
|
|
bottom: 0
|
|
right: 0
|
|
left: 0
|
|
z-index: $z-index-base + 15
|
|
visibility: hidden
|
|
opacity: 0
|
|
transition: opacity 150ms ease-in-out
|
|
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
|
|
img
|
|
user-select: none
|
|
display: block
|
|
max-height: 96%
|
|
max-width: 96%
|
|
z-index: 0
|
|
|
|
box-shadow: 0 0 15px rgba(black, .2), 0 0 100px rgba(black, .5)
|
|
|
|
&.active
|
|
visibility: visible
|
|
opacity: 1
|
|
|
|
.no-preview
|
|
user-select: none
|
|
z-index: 0
|
|
color: $color-text-light-secondary
|
|
|
|
.nav-prev, .nav-next
|
|
display: block
|
|
font:
|
|
family: 'pillar-font'
|
|
size: 2em
|
|
height: 80%
|
|
width: 50px
|
|
cursor: pointer
|
|
color: $color-text-light-secondary
|
|
z-index: 1
|
|
+position-center-translate
|
|
|
|
&:hover
|
|
color: $color-text-light
|
|
|
|
&:before, &:after
|
|
+position-center-translate
|
|
|
|
.nav-prev
|
|
left: 50px
|
|
&:before
|
|
content: '\e839'
|
|
|
|
.nav-next
|
|
left: initial
|
|
right: 0
|
|
&:before
|
|
content: '\e83a'
|
|
|
|
|
|
&.video
|
|
.video-embed
|
|
+position-center-translate
|
|
position: fixed
|
|
|
|
iframe
|
|
width: 853px
|
|
height: 480px
|
|
|
|
#status-bar
|
|
opacity: 0
|
|
transition: all 250ms ease-in-out
|
|
|
|
i
|
|
margin-right: 5px
|
|
|
|
&.info
|
|
color: $color-info
|
|
&.error
|
|
color: $color-danger
|
|
&.warning
|
|
color: $color-warning
|
|
&.success
|
|
color: $color-success
|
|
&.default
|
|
color: $color-text-light
|
|
|
|
&.active
|
|
opacity: 1
|