Page MenuHome

_project.sass
No OneTemporary

File Metadata

Created
Fri, Feb 21, 11:50 AM

_project.sass

$node-latest-thumbnail-size: 160px
body.open-projects,
body.courses,
body.workshops
#project-container
+container-behavior
body.blog
background-color: white
#project_nav,
#project_nav-container
+media-md
width: $project_nav-width * 1.4
+media-sm
width: $project_nav-width * 1.1
+media-xs
width: 100%
width: $project_nav-width * 1.5
#project-container
display: flex
flex-direction: row
min-height: 300px
position: relative
z-index: $z-index-base
+media-xs
flex-direction: column-reverse
min-height: auto
#project-side-container
display: flex
+media-xs
flex-direction: column-reverse
#project_nav-container
+media-lg
width: $project_nav-width * 1.33
+media-xs
display: block
width: 100%
position: relative
height: initial !important
position: fixed
z-index: $z-index-base + 5
width: $project_nav-width
#project_sidebar
width: $project-sidebar-width
z-index: $z-index-base + 6
box-shadow: inset -1px 0 0 0 $color-background
+media-xs
width: 100%
ul.project-tabs
position: fixed
width: $project-sidebar-width
top: $project_header-height
bottom: 0
+media-xs
display: flex
position: relative
top: 0
width: 100%
li
width: $project-sidebar-width
height: $project-sidebar-width
position: relative
+media-xs
border-bottom: 2px solid transparent
+media-sm
border-bottom: 2px solid transparent
+media-md
border-left: 2px solid transparent
+media-lg
border-left: 2px solid transparent
&:first-child
border-top: thin solid transparent
&:hover,
&.active
cursor: pointer
a
color: $primary
a
align-items: center
color: $color-text
display: flex
justify-content: center
height: $project-sidebar-width
width: $project-sidebar-width
&.tabs-thumbnail
img
height: $project-sidebar-width
width: $project-sidebar-width
#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
background-color: $color-background-nav-dark
&:hover
background-color: $color-background-nav-light
#project-nav,
#project_context-container
flex: 1
/* Container for navigation on the left */
#project_nav
+media-lg
width: $project_nav-width * 1.33
+media-xs
width: initial
display: block
left: 0
position: relative
visibility: visible
width: $project_nav-width
&.about
display: none
visibility: hidden
/* Header with name and node edit tools */
#project_context-header
transition: box-shadow 250ms ease-in-out
z-index: $z-index-base + 3
&.is-offset
box-shadow: 0 0 25px rgba(black, .2)
span#project-edit-title
position: absolute
padding: 15px 20px
font:
size: 1.1em
weight: 400
white-space: nowrap
/* Edit Asset buttons */
.project-mode-view,
.project-mode-edit,
.project-mode-add
display: none
ul.project-edit-tools
li
a, button
padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2)
i
padding-right: 10px
&.button-save
&.field-error
a
background-color: $danger
border-color: $danger
color: white
&.saving
a
pointer-events: none
cursor: default
+pulse-75
&.disabled
cursor: not-allowed
a
pointer-events: none
background: repeating-linear-gradient(-45deg, darken($color-success, 15%), darken($color-success, 15%) 10px, darken($color-success, 20%) 10px, darken($color-success, 20%) 20px)
&.button-move
&.moving
background-color: $color-success
border-color: $color-success
pointer-events: none
cursor: default
+pulse-75
&.button-add,
&.button-edit
min-width: 80px
&.featured
a
color: $color-warning
border-color: $color-warning
&:hover
background-color: rgba($color-warning, .1)
&.disabled
+disabled-stripes
a
+disabled-stripes
&.dropdown
li
padding: 0
a
color: $body-color
display: block
padding: $dropdown-item-padding-y $dropdown-item-padding-x
padding-left: 15px
user-select: none
&:hover
color: $primary
text-decoration: none
/* Icons per asset type. */
i
&.icon-group:after
content: '\e80d'
&.icon-group_texture:after,
&.icon-group_hdri:after
content: '\e80b'
font-size: 1.1em
&.icon-asset:after
content: '\e825'
&.icon-page:after
content: '\e824'
&.icon-texture:after
content: '\e80a'
&.icon-hdri:after
content: '\f019'
/* // Extra asset tools in dropdown */
/* // Edit Asset buttons */
ul.project_nav-edit-list
list-style: none
padding: 0
margin: $project_header-height 0 0 0
li
background-color: $color-background
border-bottom: 1px solid $color-background-dark
color: $color-text-dark
position: relative
&:hover
cursor: pointer
background-color: $color-background-light
a
padding: 10px 15px
display: inline-block
width: 100%
text-decoration: none
color: $color-text-dark
i
padding-right: 15px
&.active
background-color: white
a
color: $color-primary-dark
.project_nav-toggle-btn
position: absolute
bottom: 0
width: 100%
padding: 10px
text-align: center
color: $color-text-light-hint
cursor: pointer
&:hover
color: $color-text-light
i
font-size: 1.3em
+media-xs
visibility: hidden
display: none
#project_context
position: relative
display: flex
flex-direction: column
flex: 1
height: 100%
background-color: white
#project_context-header+#project_context
padding-top: $project_header-height
#node-container
background-color: white
flex: 1
/* For error messages (403) and other overlaid text*/
#node-overlay
z-index: $z-index-base + 2
position: relative
opacity: 0
transition: opacity 250ms ease-in-out
&.active
opacity: 1
display: block !important
section.comments-list
.comment-reply-container
padding: 15px 15px 15px 20px
.comments-list-header
padding: 0 20px
/* Project context on the right of the navigation */
/* Contains #project_context */
#project_context-container
iframe#server_error
width: 100%
min-height: 800px
border: none
/* The actual navigation tree container */
#project_tree
+media-xs
margin-top: 0
overflow-y: auto // show vertical scrollbars when needed.
padding: 5px 0 // some padding on top/bottom of jsTree.
position: relative
&.edit
margin-top: 0
/* Node Context */
=project-node-title
font-size: 1.5em
color: $color-text-dark-primary
$node-preview-max-height-sm: 300px
$node-preview-max-height-md: 500px
$node-preview-max-height-lg: 700px
#node-container.texture
.texture-title
padding: 20px 20px 0 20px
margin: 0
float: left
text-transform: capitalize
+project-node-title
position: relative
z-index: 1
.texture-license
position: relative
z-index: 1
float: right
padding: 25px 20px 0 0
cursor: default
i
font-size: 1.3em
&.pi-license-cc-0
top: -1px
span
position: relative
bottom: 2px
margin-right: 10px
color: $color-text-dark-secondary
&.public, &.public span
color: $color-success
.texture-backdrop
background:
size: cover
position: 50% 50%
position: absolute
z-index: 0
opacity: .3
width: 100%
height: 250px
top: -10px
left: -10px
filter: blur(10px)
&:after
content: ''
display: block
position: absolute
width: 100%
height: 250px
background: linear-gradient(transparent, white)
top: 0
left: 0
z-index: 0
filter: none
.node-row
display: flex
width: 100%
flex: row
clear: both
padding: 20px
margin-bottom: 0
border-bottom: thin solid rgba($color-text-dark, .2)
&.texture-map
width: 50%
float: left
clear: none
border-right: thin solid rgba($color-text-dark, .2)
background-color: white
position: relative
&:last-child,
&:nth-child(even)
border-right: none
&:last-child
border-bottom: none
&.texture-info
color: $color-text-dark-secondary
list-style-type: none
margin: 0
padding: 10px 20px
li
&:not(:first-child)
padding-left: 15px
i
position: relative
top: -1px
right: 2px
&.status
margin-left: auto
&.pending
color: $danger
section.node-preview.texture
overflow: hidden
width: 50%
max-height: 200px
max-width: 200px
float: left
position: relative
background-color: $color-background
border-radius: 3px
user-select: none
img.node-preview-thumbnail
+position-center-translate
width: 100%
border-radius: 3px
user-select: none
cursor: grabbing
cursor: -webkit-grabbing
.loading
position: absolute
top: 0
bottom: 0
left: 0
right: 0
color: rgba(white, .5)
opacity: 0
visibility: hidden
background-color: rgba(black, .5)
width: 100%
height: 100%
pointer-events: none
transition: opacity 250ms ease-in-out
i
font-size: 1.5em
position: absolute
top: 45%
left: 45%
&.active
opacity: 1
visibility: visible
section.node-details-container.texture
width: 100%
flex: 1
position: relative
min-height: 200px
.node-details-header
width: 100%
max-width: 100%
display: block
float: none
padding: 5px 20px 0 20px
min-height: initial
&.nofiles
padding: 0
.node-title
color: $color-text-dark-secondary
font:
weight: 400
size: 1.2em
.node-title
color: $color-text-dark-primary
font:
weight: 500
size: 1.5em
+text-overflow-ellipsis
.node-details-attributes
padding: 0 20px 10px
span
display: block
&.sizes, &.extra, &.length, &.content_type
color: $color-text-dark-secondary
padding: 5px 0
font:
size: 1.1em
weight: 400
strong
padding-left: 5px
&.content_type
color: $color-text-dark-hint
font-size: .9em
text-transform: uppercase
.node-details-meta
background-color: transparent
border: none
display: block
width: 100%
max-width: 100%
position: absolute
bottom: 0
padding: 0 0 0 10px
.node-details-meta-list button
width: 100%
.node-details-meta-list-item.type
text-transform: uppercase
section.node-preview
+media-md
max-height: $node-preview-max-height-md
+media-lg
max-height: $node-preview-max-height-lg
align-items: center
background-color: black
color: $color-text-light-primary
display: flex
flex: 1
justify-content: center
max-height: 500px
min-height: 200px
overflow: hidden
iframe
width: 100%
img
display: block
max-height: $node-preview-max-height-lg
max-width: 100%
object-fit: scale-down
+media-xs
width: 100%
+media-md
max-height: $node-preview-max-height-md
+media-lg
max-height: $node-preview-max-height-lg
&.image
cursor: zoom-in
&.video
background-color: black
position: relative
padding-bottom: 56.25%
height: 0
overflow: hidden
.video-js
position: absolute
top: 0
left: 0
width: 100%
height: 100%
.video-dummy
position: absolute
top: 0
bottom: 0
left: 0
right: 0
&-content
+position-center-translate
align-items: center
background-color: rgba(darken($color-primary, 25%), .8)
color: $color-text-light
display: flex
height: 100%
justify-content: center
padding: 15px
width: 100%
z-index: 2
&-icon
font-size: 4em
&-text
font-size: 1.6em
span
display: block
hr
border-color: rgba(white, .5)
a
display: inline-block
color: white
font-size: .7em
em
font-style: normal
color: $color-warning
margin-right: 10px
&.group
align-items: center
display: flex
padding: 20px
position: relative
&.project
background-color: black
width: 100%
img
max-height: 800px
max-width: 100%
object-fit: cover
width: 100%
section.node-preview-forbidden
align-items: center
background-color: $color-background-nav
color: $color-text-light
cursor: default
display: flex
justify-content: center
min-height: 400px
position: relative
overflow: hidden
img
height: 130%
left: -60px
max-width: initial
filter: blur(30px)
object-fit: cover
opacity: .5
position: absolute
top: -60px
width: 130%
z-index: 0
> div
font-size: 1.4em
position: relative
z-index: 1
span
display: block
hr
opacity: .5
section.node-details-container
background-color: white
&.project
padding-bottom: 15px
/* Narrower details for about page (since it doesn't have navtree) */
body.about
section.node-details-container.project
+media-lg
max-width: $screen-lg / 1.4
margin: 0 auto
.node-title
+project-node-title
section.node-details-container,
section.node-preview.group
position: relative
.node-details-header
align-items: center
display: flex
padding: 15px 20px
+media-xs
font-size: .7em
width: 100%
max-width: 100%
.node-details-meta-actions
margin-left: auto
.btn-browsetoggle
+button(lighten($color-background-nav, 20%), 3px)
width: 48px
text-align: center
padding: 2px 4px
i
font-size: 1.3em
padding: 0
margin: 0
.node-details-description
+node-details-description
padding-left: 20px
padding-right: 20px
.node-details-meta
background-color: $color-background-light
border-bottom: thin solid $color-background
display: flex
flex-direction: column
font-weight: lighter
padding: 10px 20px
> ul
align-items: center
display: flex
list-style-type: none
margin: 0
padding: 0
> li
align-items: baseline
color: $color-text-dark-secondary
display: flex
padding-left: 10px
margin-left: 10px
&:first-child
margin-left: 0
padding-left: 0
&.status-pending
color: $danger
&.public
color: $color-success
&.download
.dropdown-toggle
// padding-right: 0
i.icon-dropdown-menu
// padding-left: 10px
/* Download dropdown options */
ul.dropdown-menu
min-width: 240px
li
display: block
a
display: flex
padding: 10px 15px
&:hover
text-decoration: none
span
color: $primary
&.length
color: lighten($color-primary, 10%)
span
color: $body-color
&.length
margin-right: auto
color: $color-text-dark-hint
padding-right: 15px
&.format
text-transform: uppercase
align-self: flex-end
margin-left: auto
&.size
display: inline-block
padding-left: 15px
&.left-side
margin-left: auto
// When the asset is type .blend
.blend
min-width: 52px
&.preview
padding: 0
color: $color-text-light-primary
position: absolute
right: 10px
bottom: 20px
z-index: 1
ul.node-details-meta-list
li.node-details-meta-list-item
&.date
&:before
content: ''
&.author
color: lighten($color-background-nav, 25%)
&.status
color: $color-text-dark
.node-details-license
align-items: center
border-bottom: thin solid $color-background
color: $color-text-dark
display: flex
font-weight: lighter
padding: 10px 20px
&:hover
color: $color-text-dark
span.type
i
color: $color-text-dark-primary
font-size: 1.8rem
margin-left: -5px
padding-right: 10px
&:after
top: 2px
left: -22px
position: relative
&:before
top: 2px
position: relative
span
text-transform: uppercase
section.node-details-container
&.storage
.node-details-meta
ul.node-details-meta-list
li.node-details-meta-list-item
&.length
margin-left: auto
.project-featured-container
border-top: thin solid $color-background
padding-top: 20px
margin-top: 20px
padding-left: 20px
h3
margin-top: 0
.featured-list
width: 100%
max-width: 800px
+clearfix
.am-wrapper
float: left
position: relative
overflow: hidden
.am-wrapper img
position: absolute
outline: none
.featured-item
.featured-item-info
display: flex
flex-direction: column-reverse
position: absolute
z-index: 1
opacity: 0
color: white
top: 0
left: 0
right: 0
bottom: 0
padding: 5px 10px
border-top-right-radius: 3px
transition: opacity 150ms ease-in-out
background-image: linear-gradient(10deg, rgba(0,0,0,0.85) 15%, transparent 50%)
+media-xs
opacity: 1
span
padding: 3px 0
&.title
line-height: 1.2em
font-weight: 500
word-break: break-word
&.type
font-size: .8em
text-transform: capitalize
color: $color-text-light-secondary
+text-overflow-ellipsis
&:hover
.featured-item-info
opacity: 1
.error-node-type-not-found
color: $danger
clear: both
a.learn-more
font-size: .9em
margin-left: 20px
padding: 5px 10px
+button($color-info, 3px)
.node-extra
display: flex
flex-direction: column
padding: 0 20px
width: 100%
.node-updates
flex: 1
font-size: 1.1em
margin-top: 15px
ul
padding: 0
margin: 0 0 15px 0
display: flex
flex-direction: row
flex-wrap: wrap
li
display: flex
flex-direction: column
list-style: none
padding: 5px
border-top: thin solid $color-background
cursor: pointer
width: 33.3333%
+media-xs
width: 100%
&.texture, &.group_texture
width: 25%
&:hover
img
opacity: .9
a.title
color: $color-primary
text-decoration: underline
&.post
.info .title
color: $node-type-post
a.image
border-color: $node-type-post
background-color: hsl(hue($node-type-post), 20%, 55%)
&.asset.image a.image
border-color: $node-type-asset_image
background-color: hsl(hue($node-type-asset_image), 20%, 55%)
&.asset.file a.image
border-color: $node-type-asset_file
background-color: hsl(hue($node-type-asset_file), 20%, 55%)
&.asset.video a.image
border-color: $node-type-asset_video
background-color: hsl(hue($node-type-asset_video), 20%, 55%)
.image
width: 100%
height: $node-latest-thumbnail-size
min-height: $node-latest-thumbnail-size
max-height: $node-latest-thumbnail-size
background-color: $color-background
margin: 5px auto 10px auto
position: relative
overflow: hidden
border-bottom: 3px solid $color-background-dark
border-top-left-radius: 3px
border-top-right-radius: 3px
img
max-height: $node-latest-thumbnail-size
+position-center-translate
i
color: rgba(white, .9)
font-size: 1.8em
position: absolute
bottom: 3px
left: 5px
text-shadow: 1px 1px 0 rgba(black, .2)
&.pi-file-archive
font-size: 1.5em
bottom: 5px
&.pi-newspaper
font-size: 1.6em
left: 7px
.ribbon
+ribbon
.info
width: 100%
height: 100%
display: flex
flex-direction: column
justify-content: space-between
word-break: break-word
.description
font-size: .9em
padding-top: 5px
color: $color-text-dark-primary
.title
display: block
font-size: 1em
color: $color-text-dark
+clearfix
+text-overflow-ellipsis
span.details
width: 100%
display: block
font-size: .8em
padding: 5px 0
color: $color-text-dark-secondary
+clearfix
.who
margin-left: 3px
.what
text-transform: capitalize
section.node-children
&.group, &.storage
flex: 1
padding: 10px 0 25px 20px
+clearfix
.list-node-children-container
position: relative
width: $list-node-children-item-width
height: $list-node-children-item-width
float: left
margin: 10px 15px 10px 0
&.group_texture
.list-node-children-item.group_texture
height: $list-node-children-item-width
margin-top: 5px
.list-node-children-item-thumbnail
.list-node-children-item-thumbnail-icon i
position: relative
bottom: 10px
.list-node-children-item-name
bottom: 26px
&.group_hdri, &.hdri
width: 300px
+media-md
width: 33.333%
margin: 0 0 5px 0
+media-sm
width: 50%
margin: 0 0 5px 0
.list-node-children-item.hdri,
.list-node-children-item.group_hdri
height: $list-node-children-item-width
width: 98%
margin-top: 5px
.list-node-children-item-thumbnail
width: 100%
height: $list-node-children-item-width
+media-sm
img
width: 100%
.list-node-children-item-thumbnail-icon i
bottom: 30px
.list-node-children-item-name
bottom: 26px
width: 100%
max-width: 100%
.list-node-children-empty
color: $color-text-dark-secondary
font-size: 1.2em
.list-node-children-item-preview
margin: 0
position: absolute
top: $list-node-children-item-width + 10px
width: auto
height: auto
background: black
box-shadow: 1px 1px 1px rgba(black, .5), 2px 2px 15px rgba(black, .5)
visibility: hidden
display: none
opacity: 0
z-index: 2
max-height: 260px
min-height: 50px
min-width: 100px
max-width: 320px
border-radius: 3px
transition: opacity .1s ease-in-out
img.texture-preview
width: auto
margin: 0 auto
max-height: 260px
max-width: 320px
span.texture-name
display: block
width: 100%
padding: 8px 10px 0 10px
color: white
font:
size: 1.1em
family: $font-headings
border-top-left-radius: 3px
border-top-right-radius: 3px
text-shadow: 1px 1px 1px rgba(black, .5)
position: absolute
top: 0
left: 0
right: 0
@include overlay(rgba($color-background-nav, .9), 0%, transparent, 25%)
+text-overflow-ellipsis
&:hover
display: none
&.active
opacity: 1
visibility: visible
display: block
.list-node-children-item
float: left
margin: 10px 10px 10px 0
border-radius: 3px
color: $color-text-dark
box-shadow: 2px 2px 0 rgba(black, .1)
width: $list-node-children-item-width
overflow: hidden
&:hover
color: darken($color-primary, 20%)
opacity: .9
text-decoration: none
&:active
opacity: .8
color: $color-primary
& .list-node-children-item-name i
color: $color-primary
&.has-picture
.list-node-children-item-thumbnail
background-color: black
.cloud-logo
+position-center-translate
font-size: 4em
color: $color-background-dark
left: $list-node-children-item-width / 2 - 10
/* Browse group as list */
&.browse-list
display: none
width: 99%
position: relative
background-color: initial
box-shadow: none
border: thin solid transparent
border-top-color: darken(white, 8%)
margin: 0 10px 0 0
padding:
top: 7px
bottom: 7px
+clearfix
clear: none
.cloud-logo
font-size: 2em
color: darken($color-background, 60%)
+position-center-translate
left: $list-node-children-item-width_list / 1.3
&:hover
opacity: 1
text-decoration: none
cursor: default
.list-node-children-item-name
text-decoration: none
color: darken($color-primary, 10%)
.list-node-children-item-thumbnail
cursor: pointer
&:active
background-color: rgba($color-background, .5)
&:focus
background-color: thin solid rgba($color-primary, .2)
.list-node-children-item-thumbnail
float: left
min-width: $list-node-children-item-width_list * 1.69
max-width: $list-node-children-item-width_list * 1.69
height: $list-node-children-item-width_list
background-color: darken($color-background, 55%)
box-shadow: inset 0 0 1px darken($color-background, 65%)
img
height: $list-node-children-item-width_list
width: auto
.list-node-children-item-thumbnail-icon
font-size: 1.2em
transition: none
.list-node-children-item-ribbon
+ribbon
right: -30px
top: 5px
span
font-size: 60%
margin: 1px 0
padding: 2px 35px
.list-node-children-item-name
position: relative
padding:
top: 0
left: 15px
font:
size: 1.15em
color: $color-text-dark-primary
text-shadow: none
background-color: initial
width: initial
max-width: initial
&:hover
cursor: pointer
text-decoration: underline
.list-node-children-item-meta
position: relative
left: 15px
font-size: .9em
color: $color-text-dark-secondary
background-color: initial
padding: 0
text-decoration: none
span
width: 100%
&.updated
color: $color-text-dark-hint
&.status
font-size: .8em
color: $color-text-dark-secondary
border: thin solid $color-text-dark-hint
padding: 3px 8px
text-transform: uppercase
border-radius: 3px
margin-right: 5px
.list-node-children-item-thumbnail
display: flex
align-items: center
justify-content: center
width: $list-node-children-item-width
height: $list-node-children-item-width / 1.69
background-color: $color-background
position: relative
overflow: hidden
img
height: 100%
+position-center-translate
.list-node-children-item-thumbnail-icon
position: absolute
top: 0
left: 0
right: 0
bottom: 0
font-size: 1.3em
color: white
text-shadow: 1px 1px 0 rgba(black, .2)
background-image: linear-gradient(10deg, rgba(black, .2) 0%, transparent 40%)
i
position: absolute
bottom: 5px
left: 5px
& .list-node-children-item-status
color: $color-text-light-primary
background-color: rgba($color-background-nav, .2)
padding: 2px 6px
border-radius: 3px
font-size: .8em
position: absolute
top: 10px
right: 10px
& .list-node-children-item-ribbon
+ribbon
& .list-node-children-item-name
z-index: 1
position: relative
display: flex
align-items: center
background-color: $color-background
padding: 5px 12px
font-size: .9em
width: $list-node-children-item-width
max-width: $list-node-children-item-width
span
+text-overflow-ellipsis
&.texture, &.hdri
margin: 5px 10px 5px 0
position: relative
width: $list-node-children-item-width
height: $list-node-children-item-width
.list-node-children-item-thumbnail
height: $list-node-children-item-width
background-color: $color-background-nav
&:hover
opacity: 1
img
opacity: .15
.list-node-children-item-name
opacity: 1
img
transition: opacity 100ms ease-out
.list-node-children-item-name
text-shadow: 1px 1px 2px rgba(black, .5)
display: block
opacity: 0
background-color: transparent
position: absolute
z-index: 2
top: 5px
left: 10px
color: white
font-size: 1em
height: 100%
span
padding: 0
display: block
&.sizes
font-weight: bold
small
padding: 0 5px
font-size: .8em
color: $color-text-light-primary
&.variations
padding-top: 5px
margin:
top: 5px
right: 20px
font-size: .9em
color: $color-text-light-primary
text-transform: capitalize
.more
font-size: .9em
text-transform: none
&.icons
position: absolute
top: 0
right: 12px
font-size: 1.2em
i
color: white
#node_index-container
background-color: $color-background-light
width: 100%
+media-lg
border-radius: 3px
#node_index-header
position: relative
width: 100%
color: white
img.background-header
position: absolute
z-index: 0
width: 100%
top: 0
left: 0
+media-lg
border-top-left-radius: 3px
border-top-right-radius: 3px
#node_index-collection-info
position: relative
z-index: 1
width: 100%
text-shadow: 1px 1px 1px rgba(black, .5), 0 0 25px rgba(black, .6)
padding: 40px 30px
.node_index-collection-name
font:
size: 4em
weight: 600
margin-bottom: -5px
text-transform: uppercase
.node_index-collection-description
font-size: 1.4em
#node_index-list-container
background-color: white
width: 100%
height: 100%
padding: 0
margin: 0
position: relative
+clearfix
.node_index-list,
.node_index-collection
padding: 15px 0 0 0
margin: 0
clear: both
/* Block for each project item */
& .node_index-list-item
display: flex
max-width: 70%
padding: 0
margin:
left: 15px
bottom: 30px
+clearfix
& .item-info
width: 100%
padding: 0 15px
& .item-title
padding-bottom: 15px
font:
size: 1.8em
weight: 400
& .item-image
padding-top: 5px
img
width: 90px
height: 90px
border-radius: 3px
.node_index-collection
display: flex
align-items: stretch
flex-wrap: wrap
margin: 0 auto
padding: 15px
position: relative
z-index: 1
+media-xs
flex-direction: column
.node_index-collection-card
position: relative
border-radius: 3px
width: 31%
overflow: hidden
background-color: white
color: $color-text-dark-primary
box-shadow: 1px 1px 2px rgba(black, .1), 0 0 0 1px rgba(black, .1)
margin: 12px
top: 0
transition: box-shadow 150ms ease-in-out
cursor: pointer
+media-md
width: 30%
+media-sm
width: 45%
margin: 15px
+media-xs
width: 100%
margin-left: auto
margin-right: auto
&:hover
box-shadow: 1px 1px 15px rgba(black, .25)
&:active, &:focus
box-shadow: 1px 1px 15px rgba(black, .25), 0 0 0 2px $color-primary
&.empty
padding: 20px 15px
color: $color-text-dark-secondary
&:hover
cursor: default
a.item-header
display: block
width: 100%
overflow: hidden
img
width: 100%
border-bottom: 3px solid $color-primary
.item-info
position: relative
padding: 15px 20px 30px 20px
a.item-title
display: inline-block
width: 100%
padding: 0 0 10px 0
color: $color-text-dark
font:
size: 1.5em
weight: 500
text-decoration: none
p.item-description
font:
size: 1.15em
a.learn-more
position: absolute
padding: 3px 20px
bottom: 0
right: 0
visibility: hidden
font-size: .8em
margin: 10px
&:hover
a.learn-more
visibility: visible
#node-add-container,
#node-edit-container,
#blog_container
#node-add-header,
#node-edit-header
background-color: white
padding: 20px 20px 10px 20px
height: 80px
position: relative
.node-add-title,
.node-edit-title
position: absolute
bottom: 10px
left: 20px
+project-node-title
font-size: 2em
color: $color-text-dark-secondary
#node-add-form,
#node-edit-form
flex: 1
background-color: white
#node-add-form,
#node-edit-form,
#blog_post-edit-form
padding: 20px
.form-group
position: relative
margin: 0 auto 30px auto
&.tags .select2-container
.select2-selection
+input-generic
select
text-transform: capitalize
label
+label-generic
text-transform: capitalize
&.error
color: $danger
background-color: $color-background-light
padding: 10px 15px
border: thin solid lighten($danger, 10%)
border-top: 2px solid $danger
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
label
color: $danger
font-weight: 500
&.file
background-color: $color-background-light
padding: 10px 15px
border: thin solid $color-background
border-top: 2px solid $color-info
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
.form-upload-progress
.form-upload-progress-bar
margin-top: 5px
background-color: $color-success
height: 5px
min-width: 0
border-radius: 3px
.form-group
.node-preview-thumbnail
display: block
&.attachments
+clearfix
.form-control
padding: 0
margin: 0
border: none
list-style-type: none
+clearfix
label[for^='attachments-']
margin-top: 15px
font-weight: 400
div[id^='attachments-']
margin-bottom: 15px
border-top: thin solid $color-text-dark-hint
.form-group.description,
.form-group.summary,
.form-group.content
position: relative
textarea
width: 100%
min-height: 220px
line-height: 1.5em
border: 1px solid $color-background-dark
border-radius: 3px
margin: 0 auto 10px auto
padding: 10px
color: $color-text-dark
transition: all 300ms ease-in-out
resize: vertical
&:focus
border: 1px solid $color-info
outline: none
&.field-error
border-color: $danger
.md-preview-loading
position: absolute
left: 85px
padding-top: 5px
font-size: .9em
color: $color-text-dark-secondary
display: none
.node-edit-form-md-preview
+markdown-preview-container
padding:
top: 20px
left: 0
right: 0
&:before
content: 'Live Preview'
position: absolute
top: -25px
font-size: .7em
color: $color-text-dark-secondary
transition: color 150ms ease-in-out
&:after
content: 'Markdown Supported'
position: absolute
top: -25px
right: 0
font-size: .7em
color: $color-text-dark-hint
transition: color 150ms ease-in-out
.node-edit-form-md-preview:empty
color: transparent
margin: 0 auto
padding: 0 10px
&:before, &:after
content: ''
color: transparent
#node-edit-form-md-preview
padding: 20px
#node-add-container,
#node-edit-container
display: flex
flex-direction: column
flex: 1
color: $color-text-dark
form#node-edit-form
&.group_texture
.form-group.status,
.form-group.description
display: none
&.texture
.form-group
input.fileupload
&.notallowed
opacity: 0.2
pointer-events: none
cursor: progress
.fieldlist
li.fieldlist-item
div[class$="file"]
width: 75%
margin: 0
.files-header
width: 100%
#files-action-add
+button($color-success, 3px, true)
width: 200px
padding: 5px 10px
margin-bottom: 10px
opacity: 1
user-select: none
&:active
background: lighten($color-success, 5%)
&.notallowed
opacity: .2
pointer-events: none
cursor: progress
.fieldlist
li.fieldlist-item
div[class*="map_type"],
div[class*="is_tileable"]
padding: 10px 15px
width: 25%
float: right
border-left: thin solid $color-background
div[class*="map_type"]
select.form-control
background: white !important
label
display: none
div[class*="is_tileable"]
label label
font-weight: 400 !important
padding-left: 0
div[class$="file"]
margin-top: 10px
width: auto
label
display: none
#overlay-mode-move-container
visibility: hidden
background-color: lighten($color-background, 5%)
box-shadow: 0 5px 35px rgba(black, .2)
color: $color-text-dark-primary
position: absolute
top: 0
left: 0
right: 0
width: 80%
height: 60px
z-index: $z-index-base + 1
opacity: 0
margin: 0 auto
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
transition: all 150ms ease-in-out
border: thin solid lighten($color-text-dark-hint, 10%)
border-top: none
+media-xs
width: 98%
height: 100px
+media-sm
width: 98%
height: 100px
+media-md
width: 90%
+media-lg
width: 80%
&.visible
visibility: visible
opacity: 1
top: $project_header-height
.overlay-container
.title
i
animation:
name: overlay-mode-move-icon
duration: 1.5s
delay: 0
fill-mode: forwards
iteration-count: infinite
.overlay-container
width: 100%
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
transition: top 350ms ease-in-out
display: flex
flex-direction: row
align-items: center
justify-content: center
.title
text-align: center
position: relative
font:
size: 1.2em
weight: 300
i
position: relative
right: 0
padding-right: 15px
strong
font-weight: 400
.buttons
font-size: .9em
float: left
text-align: center
padding: 15px 0 15px 15px
button
padding: 5px
margin: 0 5px
+media-sm
margin: 5px
button.cancel
+button($color-text-dark-primary, 3px)
button.move
+button($color-success, 3px, true)
&.disabled
pointer-events: none
cursor: not-allowed
background: repeating-linear-gradient(-45deg, darken($color-success, 15%), darken($color-success, 15%) 10px, darken($color-success, 20%) 10px, darken($color-success, 20%) 20px)
@keyframes overlay-mode-move-icon
0
right: 0
50%
right: 5px
100%
right: 0
#node-add-form
.btn
margin-right: 10px
.fileupload-buttonbar
padding: 10px 0
.fileinput-button
+button($color-success, 3px)
.start
+button($color-info, 3px)
.cancel
+button($color-warning, 3px)
.delete
+button($danger, 3px)
.toggle
margin: 0 20px
.files
.btn
&.start
+button($color-info, 3px)
&.cancel
+button($color-warning, 3px)
&.delete
+button($danger, 3px)
&.create
+button($color-success, 3px)
.template-upload,
.template-download
td
border: none
.preview
img
border-radius: 3px
.progress
height: 10px
box-shadow: none
.size
color: $color-text-dark-secondary
.toggle
margin: 0 20px
@import plugins/_videoplayer
/* Edit Project specific classes*/
.ace_editor.ace-tm
min-height: 300px
margin: 60px auto 30px auto
font-size: 1em
resize: vertical !important
overflow: auto !important
color: $color-text
&+.form-group.dyn_schema,
&+.form-group.form_schema,
&+.form-group.permissions
label
position: absolute
top: -355px
.form-control
display: none
.file_delete, .file_original
display: block
/* Project blog overrides */
#project_context
#blog_container
padding: 0
#blog_index-container
width: 100%
padding: 0
border: none
box-shadow: none
.blog_index-header
border-radius: 0
.join-project
display: flex
flex-direction: column
width: 100%
height: 100%
color: white
background-position-x: 64%
a.cta
padding: 5px 35px
+button($color-primary, 3px, true)
a.cta-learn-more
padding: 5px 20px
+button(white, 3px)
display: inline-block
margin: 25px 0 25px 15px
padding: 5px 35px
&__title
display: flex
padding: 25px 0 10px 10px
font:
size: 2.5em
weight: 300
span.icon
display: flex
align-items: center
span.text
display: flex
align-items: center
text-align: left
line-height: 1.2em
margin-right: auto
&__lead
font-size: 1.4em
font-weight: 300
padding: 0 25px 25px
max-width: 800px
&__summary
font-size: 1.1em
padding: 0 25px
max-width: 500px
ul
margin: 0
padding-left: 20px
&-cta-container
a.cta
display: inline-block
margin: 25px 0 0 0
padding: 5px 35px
text-align: center

Event Timeline