CSS: Cleanup and simplification
Mainly to rely more on bootstrap styling
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
$project-sidebar-background: lighten($color-background, 5%)
|
||||
$node-latest-thumbnail-size: 160px
|
||||
|
||||
body.open-projects,
|
||||
@@ -68,11 +67,6 @@ body.blog
|
||||
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
|
||||
@@ -85,16 +79,9 @@ body.blog
|
||||
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
|
||||
@@ -109,77 +96,41 @@ body.blog
|
||||
border-top: thin solid transparent
|
||||
|
||||
&:hover
|
||||
background-color: $color-background-nav-light
|
||||
background-color: $primary
|
||||
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
|
||||
color: $white
|
||||
|
||||
a
|
||||
width: $project-sidebar-width
|
||||
height: $project-sidebar-width
|
||||
display: flex
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
color: $color-text-light-primary
|
||||
height: $project-sidebar-width
|
||||
width: $project-sidebar-width
|
||||
|
||||
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%)
|
||||
background-color: $primary
|
||||
color: $white
|
||||
|
||||
a
|
||||
color: white
|
||||
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
|
||||
width: $project-sidebar-width
|
||||
|
||||
#project-loading
|
||||
position: absolute
|
||||
width: $project-sidebar-width
|
||||
height: $project-sidebar-width
|
||||
display: flex
|
||||
align-items: center
|
||||
display: flex
|
||||
height: $project-sidebar-width
|
||||
justify-content: center
|
||||
i
|
||||
position: relative
|
||||
top: -1px
|
||||
font-size: 1em
|
||||
color: white
|
||||
width: $project-sidebar-width
|
||||
|
||||
|
||||
#search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
|
||||
background-color: $color-background-nav-dark
|
||||
@@ -199,7 +150,6 @@ body.blog
|
||||
+media-xs
|
||||
width: initial
|
||||
|
||||
background-color: $project-sidebar-background
|
||||
display: block
|
||||
left: 0
|
||||
position: relative
|
||||
@@ -221,10 +171,6 @@ body.blog
|
||||
|
||||
#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
|
||||
@@ -232,42 +178,24 @@ body.blog
|
||||
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
|
||||
left: 0
|
||||
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
|
||||
z-index: $z-index-base + 3
|
||||
|
||||
/* Name of the project */
|
||||
.project-title
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
+text-overflow-ellipsis
|
||||
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
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
|
||||
span#status-bar
|
||||
position: absolute
|
||||
@@ -278,7 +206,6 @@ span#status-bar
|
||||
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
|
||||
@@ -293,7 +220,7 @@ span#status-bar
|
||||
&.info
|
||||
color: $color-info
|
||||
&.error
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
&.warning
|
||||
color: $color-warning
|
||||
&.success
|
||||
@@ -320,71 +247,29 @@ span#project-edit-title
|
||||
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
|
||||
|
||||
display: flex
|
||||
list-style-type: none
|
||||
font-size: .9em
|
||||
margin: 0 0 0 auto
|
||||
padding: 0
|
||||
|
||||
+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, button
|
||||
padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2)
|
||||
|
||||
a
|
||||
min-width: 110px
|
||||
user-select: none
|
||||
|
||||
&:focus, &:active
|
||||
text-decoration: none
|
||||
outline: none
|
||||
i
|
||||
padding-right: 10px
|
||||
|
||||
&.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
|
||||
background-color: $danger
|
||||
border-color: $danger
|
||||
color: white
|
||||
|
||||
&.saving
|
||||
@@ -411,31 +296,6 @@ ul.project-edit-tools
|
||||
&.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
|
||||
@@ -445,132 +305,44 @@ ul.project-edit-tools
|
||||
background-color: rgba($color-warning, .1)
|
||||
|
||||
&.disabled
|
||||
cursor: not-allowed
|
||||
border-bottom: thin solid $color-text-dark-hint
|
||||
+disabled-stripes
|
||||
|
||||
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
|
||||
+disabled-stripes
|
||||
|
||||
&.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
|
||||
&.dropdown
|
||||
li
|
||||
i
|
||||
margin-right: 10px
|
||||
padding: 0
|
||||
|
||||
&#item_delete
|
||||
li i
|
||||
margin-right: 0
|
||||
// &:not(:last-of-type)
|
||||
// border-right: thin solid darken($color-background, 50%)
|
||||
a
|
||||
color: $body-color
|
||||
display: block
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x
|
||||
padding-left: 15px
|
||||
user-select: none
|
||||
|
||||
/* ul.project-edit-tools */
|
||||
&:hover
|
||||
color: $primary
|
||||
text-decoration: none
|
||||
|
||||
/* 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'
|
||||
/* 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 */
|
||||
|
||||
&.open
|
||||
button
|
||||
box-shadow: none
|
||||
|
||||
/* // Edit Asset buttons */
|
||||
|
||||
#project-loading
|
||||
@@ -661,7 +433,6 @@ ul.project_nav-edit-list
|
||||
|
||||
#node-container
|
||||
flex: 1
|
||||
color: $color-text-dark
|
||||
background-color: white
|
||||
|
||||
/* 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 */
|
||||
/* Contains #project_context */
|
||||
#project_context-container
|
||||
background-color: $color-background-nav
|
||||
|
||||
iframe#server_error
|
||||
width: 100%
|
||||
min-height: 800px
|
||||
@@ -697,11 +466,10 @@ ul.project_nav-edit-list
|
||||
+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
|
||||
margin-top: $project_header-height //so it's right below the project title.
|
||||
overflow-y: auto // show vertical scrollbars when needed.
|
||||
padding: 0 0 5px 0 // some padding on top/bottom of jstree.
|
||||
position: relative
|
||||
|
||||
&.edit
|
||||
@@ -820,7 +588,7 @@ $node-preview-max-height-lg: 700px
|
||||
margin-left: auto
|
||||
|
||||
&.pending
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
|
||||
section.node-preview.texture
|
||||
overflow: hidden
|
||||
@@ -1069,13 +837,6 @@ section.node-preview-forbidden
|
||||
span
|
||||
display: block
|
||||
|
||||
a
|
||||
color: $color-text-light
|
||||
|
||||
&.btn
|
||||
border-color: white
|
||||
color: white
|
||||
|
||||
hr
|
||||
opacity: .5
|
||||
|
||||
@@ -1122,9 +883,6 @@ section.node-preview.group
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
&.project
|
||||
.node-details-title
|
||||
padding: 10px 20px 0 20px
|
||||
|
||||
.node-details-description
|
||||
+node-details-description
|
||||
@@ -1158,7 +916,7 @@ section.node-preview.group
|
||||
padding-left: 0
|
||||
|
||||
&.status-pending
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
|
||||
&.public
|
||||
color: $color-success
|
||||
@@ -1348,7 +1106,7 @@ section.node-details-container
|
||||
opacity: 1
|
||||
|
||||
.error-node-type-not-found
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
clear: both
|
||||
|
||||
a.learn-more
|
||||
@@ -2093,15 +1851,15 @@ section.node-children
|
||||
text-transform: capitalize
|
||||
|
||||
&.error
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
background-color: $color-background-light
|
||||
padding: 10px 15px
|
||||
border: thin solid lighten($color-danger, 10%)
|
||||
border-top: 2px solid $color-danger
|
||||
border: thin solid lighten($danger, 10%)
|
||||
border-top: 2px solid $danger
|
||||
border-bottom-left-radius: 3px
|
||||
border-bottom-right-radius: 3px
|
||||
label
|
||||
color: $color-danger
|
||||
color: $danger
|
||||
font-weight: 500
|
||||
|
||||
&.file
|
||||
@@ -2168,7 +1926,7 @@ section.node-children
|
||||
outline: none
|
||||
|
||||
&.field-error
|
||||
border-color: $color-danger
|
||||
border-color: $danger
|
||||
|
||||
.md-preview-loading
|
||||
position: absolute
|
||||
@@ -2415,7 +2173,7 @@ section.node-children
|
||||
.cancel
|
||||
+button($color-warning, 3px)
|
||||
.delete
|
||||
+button($color-danger, 3px)
|
||||
+button($danger, 3px)
|
||||
.toggle
|
||||
margin: 0 20px
|
||||
|
||||
@@ -2426,7 +2184,7 @@ section.node-children
|
||||
&.cancel
|
||||
+button($color-warning, 3px)
|
||||
&.delete
|
||||
+button($color-danger, 3px)
|
||||
+button($danger, 3px)
|
||||
|
||||
&.create
|
||||
+button($color-success, 3px)
|
||||
|
||||
Reference in New Issue
Block a user