2707 lines
48 KiB
Sass
2707 lines
48 KiB
Sass
$project-sidebar-background: lighten($color-background, 5%)
|
|
$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-side-container+#project_context-header
|
|
width: 100%
|
|
left: 0
|
|
|
|
#project_context-header
|
|
span#status-bar
|
|
text-align: left
|
|
|
|
#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
|
|
|
|
+media-xs
|
|
width: 100%
|
|
|
|
ul.project-tabs
|
|
background-color: $color-background-nav
|
|
margin: 0
|
|
padding: 0
|
|
list-style: none
|
|
|
|
position: fixed
|
|
width: $project-sidebar-width
|
|
top: $project_header-height
|
|
bottom: 0
|
|
|
|
+media-xs
|
|
display: flex
|
|
position: relative
|
|
top: 0
|
|
width: 100%
|
|
|
|
li
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
width: $project-sidebar-width
|
|
height: $project-sidebar-width
|
|
position: relative
|
|
color: white
|
|
background-color: $color-background-nav
|
|
border-left: 2px solid transparent
|
|
transition: all 100ms ease-in-out
|
|
|
|
+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
|
|
background-color: $color-background-nav-light
|
|
cursor: pointer
|
|
|
|
+media-xs
|
|
border-bottom: 2px solid $color-background-nav-light
|
|
+media-sm
|
|
border-bottom: 2px solid $color-background-nav-light
|
|
+media-md
|
|
border-left: 2px solid $color-background-nav-light
|
|
+media-lg
|
|
border-left: 2px solid $color-background-nav-light
|
|
|
|
a
|
|
width: $project-sidebar-width
|
|
height: $project-sidebar-width
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
color: $color-text-light-primary
|
|
|
|
i
|
|
font-size: 1.1em
|
|
|
|
&.active
|
|
background-color: $color-background-nav-light
|
|
|
|
// The tiny triangle
|
|
&:after
|
|
+media-xs
|
|
border-top-color: $project-sidebar-background
|
|
border-right-color: transparent
|
|
left: 50%
|
|
right: initial
|
|
transform: translateX(-50%)
|
|
top: 0
|
|
|
|
border: 7px solid transparent
|
|
border-right-color: $project-sidebar-background
|
|
content: ''
|
|
display: block
|
|
position: absolute
|
|
right: 0
|
|
top: 50%
|
|
transform: translateY(-50%)
|
|
|
|
a
|
|
color: white
|
|
|
|
&.tabs-thumbnail
|
|
height: $project-sidebar-width
|
|
border-bottom: 2px solid $color-background-nav-light
|
|
|
|
img
|
|
width: $project-sidebar-width
|
|
height: $project-sidebar-width
|
|
|
|
&.image
|
|
border-left: none
|
|
|
|
#project-loading
|
|
position: absolute
|
|
width: $project-sidebar-width
|
|
height: $project-sidebar-width
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
i
|
|
position: relative
|
|
top: -1px
|
|
font-size: 1em
|
|
color: white
|
|
|
|
#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
|
|
|
|
background-color: $project-sidebar-background
|
|
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_nav-header,
|
|
#project_context-header
|
|
align-items: center
|
|
color: white
|
|
display: flex
|
|
position: relative
|
|
|
|
#project_context-header
|
|
align-items: center
|
|
background-color: white
|
|
background-color: $color-background-light
|
|
border-bottom: thin solid lighten($color-text-dark-hint, 10%)
|
|
box-shadow: none
|
|
color: $color-text-dark-secondary
|
|
display: flex
|
|
height: $project_header-height
|
|
min-height: $project_header-height
|
|
position: fixed
|
|
top: $project_header-height
|
|
transition: box-shadow 250ms ease-in-out
|
|
width: auto
|
|
z-index: $z-index-base + 3
|
|
|
|
&.is-offset
|
|
box-shadow: 0 0 25px rgba(black, .2)
|
|
|
|
#project_nav-header
|
|
z-index: $z-index-base + 3
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
height: $project_header-height
|
|
min-height: $project_header-height
|
|
width: 100%
|
|
background-color: $color-background-light
|
|
border-bottom: thin solid $color-background-dark
|
|
|
|
/* Name of the project */
|
|
.project-title
|
|
width: 100%
|
|
max-width: 100%
|
|
height: 100%
|
|
transition: background-color 150ms ease-in-out
|
|
|
|
a
|
|
display: block
|
|
width: 100%
|
|
color: $color-text-dark
|
|
padding: 15px
|
|
font-size: 1.1em
|
|
+text-overflow-ellipsis
|
|
|
|
&:hover, &:active
|
|
color: $color-primary
|
|
text-decoration: none
|
|
outline: none
|
|
|
|
span#status-bar
|
|
position: absolute
|
|
left: 0
|
|
top: 10px
|
|
min-width: 33%
|
|
padding: 5px 15px
|
|
color: $color-text-dark
|
|
opacity: 0
|
|
z-index: 1
|
|
background-color: $color-background-light
|
|
font-weight: 400
|
|
white-space: nowrap
|
|
transition: all 250ms ease-in-out
|
|
|
|
+media-xs
|
|
left: 0
|
|
min-width: 100%
|
|
|
|
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
|
|
|
|
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
|
|
display: flex
|
|
align-items: center
|
|
height: 100%
|
|
padding: 0
|
|
margin:
|
|
top: 0
|
|
left: auto
|
|
right: 5px
|
|
bottom: 0
|
|
color: $color-text-dark-hint
|
|
|
|
list-style-type: none
|
|
font-size: .9em
|
|
|
|
+media-xs
|
|
width: 100%
|
|
margin: 0 auto
|
|
justify-content: space-around
|
|
|
|
/* Bottons at the end of a form, like Save Changes */
|
|
&.bottom
|
|
+clearfix
|
|
padding: 20px 0 25px 0
|
|
border-top: thin solid $color-text-dark-hint
|
|
justify-content: flex-end
|
|
width: 100%
|
|
height: initial
|
|
|
|
li
|
|
margin: 0
|
|
padding: 0
|
|
position: relative
|
|
float: left
|
|
user-select: none
|
|
|
|
a
|
|
min-width: 110px
|
|
user-select: none
|
|
|
|
&:focus, &:active
|
|
text-decoration: none
|
|
outline: none
|
|
|
|
&.button-save
|
|
|
|
&.disabled
|
|
border-bottom: none
|
|
|
|
a
|
|
color: white
|
|
border-color: darken($color-success, 10%)
|
|
|
|
a
|
|
border-color: $color-success
|
|
background-color: $color-success
|
|
color: white
|
|
margin-right: 10px
|
|
|
|
&:hover
|
|
background-color: lighten($color-success, 5%)
|
|
|
|
&.field-error
|
|
a
|
|
background-color: $color-danger
|
|
border-color: $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
|
|
|
|
|
|
&.button-dropdown
|
|
min-width: 50px
|
|
cursor: pointer
|
|
i
|
|
margin: auto
|
|
padding: 0
|
|
|
|
&.button-add-icon
|
|
margin-right: 5px
|
|
|
|
a.dropdown-toggle
|
|
display: inline-block
|
|
min-width: auto
|
|
|
|
&.open
|
|
a.dropdown-toggle
|
|
color: $color-text-light
|
|
background-color: $color-primary
|
|
border-color: darken($color-primary, 5%)
|
|
|
|
li.button-delete:hover
|
|
a
|
|
color: $color-danger
|
|
|
|
&.featured
|
|
a
|
|
color: $color-warning
|
|
border-color: $color-warning
|
|
|
|
&:hover
|
|
background-color: rgba($color-warning, .1)
|
|
|
|
&.disabled
|
|
cursor: not-allowed
|
|
border-bottom: thin solid $color-text-dark-hint
|
|
|
|
a
|
|
pointer-events: none
|
|
background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
|
|
border-color: darken($color-text-dark-hint, 5%)
|
|
opacity: .6
|
|
color: $color-text-dark
|
|
|
|
&.button-dropdown.disabled
|
|
border-bottom: none
|
|
|
|
a
|
|
margin: 5px
|
|
padding: 5px 15px
|
|
color: $color-text-dark-primary
|
|
border-radius: 3px
|
|
border: thin solid $color-text-dark-primary
|
|
text-align: center
|
|
text-transform: uppercase
|
|
transition: background-color 150ms ease-in-out
|
|
background-color: $color-background-light
|
|
|
|
i
|
|
margin-right: 5px
|
|
|
|
&:hover
|
|
background-color: $color-background-active-dark
|
|
border-color: darken($color-background-active-dark, 5%)
|
|
color: $color-text-light
|
|
text-decoration: none
|
|
|
|
&:focus, &:active
|
|
text-decoration: none
|
|
outline: none
|
|
|
|
|
|
&#item_save,
|
|
&#item_cancel
|
|
i
|
|
font-size: 1em
|
|
|
|
&#item_add,
|
|
&#item_edit,
|
|
&#item_move,
|
|
&#item_featured
|
|
li
|
|
i
|
|
margin-right: 10px
|
|
|
|
&#item_delete
|
|
li i
|
|
margin-right: 0
|
|
// &:not(:last-of-type)
|
|
// border-right: thin solid darken($color-background, 50%)
|
|
|
|
/* ul.project-edit-tools */
|
|
|
|
/* Extra asset tools in dropdown */
|
|
ul.dropdown-menu
|
|
width: auto
|
|
min-width: 180px
|
|
padding: 0
|
|
margin: 0
|
|
top: 44px
|
|
left: initial
|
|
right: 10px
|
|
bottom: initial
|
|
border: thin solid $color-text-dark-hint
|
|
border-bottom-left-radius: 3px
|
|
border-bottom-right-radius: 3px
|
|
border-top-left-radius: 0
|
|
border-top-right-radius: 0
|
|
background-color: white
|
|
color: $color-text-dark-primary
|
|
box-shadow: 1px 1px 25px rgba(black, .2)
|
|
|
|
li
|
|
padding: 0
|
|
clear: both
|
|
display: flex
|
|
align-items: center
|
|
width: 100%
|
|
|
|
a
|
|
margin: 0
|
|
padding: 10px 15px
|
|
width: 100%
|
|
border: 0
|
|
font-size: .9em
|
|
width: 100%
|
|
text-align: left
|
|
|
|
&:hover
|
|
color: $color-primary
|
|
background-color: transparent
|
|
&:active, &:focus
|
|
color: $color-primary
|
|
background-color: transparent
|
|
|
|
i
|
|
display: inline-block
|
|
margin: 0 15px 0 0
|
|
|
|
&.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 */
|
|
|
|
&.open
|
|
button
|
|
box-shadow: none
|
|
|
|
/* // Edit Asset buttons */
|
|
|
|
#project-loading
|
|
color: $color-text-light-primary
|
|
margin-left: auto
|
|
display: inline-block
|
|
background-color: transparent
|
|
opacity: 0
|
|
transition: opacity 150ms ease-in-out
|
|
+position-center-translate
|
|
|
|
i
|
|
position: relative
|
|
top: 2px
|
|
|
|
&.active
|
|
background-color: rgba($color-background-nav-dark, .7)
|
|
opacity: 1
|
|
|
|
i
|
|
+spin
|
|
animation-duration: .5s
|
|
|
|
#project-header+#project_tree,
|
|
#project-header+#project_context-container
|
|
margin-top: $project_header-height
|
|
|
|
|
|
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
|
|
font:
|
|
weight: 400
|
|
family: $font-body
|
|
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
|
|
flex: 1
|
|
color: $color-text-dark
|
|
background-color: white
|
|
|
|
/* 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
|
|
background-color: $color-background-nav
|
|
|
|
iframe#server_error
|
|
width: 100%
|
|
min-height: 800px
|
|
border: none
|
|
|
|
|
|
/* The actual navigation tree container */
|
|
#project_tree
|
|
+media-xs
|
|
margin-top: 0
|
|
|
|
background-color: $project-sidebar-background
|
|
border-right: thin solid $color-background
|
|
margin-top: $project_header-height
|
|
overflow-y: auto
|
|
padding: 0 0 5px 0// some padding on top/bottom of jstree
|
|
position: relative
|
|
|
|
&.edit
|
|
margin-top: 0
|
|
|
|
|
|
/* Node Context */
|
|
=project-node-title
|
|
font:
|
|
family: $font-body
|
|
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
|
|
|
|
|
|
section.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
|
|
|
|
&:nth-child(even), &:last-child
|
|
border-right: none
|
|
|
|
&:last-child
|
|
border-bottom: none
|
|
|
|
&.texture-info
|
|
padding: 10px 20px
|
|
color: $color-text-dark-secondary
|
|
position: relative
|
|
z-index: 1
|
|
|
|
span
|
|
&:not(:first-child)
|
|
padding-left: 15px
|
|
|
|
i
|
|
position: relative
|
|
top: -1px
|
|
right: 2px
|
|
|
|
|
|
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:
|
|
family: $font-body
|
|
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
|
|
overflow: hidden
|
|
|
|
iframe
|
|
width: 100%
|
|
|
|
min-height: 200px
|
|
flex: 1
|
|
max-height: 500px
|
|
background-color: black
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
cursor: zoom-in
|
|
|
|
+media-md
|
|
max-height: $node-preview-max-height-md
|
|
+media-lg
|
|
max-height: $node-preview-max-height-lg
|
|
|
|
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
|
|
|
|
&.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%
|
|
|
|
|
|
&.image.node-preview-blur
|
|
cursor: default
|
|
min-height: 400px
|
|
position: relative
|
|
|
|
img
|
|
height: 130%
|
|
left: -60px
|
|
max-width: initial
|
|
filter: blur(30px)
|
|
object-fit: cover
|
|
position: absolute
|
|
top: -60px
|
|
width: 130%
|
|
|
|
|
|
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-title-details
|
|
margin-left: auto
|
|
line-height: 1em
|
|
|
|
& .date
|
|
display: inline-block
|
|
margin-right: 10px
|
|
color: $color-text-dark-secondary
|
|
|
|
& .status
|
|
display: inline-block
|
|
font-size: .9em
|
|
text-transform: capitalize
|
|
color: $color-text-dark-primary
|
|
padding: 5px 15px
|
|
border: thin solid $color-text-dark-hint
|
|
border-radius: 3px
|
|
cursor: default
|
|
|
|
.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
|
|
|
|
&.project
|
|
.node-details-title
|
|
padding: 10px 20px 0 20px
|
|
|
|
ul.node-details-meta-list
|
|
display: flex
|
|
align-items: center
|
|
|
|
list-style-type: none
|
|
margin: 0
|
|
padding: 0
|
|
|
|
+media-xs
|
|
font-size: .9em
|
|
width: 100%
|
|
max-width: 100%
|
|
|
|
> li
|
|
margin: 0
|
|
padding: 0
|
|
line-height: 1em
|
|
float: left
|
|
|
|
& a.btn
|
|
padding: 4px 12px 5px 12px
|
|
margin: 0
|
|
|
|
&.date
|
|
color: $color-text-dark-secondary
|
|
padding-left: 5px
|
|
margin-left: 5px
|
|
|
|
&:before
|
|
color: $color-text-dark-secondary
|
|
position: relative
|
|
content: '·'
|
|
left: -10px
|
|
font-weight: 500
|
|
|
|
span /* (updated x mins ago) */
|
|
color: $color-text-dark-hint
|
|
margin-left: 3px
|
|
font-size: .9em
|
|
text-transform: lowercase
|
|
|
|
&.author
|
|
color: $color-text-dark-primary
|
|
|
|
&.status
|
|
margin-right: 10px
|
|
font-size: .9em
|
|
text-transform: capitalize
|
|
color: $color-text-dark-secondary
|
|
font-weight: 300
|
|
padding: 5px 15px
|
|
border: thin solid $color-text-dark-hint
|
|
border-radius: 3px
|
|
cursor: default
|
|
|
|
&.access
|
|
color: $color-text-dark-primary
|
|
cursor: default
|
|
opacity: .5
|
|
white-space: nowrap
|
|
|
|
&:hover
|
|
opacity: 1
|
|
|
|
&.public
|
|
border-color: $color-success
|
|
color: $color-success
|
|
padding: 0
|
|
i
|
|
font-size: 1.2em
|
|
position: relative
|
|
top: 1px
|
|
|
|
span
|
|
display: inline-block
|
|
|
|
&.type
|
|
text-transform: uppercase
|
|
padding: 0 5px 0 15px
|
|
cursor: default
|
|
font-weight: 400
|
|
color: $color-text-dark-hint
|
|
|
|
+media-xs
|
|
display: none
|
|
|
|
/* .blend files are special snowflakes */
|
|
span.blend
|
|
display: inline-block
|
|
padding: 0 35px 0 0
|
|
font-size: 1.2em
|
|
color: $color-text-dark-secondary
|
|
|
|
&.access+li.node-details-meta-list-item.video.download,
|
|
&.access+.tooltip+li.node-details-meta-list-item.video.download
|
|
margin-left: 10px
|
|
|
|
&.length
|
|
padding: 0 5px 0 15px
|
|
cursor: default
|
|
font-weight: 400
|
|
color: $color-text-dark-hint
|
|
white-space: nowrap
|
|
|
|
&.license
|
|
color: $color-text-dark-secondary
|
|
|
|
i
|
|
color: $color-text-dark-primary
|
|
font-size: 1.4em
|
|
position: relative
|
|
bottom: -2px
|
|
left: -5px
|
|
|
|
/* Download button */
|
|
&.download
|
|
align-self: flex-end
|
|
padding: 0 0 0 10px
|
|
|
|
/* Actual button */
|
|
button
|
|
+button($color-primary, 3px)
|
|
position: relative
|
|
|
|
padding:
|
|
left: 20px
|
|
right: 20px
|
|
|
|
font-size: .9em
|
|
|
|
i
|
|
margin-right: 0
|
|
|
|
/* Tweaks for specific icons */
|
|
i.icon-dropdown-menu
|
|
padding-left: 10px
|
|
|
|
&.disabled
|
|
border-color: $color-text-dark-hint
|
|
color: $color-text-dark-hint
|
|
+stripes(rgba($color-text-dark-hint, .1), rgba($color-text-dark-hint, .2), -45deg, 28px)
|
|
|
|
/* Videos have dropdown caret, so paddit 5px less */
|
|
&.video.download
|
|
button
|
|
padding-right: 10px
|
|
|
|
&.file.download
|
|
button
|
|
+button($color-primary, 3px, true)
|
|
padding:
|
|
left: 15px
|
|
right: 15px
|
|
|
|
i
|
|
margin-right: 0
|
|
|
|
&.texture.download
|
|
width: 100%
|
|
|
|
&.open
|
|
button
|
|
box-shadow: none
|
|
|
|
.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
|
|
display: flex
|
|
padding-left: 10px
|
|
margin-left: 10px
|
|
|
|
&:first-child
|
|
margin-left: 0
|
|
padding-left: 0
|
|
|
|
&.status-pending
|
|
color: $color-danger
|
|
|
|
&.public
|
|
color: $color-success
|
|
|
|
&.download
|
|
position: relative
|
|
|
|
button
|
|
+button($color-success, 3px)
|
|
|
|
.dropdown-toggle
|
|
padding-right: 0
|
|
|
|
i.icon-dropdown-menu
|
|
padding-left: 10px
|
|
|
|
/* Download dropdown options */
|
|
ul.dropdown-menu
|
|
width: auto
|
|
min-width: 240px
|
|
padding: 0
|
|
margin: 0
|
|
top: initial
|
|
left: initial
|
|
right: 0
|
|
bottom: 35px
|
|
border: thin solid rgba(darken($color-background, 5%), .3)
|
|
border-top-left-radius: 3px
|
|
border-top-right-radius: 3px
|
|
border-bottom-left-radius: 0
|
|
border-bottom-right-radius: 0
|
|
|
|
li
|
|
padding: 0
|
|
text-align: right
|
|
clear: both
|
|
display: flex
|
|
align-items: center
|
|
|
|
a
|
|
padding: 10px 15px
|
|
width: 100%
|
|
|
|
&:hover
|
|
color: $color-primary
|
|
background-color: transparent
|
|
|
|
span
|
|
&.length
|
|
color: lighten($color-primary, 10%)
|
|
|
|
span
|
|
&.length
|
|
float: left
|
|
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
|
|
|
|
|
|
&.dim
|
|
color: $color-text-dark-secondary
|
|
|
|
&.left-side
|
|
margin-left: auto
|
|
|
|
&.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: $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
|
|
background-color: white
|
|
|
|
&.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:
|
|
family: $font-body
|
|
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
|
|
family: $font-body
|
|
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: $color-danger
|
|
background-color: $color-background-light
|
|
padding: 10px 15px
|
|
border: thin solid lighten($color-danger, 10%)
|
|
border-top: 2px solid $color-danger
|
|
border-bottom-left-radius: 3px
|
|
border-bottom-right-radius: 3px
|
|
label
|
|
color: $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: $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($color-danger, 3px)
|
|
.toggle
|
|
margin: 0 20px
|
|
|
|
.files
|
|
.btn
|
|
&.start
|
|
+button($color-info, 3px)
|
|
&.cancel
|
|
+button($color-warning, 3px)
|
|
&.delete
|
|
+button($color-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
|