CSS: Cleanup and simplification
Mainly to rely more on bootstrap styling
This commit is contained in:
parent
b4acfb89fa
commit
9c2ded79dd
@ -453,12 +453,17 @@ $comments-width-max: 710px
|
|||||||
transition: background-color 150ms ease-in-out, color 150ms ease-in-out
|
transition: background-color 150ms ease-in-out, color 150ms ease-in-out
|
||||||
width: 100px
|
width: 100px
|
||||||
|
|
||||||
|
// The actual button for submitting the comment.
|
||||||
button.comment-action-submit
|
button.comment-action-submit
|
||||||
|
align-items: center
|
||||||
background: transparent
|
background: transparent
|
||||||
border: none
|
border: none
|
||||||
border-top-left-radius: 0
|
border-top-left-radius: 0
|
||||||
border-bottom-left-radius: 0
|
border-bottom-left-radius: 0
|
||||||
color: $color-success
|
color: $color-success
|
||||||
|
cursor: pointer
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
height: 100%
|
height: 100%
|
||||||
position: relative
|
position: relative
|
||||||
@ -466,8 +471,12 @@ $comments-width-max: 710px
|
|||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background: rgba($color-success, .1)
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
background: lighten($color-success, 10%)
|
background: lighten($color-success, 10%)
|
||||||
|
color: $white
|
||||||
|
|
||||||
&.submitting
|
&.submitting
|
||||||
color: $color-info
|
color: $color-info
|
||||||
|
|||||||
@ -132,7 +132,7 @@ $btn-border-radius: $border-radius
|
|||||||
|
|
||||||
$primary: $color-primary
|
$primary: $color-primary
|
||||||
|
|
||||||
$body-bg: $color-background
|
$body-bg: $white
|
||||||
$body-color: $color-text
|
$body-color: $color-text
|
||||||
|
|
||||||
$color-background-nav: #fff
|
$color-background-nav: #fff
|
||||||
|
|||||||
@ -5,9 +5,6 @@ body.organizations
|
|||||||
|
|
||||||
li.result
|
li.result
|
||||||
padding: 10px 20px
|
padding: 10px 20px
|
||||||
li.create
|
|
||||||
margin-left: auto
|
|
||||||
|
|
||||||
|
|
||||||
.dashboard-secondary
|
.dashboard-secondary
|
||||||
.box
|
.box
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
$project-sidebar-background: lighten($color-background, 5%)
|
|
||||||
$node-latest-thumbnail-size: 160px
|
$node-latest-thumbnail-size: 160px
|
||||||
|
|
||||||
body.open-projects,
|
body.open-projects,
|
||||||
@ -68,11 +67,6 @@ body.blog
|
|||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
ul.project-tabs
|
ul.project-tabs
|
||||||
background-color: $color-background-nav
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
list-style: none
|
|
||||||
|
|
||||||
position: fixed
|
position: fixed
|
||||||
width: $project-sidebar-width
|
width: $project-sidebar-width
|
||||||
top: $project_header-height
|
top: $project_header-height
|
||||||
@ -85,16 +79,9 @@ body.blog
|
|||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
li
|
li
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
width: $project-sidebar-width
|
width: $project-sidebar-width
|
||||||
height: $project-sidebar-width
|
height: $project-sidebar-width
|
||||||
position: relative
|
position: relative
|
||||||
color: white
|
|
||||||
background-color: $color-background-nav
|
|
||||||
border-left: 2px solid transparent
|
|
||||||
transition: all 100ms ease-in-out
|
|
||||||
|
|
||||||
+media-xs
|
+media-xs
|
||||||
border-bottom: 2px solid transparent
|
border-bottom: 2px solid transparent
|
||||||
@ -109,77 +96,41 @@ body.blog
|
|||||||
border-top: thin solid transparent
|
border-top: thin solid transparent
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color: $color-background-nav-light
|
background-color: $primary
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
+media-xs
|
a
|
||||||
border-bottom: 2px solid $color-background-nav-light
|
color: $white
|
||||||
+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
|
a
|
||||||
width: $project-sidebar-width
|
|
||||||
height: $project-sidebar-width
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
align-items: center
|
||||||
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
color: $color-text-light-primary
|
height: $project-sidebar-width
|
||||||
|
width: $project-sidebar-width
|
||||||
|
|
||||||
i
|
i
|
||||||
font-size: 1.1em
|
font-size: 1.1em
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
background-color: $color-background-nav-light
|
background-color: $primary
|
||||||
|
color: $white
|
||||||
// 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
|
a
|
||||||
color: white
|
color: $white
|
||||||
|
|
||||||
&.tabs-thumbnail
|
&.tabs-thumbnail
|
||||||
height: $project-sidebar-width
|
|
||||||
border-bottom: 2px solid $color-background-nav-light
|
|
||||||
|
|
||||||
img
|
img
|
||||||
width: $project-sidebar-width
|
|
||||||
height: $project-sidebar-width
|
height: $project-sidebar-width
|
||||||
|
width: $project-sidebar-width
|
||||||
&.image
|
|
||||||
border-left: none
|
|
||||||
|
|
||||||
#project-loading
|
#project-loading
|
||||||
position: absolute
|
|
||||||
width: $project-sidebar-width
|
|
||||||
height: $project-sidebar-width
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
align-items: center
|
||||||
|
display: flex
|
||||||
|
height: $project-sidebar-width
|
||||||
justify-content: center
|
justify-content: center
|
||||||
i
|
width: $project-sidebar-width
|
||||||
position: relative
|
|
||||||
top: -1px
|
|
||||||
font-size: 1em
|
|
||||||
color: white
|
|
||||||
|
|
||||||
#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
|
#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
|
||||||
background-color: $color-background-nav-dark
|
background-color: $color-background-nav-dark
|
||||||
@ -199,7 +150,6 @@ body.blog
|
|||||||
+media-xs
|
+media-xs
|
||||||
width: initial
|
width: initial
|
||||||
|
|
||||||
background-color: $project-sidebar-background
|
|
||||||
display: block
|
display: block
|
||||||
left: 0
|
left: 0
|
||||||
position: relative
|
position: relative
|
||||||
@ -221,10 +171,6 @@ body.blog
|
|||||||
|
|
||||||
#project_context-header
|
#project_context-header
|
||||||
align-items: center
|
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
|
color: $color-text-dark-secondary
|
||||||
display: flex
|
display: flex
|
||||||
height: $project_header-height
|
height: $project_header-height
|
||||||
@ -232,42 +178,24 @@ body.blog
|
|||||||
position: fixed
|
position: fixed
|
||||||
top: $project_header-height
|
top: $project_header-height
|
||||||
transition: box-shadow 250ms ease-in-out
|
transition: box-shadow 250ms ease-in-out
|
||||||
width: auto
|
|
||||||
z-index: $z-index-base + 3
|
z-index: $z-index-base + 3
|
||||||
|
|
||||||
&.is-offset
|
&.is-offset
|
||||||
box-shadow: 0 0 25px rgba(black, .2)
|
box-shadow: 0 0 25px rgba(black, .2)
|
||||||
|
|
||||||
#project_nav-header
|
#project_nav-header
|
||||||
z-index: $z-index-base + 3
|
left: 0
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 0
|
top: 0
|
||||||
left: 0
|
|
||||||
height: $project_header-height
|
|
||||||
min-height: $project_header-height
|
|
||||||
width: 100%
|
width: 100%
|
||||||
background-color: $color-background-light
|
z-index: $z-index-base + 3
|
||||||
border-bottom: thin solid $color-background-dark
|
|
||||||
|
|
||||||
/* Name of the project */
|
/* Name of the project */
|
||||||
.project-title
|
.project-title
|
||||||
width: 100%
|
+text-overflow-ellipsis
|
||||||
max-width: 100%
|
|
||||||
height: 100%
|
height: 100%
|
||||||
transition: background-color 150ms ease-in-out
|
max-width: 100%
|
||||||
|
width: 100%
|
||||||
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
|
span#status-bar
|
||||||
position: absolute
|
position: absolute
|
||||||
@ -278,7 +206,6 @@ span#status-bar
|
|||||||
color: $color-text-dark
|
color: $color-text-dark
|
||||||
opacity: 0
|
opacity: 0
|
||||||
z-index: 1
|
z-index: 1
|
||||||
background-color: $color-background-light
|
|
||||||
font-weight: 400
|
font-weight: 400
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
transition: all 250ms ease-in-out
|
transition: all 250ms ease-in-out
|
||||||
@ -293,7 +220,7 @@ span#status-bar
|
|||||||
&.info
|
&.info
|
||||||
color: $color-info
|
color: $color-info
|
||||||
&.error
|
&.error
|
||||||
color: $color-danger
|
color: $danger
|
||||||
&.warning
|
&.warning
|
||||||
color: $color-warning
|
color: $color-warning
|
||||||
&.success
|
&.success
|
||||||
@ -320,71 +247,29 @@ span#project-edit-title
|
|||||||
display: none
|
display: none
|
||||||
|
|
||||||
ul.project-edit-tools
|
ul.project-edit-tools
|
||||||
display: flex
|
|
||||||
align-items: center
|
align-items: center
|
||||||
height: 100%
|
display: flex
|
||||||
padding: 0
|
|
||||||
margin:
|
|
||||||
top: 0
|
|
||||||
left: auto
|
|
||||||
right: 5px
|
|
||||||
bottom: 0
|
|
||||||
color: $color-text-dark-hint
|
|
||||||
|
|
||||||
list-style-type: none
|
list-style-type: none
|
||||||
font-size: .9em
|
margin: 0 0 0 auto
|
||||||
|
padding: 0
|
||||||
|
|
||||||
+media-xs
|
+media-xs
|
||||||
width: 100%
|
width: 100%
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
justify-content: space-around
|
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
|
li
|
||||||
margin: 0
|
a, button
|
||||||
padding: 0
|
padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2)
|
||||||
position: relative
|
|
||||||
float: left
|
|
||||||
user-select: none
|
|
||||||
|
|
||||||
a
|
i
|
||||||
min-width: 110px
|
padding-right: 10px
|
||||||
user-select: none
|
|
||||||
|
|
||||||
&:focus, &:active
|
|
||||||
text-decoration: none
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
&.button-save
|
&.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
|
&.field-error
|
||||||
a
|
a
|
||||||
background-color: $color-danger
|
background-color: $danger
|
||||||
border-color: $color-danger
|
border-color: $danger
|
||||||
color: white
|
color: white
|
||||||
|
|
||||||
&.saving
|
&.saving
|
||||||
@ -411,31 +296,6 @@ ul.project-edit-tools
|
|||||||
&.button-edit
|
&.button-edit
|
||||||
min-width: 80px
|
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
|
&.featured
|
||||||
a
|
a
|
||||||
color: $color-warning
|
color: $color-warning
|
||||||
@ -445,132 +305,44 @@ ul.project-edit-tools
|
|||||||
background-color: rgba($color-warning, .1)
|
background-color: rgba($color-warning, .1)
|
||||||
|
|
||||||
&.disabled
|
&.disabled
|
||||||
cursor: not-allowed
|
+disabled-stripes
|
||||||
border-bottom: thin solid $color-text-dark-hint
|
|
||||||
|
|
||||||
a
|
a
|
||||||
pointer-events: none
|
+disabled-stripes
|
||||||
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
|
&.dropdown
|
||||||
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
|
li
|
||||||
i
|
padding: 0
|
||||||
margin-right: 10px
|
|
||||||
|
|
||||||
&#item_delete
|
a
|
||||||
li i
|
color: $body-color
|
||||||
margin-right: 0
|
display: block
|
||||||
// &:not(:last-of-type)
|
padding: $dropdown-item-padding-y $dropdown-item-padding-x
|
||||||
// border-right: thin solid darken($color-background, 50%)
|
padding-left: 15px
|
||||||
|
user-select: none
|
||||||
|
|
||||||
/* ul.project-edit-tools */
|
&:hover
|
||||||
|
color: $primary
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
/* Extra asset tools in dropdown */
|
/* Icons per asset type. */
|
||||||
ul.dropdown-menu
|
i
|
||||||
width: auto
|
&.icon-group:after
|
||||||
min-width: 180px
|
content: '\e80d'
|
||||||
padding: 0
|
&.icon-group_texture:after,
|
||||||
margin: 0
|
&.icon-group_hdri:after
|
||||||
top: 44px
|
content: '\e80b'
|
||||||
left: initial
|
font-size: 1.1em
|
||||||
right: 10px
|
&.icon-asset:after
|
||||||
bottom: initial
|
content: '\e825'
|
||||||
border: thin solid $color-text-dark-hint
|
&.icon-page:after
|
||||||
border-bottom-left-radius: 3px
|
content: '\e824'
|
||||||
border-bottom-right-radius: 3px
|
&.icon-texture:after
|
||||||
border-top-left-radius: 0
|
content: '\e80a'
|
||||||
border-top-right-radius: 0
|
&.icon-hdri:after
|
||||||
background-color: white
|
content: '\f019'
|
||||||
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 */
|
/* // Extra asset tools in dropdown */
|
||||||
|
|
||||||
&.open
|
|
||||||
button
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
/* // Edit Asset buttons */
|
/* // Edit Asset buttons */
|
||||||
|
|
||||||
#project-loading
|
#project-loading
|
||||||
@ -661,7 +433,6 @@ ul.project_nav-edit-list
|
|||||||
|
|
||||||
#node-container
|
#node-container
|
||||||
flex: 1
|
flex: 1
|
||||||
color: $color-text-dark
|
|
||||||
background-color: white
|
background-color: white
|
||||||
|
|
||||||
/* For error messages (403) and other overlaid text*/
|
/* For error messages (403) and other overlaid text*/
|
||||||
@ -684,8 +455,6 @@ ul.project_nav-edit-list
|
|||||||
/* Project context on the right of the navigation */
|
/* Project context on the right of the navigation */
|
||||||
/* Contains #project_context */
|
/* Contains #project_context */
|
||||||
#project_context-container
|
#project_context-container
|
||||||
background-color: $color-background-nav
|
|
||||||
|
|
||||||
iframe#server_error
|
iframe#server_error
|
||||||
width: 100%
|
width: 100%
|
||||||
min-height: 800px
|
min-height: 800px
|
||||||
@ -697,11 +466,10 @@ ul.project_nav-edit-list
|
|||||||
+media-xs
|
+media-xs
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
|
|
||||||
background-color: $project-sidebar-background
|
|
||||||
border-right: thin solid $color-background
|
border-right: thin solid $color-background
|
||||||
margin-top: $project_header-height
|
margin-top: $project_header-height //so it's right below the project title.
|
||||||
overflow-y: auto
|
overflow-y: auto // show vertical scrollbars when needed.
|
||||||
padding: 0 0 5px 0// some padding on top/bottom of jstree
|
padding: 0 0 5px 0 // some padding on top/bottom of jstree.
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
&.edit
|
&.edit
|
||||||
@ -820,7 +588,7 @@ $node-preview-max-height-lg: 700px
|
|||||||
margin-left: auto
|
margin-left: auto
|
||||||
|
|
||||||
&.pending
|
&.pending
|
||||||
color: $color-danger
|
color: $danger
|
||||||
|
|
||||||
section.node-preview.texture
|
section.node-preview.texture
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
@ -1069,13 +837,6 @@ section.node-preview-forbidden
|
|||||||
span
|
span
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
a
|
|
||||||
color: $color-text-light
|
|
||||||
|
|
||||||
&.btn
|
|
||||||
border-color: white
|
|
||||||
color: white
|
|
||||||
|
|
||||||
hr
|
hr
|
||||||
opacity: .5
|
opacity: .5
|
||||||
|
|
||||||
@ -1122,9 +883,6 @@ section.node-preview.group
|
|||||||
padding: 0
|
padding: 0
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
||||||
&.project
|
|
||||||
.node-details-title
|
|
||||||
padding: 10px 20px 0 20px
|
|
||||||
|
|
||||||
.node-details-description
|
.node-details-description
|
||||||
+node-details-description
|
+node-details-description
|
||||||
@ -1158,7 +916,7 @@ section.node-preview.group
|
|||||||
padding-left: 0
|
padding-left: 0
|
||||||
|
|
||||||
&.status-pending
|
&.status-pending
|
||||||
color: $color-danger
|
color: $danger
|
||||||
|
|
||||||
&.public
|
&.public
|
||||||
color: $color-success
|
color: $color-success
|
||||||
@ -1348,7 +1106,7 @@ section.node-details-container
|
|||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
||||||
.error-node-type-not-found
|
.error-node-type-not-found
|
||||||
color: $color-danger
|
color: $danger
|
||||||
clear: both
|
clear: both
|
||||||
|
|
||||||
a.learn-more
|
a.learn-more
|
||||||
@ -2093,15 +1851,15 @@ section.node-children
|
|||||||
text-transform: capitalize
|
text-transform: capitalize
|
||||||
|
|
||||||
&.error
|
&.error
|
||||||
color: $color-danger
|
color: $danger
|
||||||
background-color: $color-background-light
|
background-color: $color-background-light
|
||||||
padding: 10px 15px
|
padding: 10px 15px
|
||||||
border: thin solid lighten($color-danger, 10%)
|
border: thin solid lighten($danger, 10%)
|
||||||
border-top: 2px solid $color-danger
|
border-top: 2px solid $danger
|
||||||
border-bottom-left-radius: 3px
|
border-bottom-left-radius: 3px
|
||||||
border-bottom-right-radius: 3px
|
border-bottom-right-radius: 3px
|
||||||
label
|
label
|
||||||
color: $color-danger
|
color: $danger
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
|
|
||||||
&.file
|
&.file
|
||||||
@ -2168,7 +1926,7 @@ section.node-children
|
|||||||
outline: none
|
outline: none
|
||||||
|
|
||||||
&.field-error
|
&.field-error
|
||||||
border-color: $color-danger
|
border-color: $danger
|
||||||
|
|
||||||
.md-preview-loading
|
.md-preview-loading
|
||||||
position: absolute
|
position: absolute
|
||||||
@ -2415,7 +2173,7 @@ section.node-children
|
|||||||
.cancel
|
.cancel
|
||||||
+button($color-warning, 3px)
|
+button($color-warning, 3px)
|
||||||
.delete
|
.delete
|
||||||
+button($color-danger, 3px)
|
+button($danger, 3px)
|
||||||
.toggle
|
.toggle
|
||||||
margin: 0 20px
|
margin: 0 20px
|
||||||
|
|
||||||
@ -2426,7 +2184,7 @@ section.node-children
|
|||||||
&.cancel
|
&.cancel
|
||||||
+button($color-warning, 3px)
|
+button($color-warning, 3px)
|
||||||
&.delete
|
&.delete
|
||||||
+button($color-danger, 3px)
|
+button($danger, 3px)
|
||||||
|
|
||||||
&.create
|
&.create
|
||||||
+button($color-success, 3px)
|
+button($color-success, 3px)
|
||||||
|
|||||||
@ -68,13 +68,6 @@
|
|||||||
background-color: lighten($provider-color-google, 7%)
|
background-color: lighten($provider-color-google, 7%)
|
||||||
|
|
||||||
#settings
|
#settings
|
||||||
+media-xs
|
|
||||||
flex-direction: column
|
|
||||||
|
|
||||||
align-items: stretch
|
|
||||||
display: flex
|
|
||||||
margin: 25px auto
|
|
||||||
|
|
||||||
#settings-sidebar
|
#settings-sidebar
|
||||||
+media-xs
|
+media-xs
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|||||||
@ -82,6 +82,15 @@
|
|||||||
text-shadow: none
|
text-shadow: none
|
||||||
|
|
||||||
|
|
||||||
|
=disabled-stripes
|
||||||
|
color: $color-text-dark
|
||||||
|
cursor: not-allowed
|
||||||
|
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%)
|
||||||
|
pointer-events: none
|
||||||
|
opacity: .6
|
||||||
|
|
||||||
|
|
||||||
@mixin overlay($from-color, $from-percentage, $to-color, $to-percentage)
|
@mixin overlay($from-color, $from-percentage, $to-color, $to-percentage)
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 0
|
top: 0
|
||||||
@ -121,23 +130,17 @@
|
|||||||
transform: translate(-50%, -50%)
|
transform: translate(-50%, -50%)
|
||||||
|
|
||||||
=input-generic
|
=input-generic
|
||||||
padding: 5px 5px 5px 0
|
// padding: 5px 5px 5px 0
|
||||||
color: $color-text-dark
|
color: $color-text-dark
|
||||||
box-shadow: none
|
|
||||||
border: thin solid transparent
|
|
||||||
border-radius: 0
|
|
||||||
border-bottom-color: $color-background-dark
|
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border-bottom-color: $color-background
|
border-bottom-color: $color-background
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
outline: 0
|
outline: 0
|
||||||
border: thin solid transparent
|
border-color: $primary
|
||||||
border-bottom-color: $color-primary
|
box-shadow: none
|
||||||
box-shadow: 0 1px 0 0 $color-primary
|
|
||||||
|
|
||||||
=label-generic
|
=label-generic
|
||||||
color: $color-text-dark-primary
|
color: $color-text-dark-primary
|
||||||
|
|||||||
@ -94,9 +94,6 @@
|
|||||||
+media-xs
|
+media-xs
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
padding-top: 0
|
padding-top: 0
|
||||||
display: flex
|
|
||||||
padding:
|
|
||||||
bottom: 15px
|
|
||||||
|
|
||||||
video
|
video
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
@ -278,14 +275,7 @@
|
|||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
.blog_index-item
|
.blog_index-item
|
||||||
+media-lg
|
max-width: 780px
|
||||||
max-width: 780px
|
|
||||||
+media-md
|
|
||||||
max-width: 780px
|
|
||||||
+media-sm
|
|
||||||
max-width: 780px
|
|
||||||
|
|
||||||
margin: 15px auto
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
.item-info a
|
.item-info a
|
||||||
@ -317,13 +307,6 @@
|
|||||||
+media-lg
|
+media-lg
|
||||||
min-height: 250px
|
min-height: 250px
|
||||||
|
|
||||||
.item-title
|
|
||||||
color: $color-text-dark
|
|
||||||
display: block
|
|
||||||
font-size: 1.8em
|
|
||||||
|
|
||||||
padding: 10px 25px 10px
|
|
||||||
|
|
||||||
ul.meta
|
ul.meta
|
||||||
+list-meta
|
+list-meta
|
||||||
font-size: .9em
|
font-size: .9em
|
||||||
@ -585,7 +568,7 @@
|
|||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
padding: 15px 0
|
padding: 15px 0
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
border-bottom: thin solid $color-background
|
border-bottom: thin solid $color-background-dark
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
border-bottom: none
|
border-bottom: none
|
||||||
@ -616,7 +599,7 @@
|
|||||||
position: absolute
|
position: absolute
|
||||||
top: 20px
|
top: 20px
|
||||||
border-radius: 3px
|
border-radius: 3px
|
||||||
background-color: $color-background
|
background-color: $color-background-dark
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
||||||
img
|
img
|
||||||
|
|||||||
@ -22,12 +22,8 @@ body
|
|||||||
&.box
|
&.box
|
||||||
+container-box
|
+container-box
|
||||||
|
|
||||||
.container-page
|
|
||||||
background-color: white
|
|
||||||
|
|
||||||
.page-content
|
.page-content
|
||||||
position: relative
|
background-color: $white
|
||||||
flex: 1
|
|
||||||
|
|
||||||
.container-box
|
.container-box
|
||||||
+container-box
|
+container-box
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
// Global, we want all menus to look like this.
|
// Global, we want all menus to look like this.
|
||||||
.dropdown-menu
|
.dropdown-menu
|
||||||
box-shadow: $dropdown-box-shadow
|
box-shadow: $dropdown-box-shadow
|
||||||
|
top: 95% // So there is less gap between the dropdown and the item.
|
||||||
|
|
||||||
> li
|
> li
|
||||||
> a
|
> a
|
||||||
|
|||||||
@ -1,15 +1,24 @@
|
|||||||
/* FOOTER */
|
/* FOOTER */
|
||||||
#footer-container
|
.footer-wrapper
|
||||||
|
background-color: $color-background
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
.row
|
&:after
|
||||||
+media-xs
|
background-color: $color-background
|
||||||
margin: 0
|
bottom: 0
|
||||||
|
content: ''
|
||||||
|
position: fixed
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
top: 0
|
||||||
|
pointer-events: none
|
||||||
|
z-index: -1
|
||||||
|
|
||||||
/* Footer Navigation */
|
/* Footer Navigation */
|
||||||
footer
|
footer
|
||||||
font-size: .75em
|
font-size: .75em
|
||||||
padding: 0 0 10px 0
|
padding: 0 0 10px 0
|
||||||
|
|
||||||
a
|
a
|
||||||
color: $color-text-dark-primary
|
color: $color-text-dark-primary
|
||||||
|
|
||||||
@ -58,7 +67,7 @@ footer
|
|||||||
transform: scale(1)
|
transform: scale(1)
|
||||||
|
|
||||||
|
|
||||||
#footer-navigation
|
.footer-navigation
|
||||||
font-size: .85em
|
font-size: .85em
|
||||||
margin-bottom: 5px
|
margin-bottom: 5px
|
||||||
color: lighten($color-text, 30%)
|
color: lighten($color-text, 30%)
|
||||||
|
|||||||
@ -24,23 +24,7 @@ textarea
|
|||||||
resize: vertical
|
resize: vertical
|
||||||
|
|
||||||
button, .btn
|
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)
|
|
||||||
|
|
||||||
|
|
||||||
&.disabled
|
&.disabled
|
||||||
+button($color-background-dark, $color-background, false)
|
|
||||||
background-color: $color-background-light !important
|
|
||||||
border-color: $color-background-dark !important
|
|
||||||
color: $color-text !important
|
|
||||||
opacity: .5 !important
|
opacity: .5 !important
|
||||||
pointer-events: none !important
|
pointer-events: none !important
|
||||||
text-shadow: none !important
|
text-shadow: none !important
|
||||||
|
|||||||
@ -1,43 +1,8 @@
|
|||||||
// Navigation.
|
// Navigation.
|
||||||
.navbar-overlay
|
|
||||||
+media-lg
|
|
||||||
display: block
|
|
||||||
bottom: 0
|
|
||||||
display: none
|
|
||||||
left: 0
|
|
||||||
height: 100%
|
|
||||||
position: absolute
|
|
||||||
right: 0
|
|
||||||
top: 0
|
|
||||||
transition: background-color 350ms ease-in-out
|
|
||||||
width: 100%
|
|
||||||
z-index: 0
|
|
||||||
|
|
||||||
&.is-active
|
|
||||||
background-color: $color-background-nav
|
|
||||||
text-shadow: none
|
|
||||||
|
|
||||||
.navbar-brand
|
|
||||||
padding-left: 10px
|
|
||||||
color: $color-text
|
|
||||||
width: 120px // Blender Cloud logo width
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color: $color-text-dark-primary
|
|
||||||
|
|
||||||
|
|
||||||
nav.navbar
|
|
||||||
.navbar-collapse
|
|
||||||
> ul > li > .navbar-item
|
|
||||||
padding: $navbar-nav-link-padding-x
|
|
||||||
height: $nav-link-height
|
|
||||||
|
|
||||||
.navbar,
|
.navbar,
|
||||||
nav.sidebar
|
nav.sidebar
|
||||||
align-items: center
|
|
||||||
background-color: $color-background-nav
|
|
||||||
border: none
|
border: none
|
||||||
display: flex
|
color: $color-text-dark-secondary
|
||||||
padding: 0
|
padding: 0
|
||||||
z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
|
z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
|
||||||
|
|
||||||
@ -53,30 +18,26 @@ nav.sidebar
|
|||||||
|
|
||||||
.navbar-item
|
.navbar-item
|
||||||
align-items: center
|
align-items: center
|
||||||
color: $color-text
|
|
||||||
display: flex
|
display: flex
|
||||||
user-select: none
|
user-select: none
|
||||||
transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out
|
color: inherit
|
||||||
|
|
||||||
+media-sm
|
+media-sm
|
||||||
padding-left: 10px
|
padding-left: 10px
|
||||||
padding-right: 10px
|
padding-right: 10px
|
||||||
|
|
||||||
&:hover, &:focus
|
&:hover, &:focus
|
||||||
color: $color-primary
|
color: $primary
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
box-shadow: inset 0 -3px 0 $color-primary
|
box-shadow: inset 0 -3px 0 $primary
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
box-shadow: inset 0 -3px 0 $color-primary
|
box-shadow: inset 0 -3px 0 $primary
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
color: $color-primary
|
color: $primary
|
||||||
box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%)
|
box-shadow: inset 0 -3px 0 $primary
|
||||||
|
|
||||||
&:hover
|
|
||||||
box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%)
|
|
||||||
|
|
||||||
.pi-angle-down
|
.pi-angle-down
|
||||||
position: relative
|
position: relative
|
||||||
@ -86,11 +47,6 @@ nav.sidebar
|
|||||||
user-select: none
|
user-select: none
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
&.nav-item-sign-in
|
|
||||||
i
|
|
||||||
padding-right: 6px
|
|
||||||
font-size: 1.1em
|
|
||||||
|
|
||||||
img.gravatar
|
img.gravatar
|
||||||
border-radius: 999em
|
border-radius: 999em
|
||||||
height: 32px
|
height: 32px
|
||||||
@ -130,11 +86,6 @@ nav.sidebar
|
|||||||
.dropdown
|
.dropdown
|
||||||
min-width: 60px // navbar avatar size
|
min-width: 60px // navbar avatar size
|
||||||
|
|
||||||
// Removes angle-down icon from bootstrap,
|
|
||||||
// since we use a nicer chevron.
|
|
||||||
a:after
|
|
||||||
display: none
|
|
||||||
|
|
||||||
span.fa-stack
|
span.fa-stack
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 50%
|
top: 50%
|
||||||
@ -176,9 +127,51 @@ nav.sidebar
|
|||||||
font-size: .9em
|
font-size: .9em
|
||||||
|
|
||||||
|
|
||||||
nav.sidebar
|
// Secondary navigation for
|
||||||
ul li.nav-item-sign-in a.navbar-item
|
.nav-secondary
|
||||||
font-size: .8em
|
align-items: center
|
||||||
|
box-shadow: 0 2px 0 0 $color-background
|
||||||
|
|
||||||
|
.nav-link
|
||||||
|
color: $color-text
|
||||||
|
transition: box-shadow 150ms ease-in-out
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.active
|
||||||
|
box-shadow: 0 2px 0 0 $primary
|
||||||
|
|
||||||
|
|
||||||
|
.navbar-overlay
|
||||||
|
+media-lg
|
||||||
|
display: block
|
||||||
|
bottom: 0
|
||||||
|
display: none
|
||||||
|
left: 0
|
||||||
|
height: 100%
|
||||||
|
position: absolute
|
||||||
|
right: 0
|
||||||
|
top: 0
|
||||||
|
transition: background-color 350ms ease-in-out
|
||||||
|
width: 100%
|
||||||
|
z-index: 0
|
||||||
|
|
||||||
|
&.is-active
|
||||||
|
background-color: $color-background-nav
|
||||||
|
text-shadow: none
|
||||||
|
|
||||||
|
.navbar-brand
|
||||||
|
padding-left: 10px
|
||||||
|
color: inherit
|
||||||
|
width: 120px // Blender Cloud logo width
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: $primary
|
||||||
|
|
||||||
|
nav.navbar
|
||||||
|
.navbar-collapse
|
||||||
|
> ul > li > .navbar-item
|
||||||
|
padding: $navbar-nav-link-padding-x
|
||||||
|
height: $nav-link-height
|
||||||
|
|
||||||
|
|
||||||
.navbar-backdrop-container
|
.navbar-backdrop-container
|
||||||
@ -206,20 +199,3 @@ nav.sidebar
|
|||||||
|
|
||||||
.navbar+.page-content
|
.navbar+.page-content
|
||||||
padding-top: $nav-link-height
|
padding-top: $nav-link-height
|
||||||
|
|
||||||
// Secondary navigation for
|
|
||||||
.nav-secondary
|
|
||||||
align-items: center
|
|
||||||
box-shadow: 0 2px 0 0 $color-background
|
|
||||||
|
|
||||||
.nav-link
|
|
||||||
color: $color-text
|
|
||||||
transition: box-shadow 150ms ease-in-out
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.active
|
|
||||||
box-shadow: 0 2px 0 0 $color-primary
|
|
||||||
|
|
||||||
.nav-title
|
|
||||||
font-weight: bold
|
|
||||||
padding-right: 20px
|
|
||||||
|
|||||||
@ -35,30 +35,25 @@
|
|||||||
padding: 0
|
padding: 0
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
||||||
|
|
||||||
.search-icon
|
.search-icon
|
||||||
position: absolute
|
position: absolute
|
||||||
color: white
|
|
||||||
top: 4px
|
top: 4px
|
||||||
left: 10px
|
left: 10px
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
&:after
|
&:after
|
||||||
opacity: 0
|
@extend .tooltip-inner
|
||||||
|
|
||||||
content: 'Use advanced search...'
|
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
|
font-size: .85em
|
||||||
border-radius: 3px
|
font-style: normal
|
||||||
top: 30px
|
|
||||||
left: -10px
|
left: -10px
|
||||||
width: 150px
|
opacity: 0
|
||||||
position: absolute
|
|
||||||
transition: top 150ms ease-in-out, opacity 150ms ease-in-out
|
|
||||||
pointer-events: none
|
pointer-events: none
|
||||||
|
position: absolute
|
||||||
|
top: 30px
|
||||||
|
transition: top 150ms ease-in-out, opacity 150ms ease-in-out
|
||||||
|
width: 150px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
&:after
|
&:after
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
/* jsTree overrides */
|
/* jsTree overrides */
|
||||||
|
|
||||||
$tree-color-text: $color-text-dark-primary
|
$tree-color-text: $color-text-dark-primary
|
||||||
$tree-color-highlight: hsl(hue($color-background-active), 40%, 50%)
|
$tree-color-highlight: $color-primary-accent
|
||||||
$tree-color-highlight-background: hsl(hue($color-background-active), 40%, 50%)
|
$tree-color-highlight-background: $color-primary-accent
|
||||||
$tree-color-highlight-background-text: white
|
$tree-color-highlight-background-text: $white
|
||||||
|
|
||||||
.jstree-default
|
.jstree-default
|
||||||
/* list item */
|
/* list item */
|
||||||
@ -104,8 +103,7 @@ $tree-color-highlight-background-text: white
|
|||||||
padding-left: 28px
|
padding-left: 28px
|
||||||
padding-right: 10px
|
padding-right: 10px
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
transition: none
|
transition: background-color 100ms ease-in-out
|
||||||
transition: color 50ms ease-in-out, background-color 100ms ease-in-out
|
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
|
|||||||
@ -7,8 +7,7 @@ $color-theatre-background-dark: darken($color-theatre-background, 5%)
|
|||||||
|
|
||||||
$theatre-width: 350px
|
$theatre-width: 350px
|
||||||
|
|
||||||
body.theatre,
|
body.theatre
|
||||||
body.theatre .container-page
|
|
||||||
background-color: $color-theatre-background
|
background-color: $color-theatre-background
|
||||||
nav.navbar
|
nav.navbar
|
||||||
+media-lg
|
+media-lg
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user