archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Introducing Pillar Framework

Browse Source 
Refactor of pillar-server and pillar-web into a single python package. This
simplifies the overall architecture of pillar applications.

Special thanks @sybren and @venomgfx
This commit is contained in:
Francesco Siddi
2016-08-19 09:19:06 +02:00
parent a5e92e1d87
commit 2c5dc34ea2
232 changed files with 79508 additions and 2232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1078
src/styles/_base.sass Normal file
View File

File diff suppressed because it is too large Load Diff

599
src/styles/_comments.sass Normal file
View File

@@ -0,0 +1,599 @@
$comments-width-max: 710px
#comments-container
margin-top: 15px
padding: 5px 20px 20px 20px
position: relative
border-top: 1px solid $color-background
min-height: 170px
&.texture
border-top: none
#comments-reload
text-align: center
cursor: pointer
padding: 15px 0
display: block
#comments-list-header
#comments-list-title
padding: 15px 0 10px 0
margin: 0
font:
size: 1.5em
weight: 300
family: $font-body
color: $color-text-dark-primary
#comments-list-items-loading
font-size: 2em
color: $color-background
text-align: center
position: relative
top: 25px
margin-bottom: 10px
+spin
#comments-list-items,
.comment-reply-container
position: relative
+media-xs
max-width: 100%
+media-sm
max-width: 100%
+media-md
max-width: $comments-width-max
+media-lg
max-width: $comments-width-max
.nocomments
color: $color-text-dark-hint
text-align: center
cursor: default
padding: 8px 0
#comments-list
/* Each comment on the list*/
.comment-container,
.comment-reply-container
display: flex
flex-direction: column
position: relative
padding: 15px 0 25px 0
transition: background-color 150ms ease-in-out, padding 150ms ease-in-out, margin 150ms ease-in-out
&.comment-linked
background-color: $color-background-light !important
border-top: 3px solid $color-info !important
border-bottom: 2px solid $color-background-dark
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
&:before
content: 'Linked Comment'
position: absolute
right: 20px
color: $color-info
text-transform: uppercase
font-size: .8em
&.is-replying
margin-bottom: 15px !important
.comment-header .comment-avatar
padding-right: 5px
padding-left: 5px
&.comment-linked+.comment-container.is-first
border-top: none
/* Header containing author, time, and badges if any*/
.comment-header
display: flex
align-items: center
.comment-avatar
padding-right: 10px
img
border-radius: 50%
width: 20px
height: 20px
.comment-author
position: relative
color: $color-background-nav
font:
weight: 500
&.own
color: $color-success
&.op
color: $color-primary-dark
.username
padding-left: 5px
color: $color-text-dark-secondary
.comment-time
padding-left: 10px
margin-left: 10px
color: $color-text-dark-hint
&:before
content: '·'
position: relative
left: -10px
font-weight: 600
/* The actual comment body. */
/* Here we style both the preview comment and posted comments */
.comment-content,
.comment-reply-form
+node-details-description
padding: 10px 0 0 10px
color: darken($color-text-dark, 10%)
font:
size: 1em
weight: normal
transition: background-color 200ms ease-in-out, margin 200ms ease-in-out
margin: 0
border: thin solid transparent
+media-xs
padding:
left: 0
top: 15px
p
line-height: 1.5em
+media-xs
padding:
left: 0
right: 0
strong, b
font-weight: 500
color: $color-info
textarea
+node-details-description
background-color: transparent
padding: 0 0 0 5px
margin-left: 15px
width: 100%
color: $color-text-dark-primary
border: none
border-radius: 3px
font:
size: 1em
weight: normal
&:focus
outline: none
border: none
color: $color-text-dark
&.editing
background-color: $color-background-light
margin: 10px 0
border-color: $color-background-dark
border-radius: 3px
&.empty
border-color: $color-danger
.comment-content-preview
display: none
+node-details-description
padding: 10px 0 0 10px
font:
size: 1em
weight: normal
position: relative
margin-top: 15px
&:empty
margin: 0
padding: 0
&:before, &:after
display: none
&:before
content: 'Live Preview'
position: absolute
top: -20px
left: 30px
font-size: .9em
color: $color-text-dark-hint
transition: color 150ms ease-in-out
+media-md
visibility: visible
+media-sm
visibility: hidden
&:after
content: 'Markdown Supported'
position: absolute
top: -20px
right: 20px
font-size: .9em
color: $color-text-dark-hint
transition: color 150ms ease-in-out
/* Rating, and actions such as reply */
.comment-meta
display: flex
align-items: center
padding: 5px 0 0 30px
color: $color-text-dark-secondary
/* Small container for rating buttons and value */
.comment-rating
display: flex
align-items: center
&.rated
color: $color-text-dark-secondary
.down
color: $color-downvote
&.rated.positive
color: $color-upvote
.down
color: $color-text-dark-secondary
.comment-action-rating.up:before
content: '\e83f'
.comment-rating-value
padding-right: 15px
color: $color-text-dark-secondary
cursor: default
.comment-action-rating
font-family: 'pillar-font'
height: 25px
width: 16px
cursor: pointer
.comment-action-rating.up
&:hover
color: $color-upvote
&:before
content: '\e83e'
top: 2px
position: relative
.comment-action-rating.down
&:hover
color: $color-downvote
&:before
content: '\e838'
/* Reply button */
.comment-action-reply,
.comment-action-edit
padding-left: 10px
margin-left: 10px
color: $color-text-dark-secondary
&:before
content: '·'
position: relative
left: -10px
font-weight: 600
span
cursor: pointer
&:hover
color: $color-primary
span.edit_save,
color: $color-success
display: none
&:hover
color: lighten($color-success, 10%)
&.error
color: $color-danger
&.saving
user-select: none
pointer-events: none
cursor: default
i
font-size: .8em
margin-right: 5px
span.edit_cancel
display: none
margin-left: 15px
&.is-reply
padding:
top: 20px
left: 15px
margin-left: 30px
border-left: 3px solid $color-background-dark
+media-xs
padding-left: 15px
&.comment-linked
border-left: 3px solid $color-info
border-top: thin solid $color-background-dark !important
border-bottom: thin solid $color-background-dark !important
&.is-first
border-top: 1px solid lighten($color-text-dark-hint, 15%)
&.is-team
.comment-author
color: $color-success
&.is-replying
border-left: 3px solid $color-primary
padding-left: 10px
// &.is-replying.is-first+.comment-reply-container
&.is-replying+.comment-reply-container
border-left: 3px solid $color-primary
margin-left: 0
padding-left: 30px
.comment-badge
display: inline-block
border: 1px solid $color-text-dark-hint
color: $color-text-dark-hint
padding: 1px 4px
margin: 0 5px 0 10px
border-radius: 3px
font:
size: .7em
weight: 400
text-transform: uppercase
&.badge-team
border-color: $color-info
color: $color-info
&.badge-op
border-color: $color-primary
color: $color-primary
&.badge-own
border-color: $color-success
color: $color-success
.comment-reply-container
// It's flex, like the others, but different direction
flex-direction: row
/* Little gravatar icon on the left */
.comment-reply-avatar
img
border-radius: 50%
width: 25px
height: 25px
/* textarea field, submit button and reply details */
.comment-reply-form
width: 100%
padding:
top: 0
left: 10px
.comment-reply-field
position: relative
textarea
width: 100%
height: 45px
line-height: 1.5em
border: 1px solid $color-background-dark
border-radius: 3px
margin: 0 auto 5px auto
padding: 10px
color: $color-text-dark
resize: none
transition: all 300ms ease-in-out
&:focus
border: 1px solid $color-success
outline: none
&.field-error
border-color: $color-danger
&.sign-in
textarea
margin: 0
.sign-in
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background-color: rgba(white, .5)
display: flex
align-items: center
padding-left: 15px
a
margin-right: 4px
.comment-reply-preview
position: relative
margin: 0 auto 5px auto
padding: 10px
color: $color-text-dark-primary
transition: all 150ms ease-in-out
&:before
content: 'Live Preview'
position: absolute
top: -28px
font-size: .9em
color: $color-text-dark-hint
transition: color 150ms ease-in-out
+media-md
visibility: visible
+media-sm
visibility: hidden
p
padding-left: 0
padding-right: 0
.comment-reply-preview:empty
color: transparent
margin: 0 auto
padding: 0 10px
&:before
content: ''
color: transparent
.comment-reply-meta
display: flex
align-items: center
.comment-details
opacity: 0
font-size: .9em
display: flex
align-items: center
justify-content: flex-end
width: 100%
transition: opacity 300ms ease-in-out
.comment-author
padding:
right: 15px
color: $color-text-dark
font:
weight: 300
.author-name
padding-left: 3px
font:
weight: 500
.comment-rules
padding-right: 8px
margin-right: 8px
&:after
content: "·"
position: relative
right: -8px
a
color: $color-text-dark-hint
&:hover
color: $color-primary
i
font-size: 1.5em
position: relative
top: 2px
button.comment-action-submit
margin-left: auto
min-width: 180px
min-height: 30px
transition: all 200ms ease-in-out
@include button-rounded($color-success, 6px)
position: relative
span.hint
position: absolute
top: 35px
left: 50%
transform: translateX(-50%)
font-size: .7em
text-transform: initial
display: block
color: $color-text-dark-hint
&.submitting
background: linear-gradient(to left, transparent 50%, #7AC29A 50%)
background-size: 200% 100%
color: white
animation:
name: background-fill-left-right
duration: .5s
delay: 0
fill-mode: forwards
iteration-count: 1
timing-function: ease-out
i
+spin
&.button-field-error
@include button-rounded($color-danger, 6px)
background: transparent
pointer-events: none
i
position: relative
right: 2px
button.comment-action-cancel
display: none
margin-left: auto
margin-right: 5px
padding:
left: 15px
right: 15px
@include button-rounded($color-text-dark-secondary, 6px)
border-color: transparent
i
margin-right: 0
&.filled
.comment-reply-field
textarea
height: 120px
.comment-reply-meta
.comment-details
opacity: 1
/* Style the comment container when we're replying */
.comment-container + .comment-reply-container
margin-left: 30px
padding-top: 0
.comment-reply-form
.comment-reply-meta
button.comment-action-cancel
display: inline-block
// @import plugins/_ckeditor

93
src/styles/_config.sass Normal file
View File

@@ -0,0 +1,93 @@
$color-background: #eaebec
$color-background-light: lighten($color-background, 5%)
$color-background-dark: darken($color-background, 5%)
$color-background-nav: hsl(hue($color-background), 20%, 25%)
$color-background-nav-light: hsl(hue($color-background), 20%, 35%)
$color-background-nav-dark: hsl(hue($color-background), 20%, 15%)
$font-body: 'Roboto'
$font-headings: 'Lato'
$font-size: 14px
$color-text: #4d4e53
$color-text-dark: $color-text
$color-text-dark-primary: #646469 // rgba($color-text, .87)
$color-text-dark-secondary: #9E9FA2 // rgba($color-text, .54)
$color-text-dark-hint: #BBBBBD // rgba($color-text, .38)
$color-text-light: white
$color-text-light-primary: rgba($color-text-light, .87)
$color-text-light-secondary: rgba($color-text-light, .54)
$color-text-light-hint: rgba($color-text-light, .38)
$color-primary: #68B3C8
$color-primary-light: hsl(hue($color-primary), 30%, 90%)
$color-primary-dark: hsl(hue($color-primary), 80%, 30%)
$color-primary-accent: hsl(hue($color-primary), 100%, 50%)
$color-secondary: #f42942
$color-secondary-light: hsl(hue($color-secondary), 30%, 90%)
$color-secondary-dark: hsl(hue($color-secondary), 80%, 40%)
$color-secondary-accent: hsl(hue($color-secondary), 100%, 50%)
$color-warning: #F3BB45 !default
$color-info: #68B3C8 !default
$color-success: #27AE60 !default
$color-danger: #EB5E28 !default
$color-open_projects: #7eb66f
$color-training: #71c5d3
/* Borrowed from dillo.space :) */
$color_upvote: #ff8b60
$color_downvote: #74a4ff
/* Label Status */
$color-status-todo: lightgray
$color-status-on_hold: #fff2cc
$color-status-in_progress: #fff2cc
$color-status-review: #e4f5f9
$color-status-final: #e7f5d3
$color-status-active: #E6F3FD
$color-status-updated: #e7f5d3
/* Mobile Stuff */
$screen-xs: 480px !default
$screen-xs-min: $screen-xs
$screen-phone: $screen-xs-min
$screen-sm: 768px !default
$screen-sm-min: $screen-sm
$screen-tablet: $screen-sm-min
$screen-md: 1100px !default // 992px
$screen-md-min: $screen-md
$screen-desktop: $screen-md-min
$screen-lg: 1270px !default // 1200px
$screen-lg-min: $screen-lg
$screen-lg-desktop: $screen-lg-min
$screen-xs-max: $screen-sm-min - 1
$screen-sm-max: $screen-md-min - 1
$screen-md-max: $screen-lg-min - 1
/* Project specifics */
$project_nav-width: 240px
$project-sidebar-width: 50px
$project_header-height: 50px
$project_footer-height: 30px
$list-node-children-item-width: 160px
$list-node-children-item-width_list: 48px
$z-index-base: 13
.container
@media (min-width: $screen-sm-min)
width: 750px
@media (min-width: $screen-md-min)
width: 1100px // 970px
@media (min-width: $screen-lg-min)
width: 1270px // 1170px

113
src/styles/_error.sass Normal file
View File

@@ -0,0 +1,113 @@
body.error
width: 100%
height: 100%
#error_container
display: flex
justify-content: center
align-items: center
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background-color: darken($color-background-nav, 3%)
&.standalone
width: 100%
height: 100%
position: fixed
#error_box
.error-lead
padding: 10px 10px
p
display: block
&.extra
padding-top: 0
#error_box
min-width: 60%
max-width: 500px
text-align: center
display: flex
justify-content: center
align-items: center
flex-direction: column
+container-box
box-shadow: 0 0 15px rgba(black, .2)
padding: 0
background-color: $color-background-nav
.error-top-container
position: relative
width: 100%
background-color: $color-background-nav
background: repeating-linear-gradient(-45deg, lighten($color-background-nav, 2%), lighten($color-background-nav, 2%) 10px, $color-background-nav 10px, $color-background-nav 20px)
.error-title
padding: 25px 0 10px 0
color: white
font:
family: $font-headings
size: 2em
weight: 300
.error-lead
width: 100%
padding: 0 25px 25px 0
line-height: 1.6em
color: $color-text-light-primary
font:
family: $font-body
weight: 300
a
text-decoration: none
&:hover
text-decoration: underline
&.extra
padding: 25px 0
font-size: .9em
color: $color-text-light-secondary
hr
margin: 0 0
width: 100%
border: none
height: 3px
background-color: lighten($color-background-nav, 5%)
.buttons
margin: 0 15px 25px 0
a
font-size: 1.2em
margin: 0 15px
&.sign-up
@include button-rounded-filled($color-primary, 999em)
&.sign-in
@include button-rounded($color-background, 999em)
border-color: transparent
#node-overlay
#error_container
@include overlay(rgba($color-background-nav, .8), 0%, transparent, 60%)
#error_box
top: 50px
position: absolute
left: 50%
transform: translateX(-50%)
border-radius: 3px
box-shadow: 0 0 100px rgba(black, .85)
overflow: hidden

609
src/styles/_font-pillar.sass Normal file
View File

@@ -0,0 +1,609 @@
@font-face
font-family: 'pillar-font'
src: url('../font/pillar-font.woff2?89968090') format('woff2')
src: url('../font/pillar-font.woff?89968090') format('woff')
font-weight: normal
font-style: normal
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it.
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be
/*
*@media screen and (-webkit-min-device-pixel-ratio:0) {
* @font-face {
* font-family: 'pillar-font';
* src: url('../font/pillar-font.svg?89968090#pillar-font') format('svg');
* }
*}
[class^="pi-"]:before, [class*=" pi-"]:before
font-family: "pillar-font"
font-style: normal
font-weight: normal
speak: none
display: inline-block
text-decoration: inherit
width: 1em
margin-right: .2em
text-align: center
/* opacity: .8;
/* For safety - reset parent styles, that can break glyph codes
font-variant: normal
text-transform: none
/* fix buttons height, for twitter bootstrap
line-height: 1em
/* Animation center compensation - margins should be symmetric
/* remove if not needed
margin-left: .2em
/* you can be more comfortable with increased icons size
/* font-size: 120%;
/* Font smoothing. That was taken from TWBS
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
/* Uncomment for 3D effect
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
.pi-collection-plus:before
content: '\e800'
/* ''
.pi-log-in:before
content: '\e801'
/* ''
.pi-log-out:before
content: '\e802'
/* ''
.pi-home:before
content: '\e803'
/* ''
.pi-social-twitter:before
content: '\e804'
/* ''
.pi-folder-create:before
content: '\e805'
/* ''
.pi-social-facebook:before
content: '\e806'
/* ''
.pi-license-cc-by:before
content: '\e807'
/* ''
.pi-license-cc:before
content: '\e808'
/* ''
.pi-blender-cloud:before
content: '\e809'
/* ''
.pi-texture:before
content: '\e80a'
/* ''
.pi-folder-texture:before
content: '\e80b'
/* ''
.pi-markdown:before
content: '\e80c'
/* ''
.pi-folder:before
content: '\e80d'
/* ''
.pi-more-vertical:before
content: '\e80e'
/* ''
.pi-blender-network:before
content: '\e810'
/* ''
.pi-blender-logo:before
content: '\e811'
/* ''
.pi-blender-cloud-logo:before
content: '\e812'
/* ''
.pi-notifications-active:before
content: '\e813'
/* ''
.pi-notifications-off:before
content: '\e814'
/* ''
.pi-notifications-none:before
content: '\e815'
/* ''
.pi-happy:before
content: '\e816'
/* ''
.pi-unhappy:before
content: '\e817'
/* ''
.pi-displeased:before
content: '\e818'
/* ''
.pi-grin:before
content: '\e819'
/* ''
.pi-laugh:before
content: '\e81a'
/* ''
.pi-spin:before
content: '\e81b'
/* ''
.pi-search:before
content: '\e81c'
/* ''
.pi-film-thick:before
content: '\e81d'
/* ''
.pi-image:before
content: '\e81e'
/* ''
.pi-cancel-circle:before
content: '\e81f'
/* ''
.pi-thumbs-up:before
content: '\e820'
/* ''
.pi-thumbs-down:before
content: '\e821'
/* ''
.pi-download-cloud:before
content: '\e822'
/* ''
.pi-edit:before
content: '\e823'
/* ''
.pi-document:before
content: '\e824'
/* ''
.pi-file-archive:before
content: '\e825'
/* ''
.pi-angle-double-left:before
content: '\e826'
/* ''
.pi-angle-double-right:before
content: '\e827'
/* ''
.pi-whoosh:before
content: '\e828'
/* ''
.pi-toggle-off:before
content: '\e829'
/* ''
.pi-toggle-on:before
content: '\e82a'
/* ''
.pi-circle-filled:before
content: '\e82b'
/* ''
.pi-circle-empty:before
content: '\e82c'
/* ''
.pi-circle:before
content: '\e82d'
/* ''
.pi-circle-notch:before
content: '\e82e'
/* ''
.pi-circle-dot:before
content: '\e82f'
/* ''
.pi-email:before
content: '\e830'
/* ''
.pi-layout:before
content: '\e831'
/* ''
.pi-plus:before
content: '\e832'
/* ''
.pi-back:before
content: '\e833'
/* ''
.pi-upload-cloud:before
content: '\e834'
/* ''
.pi-vcard:before
content: '\e835'
/* ''
.pi-rss:before
content: '\e836'
/* ''
.pi-share:before
content: '\e837'
/* ''
.pi-angle-down:before
content: '\e838'
/* ''
.pi-angle-left:before
content: '\e839'
/* ''
.pi-angle-right:before
content: '\e83a'
/* ''
.pi-angle-up:before
content: '\e83b'
/* ''
.pi-list:before
content: '\e83c'
/* ''
.pi-credit-card:before
content: '\e83d'
/* ''
.pi-heart:before
content: '\e83e'
/* ''
.pi-heart-filled:before
content: '\e83f'
/* ''
.pi-star:before
content: '\e840'
/* ''
.pi-star-filled:before
content: '\e841'
/* ''
.pi-resize-full:before
content: '\e842'
/* ''
.pi-resize-normal:before
content: '\e843'
/* ''
.pi-comment:before
content: '\e844'
/* ''
.pi-picture:before
content: '\e845'
/* ''
.pi-picture-album:before
content: '\e846'
/* ''
.pi-filter:before
content: '\e847'
/* ''
.pi-filter-remove:before
content: '\e848'
/* ''
.pi-menu:before
content: '\e849'
/* ''
.pi-check:before
content: '\e84a'
/* ''
.pi-cancel:before
content: '\e84b'
/* ''
.pi-info:before
content: '\e84c'
/* ''
.pi-lock:before
content: '\e84d'
/* ''
.pi-lock-open:before
content: '\e84e'
/* ''
.pi-download:before
content: '\e84f'
/* ''
.pi-attention:before
content: '\e850'
/* ''
.pi-play:before
content: '\e851'
/* ''
.pi-trash:before
content: '\e852'
/* ''
.pi-zoom-in:before
content: '\e853'
/* ''
.pi-zoom-out:before
content: '\e854'
/* ''
.pi-paper-plane:before
content: '\e855'
/* ''
.pi-mic-outline:before
content: '\e856'
/* ''
.pi-license-cc-nc:before
content: '\e857'
/* ''
.pi-license-cc-sa:before
content: '\e858'
/* ''
.pi-license-cc-nd:before
content: '\e859'
/* ''
.pi-license-cc-zero:before
content: '\e85a'
/* ''
.pi-folder-special:before
content: '\e85b'
/* ''
.pi-refresh:before
content: '\e85c'
/* ''
.pi-license-publicdomain:before
content: '\e85d'
/* ''
.pi-fire:before
content: '\e85e'
/* ''
.pi-audio:before
content: '\e85f'
/* ''
.pi-link-ext:before
content: '\e860'
/* ''
.pi-document-text:before
content: '\e861'
/* ''
.pi-license-copyright:before
content: '\e862'
/* ''
.pi-blender:before
content: '\e863'
/* ''
.pi-replay:before
content: '\e864'
/* ''
.pi-puzzle:before
content: '\e865'
/* ''
.pi-cog:before
content: '\e866'
/* ''
.pi-move:before
content: '\e867'
/* ''
.pi-warning:before
content: '\e868'
/* ''
.pi-sort:before
content: '\e869'
/* ''
.pi-character:before
content: '\e86a'
/* ''
.pi-tree-flow:before
content: '\e86b'
/* ''
.pi-volume-on:before
content: '\e86c'
/* ''
.pi-volume-off:before
content: '\e86d'
/* ''
.pi-pause:before
content: '\f00e'
/* ''
.pi-globe:before
content: '\f019'
/* ''
.pi-heart-broken:before
content: '\f028'
/* ''
.pi-newspaper:before
content: '\f1ea'
/* ''

1029
src/styles/_homepage.sass Normal file
View File

File diff suppressed because it is too large Load Diff

176
src/styles/_join.sass Normal file
View File

@@ -0,0 +1,176 @@
$slide-height: 600px
.join
position: relative
.slide
position: relative
display: flex
justify-content: center
width: 100%
&.icons
margin: 50px auto 100px auto
flex-direction: row
justify-content: space-around
.join__points_item
display: inline-block
width: 20%
padding: 0 20px
text-align: center
.join__points_item-icon
font-size: 4em
display: block
color: $color-text-dark-secondary
margin: 0 0 15px 0
.join__points_item-title
display: block
font-family: $font-headings
font-size: 1.5em
line-height: 1.2em
color: lighten($color-text, 10%)
.join__points_item-description
margin-top: 25px
display: block
&.image
flex-direction: column
height: $slide-height
width: 100%
background:
repeat: no-repeat
size: cover
color: white
.lead
z-index: 1
max-width: 500px
font-size: 1.2em
padding: 0 50px
text-shadow: 0 0 25px rgba(black, .8)
h1
font:
family: $font-headings
a
color: white
&.right
align-self: flex-end
&.main
text-align: center
align-items: center
h1
z-index: 1
font:
family: $font-headings
font-size: 3.5em
margin: 0
padding: 0 0 15px 0
text-shadow: 0 0 30px rgba(black, .5)
h2
z-index: 1
font:
size: 1.4em
family: $font-headings
margin: 0
padding: 0
weight: 400
max-width: 500px
text-shadow: 0 0 25px rgba(black, .8)
&.subscribe
.box
padding: 15px 65rpx
margin: 25px auto
+container-box
h2
text-align: center
padding: 0 0 15px 0
ul
max-width: 300px
margin: 0 30px
padding: 0
list-style-type: none
li
position: relative
padding: 0
margin: 0
&:after
position: absolute
content: '\f00c'
font-size: 75%
top: 3px
left: -15px
font-family: "FontAwesome"
color: $color-success
a.subscribe
display: inline-block
width: 100%
text-align: center
button.subscribe
color: $color-text-dark
border-color: $color-text-dark
margin: 25px auto 25px auto
transition: opacity .1s
&:hover
opacity: .8
i
padding-left: 10px
.overlay
z-index: 1
.gradient
position: absolute
width: 100%
height: 100%
top: 0
left: 0
right: 0
bottom: 0
z-index: 0
background: linear-gradient(to top, rgba(5,6,6,0.6) 0%, transparent 80%)
&.left
background: linear-gradient(to right, rgba(5,6,6,0.6) 0%, transparent 80%)
&.right
background: linear-gradient(to left, rgba(5,6,6,0.6) 0%, transparent 80%)
button
color: white
border-color: white
padding: 5px 25px
margin: 45px auto 0 auto
font:
family: $font-headings
size: 1.6em
&:hover, &:focus
background-color: rgba(white, .2)
&:active
background-color: rgba(white, .4)
color: white

427
src/styles/_normalize.scss Normal file
View File

@@ -0,0 +1,427 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

284
src/styles/_notifications.sass Normal file
View File

@@ -0,0 +1,284 @@
/* Notifications */
#notifications
display: none
& #notifications-refresh,
& #notifications-markallread
float: right
color: $color-primary
cursor: pointer
padding: 8px 10px 0 10px
margin: 0
height: initial
font:
family: $font-body
text:
shadow: none
transform: initial
&:hover, &:focus
color: lighten($color-primary, 10%)
&:active
color: $color-secondary
#notifications-toggle
font-size: 1.5em
cursor: pointer
position: relative
user-select: none
& .flyout-hat
width: 0
height: 0
position: absolute
border-style: solid
border-width: 0 8px 8px 8px
border-color: transparent transparent white transparent
bottom: -15px
right: 22px
visibility: hidden
&.active
& .flyout-hat
visibility: visible
#notifications-count
opacity: 0
position: absolute
top: 10px
right: 14px
width: 18px
height: 18px
background-color: $color-secondary
border-radius: 50%
text-align: center
color: white
font-size: .5em
font:
weight: bolder
family: sans-serif
padding: 0
user-select: none
transform: scale(0)
transition: transform 250ms ease-in-out
span
position: relative
top: -2px
&.bloom
opacity: 1
transform: scale(1) !important
-webkit-transform: scale(1) !important
#notifications-list
list-style-type: none
padding: 0 5px
margin: 0
& .nc-item, & .nc-loading
position: relative
padding: 10px 0
border-top: thin solid lighten($color-text, 62%)
margin: 0
width: 100%
display: block
clear: both
&:hover
& .nc-read_toggle,
& .nc-subscription_toggle
visibility: visible
&.is_read
opacity: 0.6
color: lighten($color-text, 20%)
&.nc-item-empty
color: lighten($color-text, 20%)
text-align: center
padding: 24px 0
user-select: none
& .nc-link
position: absolute
top: 0
right: 0
bottom: 0
background-color: rgba(0,0,0,.1)
& .nc-avatar
float: left
width: 10%
text-align: center
& img
border-radius: 50%
width: 24px
height: 24px
& .nc-text
width: 90%
& .nc-date
display: block
padding-top: 5px
margin-left: 40px
font-size: .85em
color: lighten($color-text, 20%)
& a
color: lighten($color-text, 20%)
&:hover
color: lighten($color-text, 30%)
& .nc-loading
text-align: center
font-size: 1.5em
color: lighten($color-text, 50%)
& .nc-button
color: $color-text-dark-secondary
text-shadow: none
visibility: hidden
cursor: pointer
display: block
float: right
position: absolute
top: 5px
right: 3px
padding: 5px
&.active
color: $color-primary
i.spin
&:before
content: '\e800'
& .nc-subscription_toggle
top: 25px
right: 4px
#notifications-loader
margin: 5px auto
text-align: center
color: $color-text-dark-hint
font-size: 1.2em
#notification-pop
visibility: hidden
display: none
opacity: 0
background-color: #327588
color: $color-text-light-primary
border-radius: 3px
overflow: hidden
width: 300px
position: fixed
z-index: 9998
bottom: 20px
left: 20px
cursor: pointer
box-shadow: 1px 1px 0 rgba(black, .1), 0 0 25px rgba(black, .2)
transition: opacity 250ms ease-in-out
&:hover
#pop-close
opacity: 1
&.in
opacity: 1
visibility: visible
display: block
animation:
name: grow-bounce-in
duration: 500ms
delay: 0
fill-mode: forwards
iteration-count: 1
timing-function: ease-out
.nc-progress
animation:
name: background-fill-left-right
duration: 10s
delay: 0
fill-mode: forwards
iteration-count: 1
timing-function: linear
&.in.out
animation:
name: grow-bounce-out
duration: 500ms
delay: 0
fill-mode: forwards
iteration-count: 1
timing-function: ease-out
.nc-progress
position: absolute
top: 0
left: 0
width: 100%
height: 2px
background: linear-gradient(to left, transparent 50%, lighten($color-primary, 10%) 50%)
background-size: 200% 100%
color: white
#pop-close
opacity: 0
position: absolute
z-index: 9999
top: 5px
right: 5px
font-size: .8em
color: $color-text-light-hint
cursor: pointer
padding: 3px
&:hover
color: $color-text-light-secondary
.nc-item
padding: 10px
display: flex
align-items: center
a
color: white
.nc-text
width: 90%
padding: 0 10px
font-size: .9em
.nc-author
font-weight: 500
color: white
.nc-avatar
width: 10%
text-align: center
align-self: flex-start
& img
border-radius: 50%
width: 24px
height: 24px
margin: 0 auto
.nc-date
display: block
padding-top: 5px
font-size: .85em
color: $color-text-light-secondary
& a
color: $color-text-light-secondary
&:hover
color: $color-text-light-primary

506
src/styles/_pages.sass Normal file
View File

@@ -0,0 +1,506 @@
/* Pages (services, about, etc) */
#page-header
display: flex
align-items: center
justify-content: center
flex-direction: column
min-height: 350px
color: white
border-bottom: 2px solid $color-background-light
.page-title-icons
font-size: 3em
display: flex
align-items: center
justify-content: center
margin-top: 15px
text-shadow: 2px 2px 1px rgba(black, .2)
.pi-blender-cloud
position: relative
left: -10px
.pi-heart-filled
font-size: .6em
padding: 0 15px
color: $color-danger
animation:
name: grow-bounce-heartbeat
duration: 2.5s
iteration-count: infinite
.page-title
text-align: center
font:
family: $font-headings
size: 2.8em
weight: 300
padding: 15px
text-shadow: 0 0 30px black, 0 0 50px black, 2px 2px 1px rgba(black, .2)
+media-xs
font-size: 2.5em
i.pi-blender-cloud-logo
width: 230px
display: inline-block
em
padding-left: 10px
font-size: .7em
.page-title-summary
text-align: center
padding: 10px 15px
font-size: 1.2em
.page-header-cta-container
display: flex
flex-direction: row
justify-content: center
align-items: center
margin: 30px auto
a.page-header-cta
+button-rounded-filled($color-info, 3px)
font:
size: 1.3em
weight: 500
padding: 4px 50px
display: inline-block
opacity: 1
a.page-header-cta-extra
display: inline-block
font-size: 1.2em
padding: 5px 25px
color: white
#page-content
background-color: white
width: 100%
.page-triplet-container
+container-behavior
padding: 25px 30px
.row, div[class^="col-md"]
+media-md
display: flex
+media-lg
display: flex
.triplet-card
width: 100%
+container-box
display: flex
flex-direction: column
.triplet-card-thumbnail
img
border-top-left-radius: 3px
border-top-right-radius: 3px
width: 100%
border-bottom: 3px solid $color-primary
+img-responsive
.triplet-card-info
padding: 15px
text-align: center
flex: 1
display: flex
flex-direction: column
h3
margin-top: 10px
color: $color-danger
padding-bottom: 20px
position: relative
&:after
content: ''
border-bottom: 2px solid rgba($color-danger, .8)
width: 35px
position: absolute
left: 50%
bottom: 10px
transform: translateX(-50%)
p
display: block
font-size: 1.1em
line-height: 1.5em
color: $color-text-dark-primary
flex: 1
.triplet-cta
display: block
font-size: .9em
padding: 10px 0
color: $color-primary-dark
cursor: pointer
&:hover
text-decoration: underline
$page-card-icon-size: 75px
.page-card-header
position: relative
width: 100%
text-align: center
color: $color-info
display: block
padding: 40px 0 25px 0
margin-bottom: -50px
font:
size: 2.4em
weight: 300
&:after
content: '';
border-bottom: 2px solid rgba(104,179,200,0.8);
width: 120px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 7px;
span
display: block
padding: 10px 0
font-size: .6em
color: $color-text-light-secondary
a.page-card-cta
font-size: .5em
min-width: 250px
margin:
right: 0
top: 10px
bottom: 10px
&.dark
color: white
&:after
border-bottom-color: rgba(white, .6)
.page-card
display: flex
align-items: center
justify-content: center
min-height: 200px
margin: 0 auto
background:
color: white
size: cover
position: 50% 50%
+clearfix
+media-sm
min-height: 150px
+media-xs
min-height: 150px
flex-direction: column-reverse
&:nth-child(even)
background-color: $color-background-light
hr
width: 100%
height: 1px
display: block
margin: 10px auto
padding: 0
border: none
background-color: $color-background
&.right
flex-direction: row-reverse
+media-xs
flex-direction: column-reverse
&.dark
background-color: #2b2b2b
&:nth-child(even)
background-color: darken(#2b2b2b, 5%)
a
color: $color-info
hr
background-color: rgba(white, .1)
.page-card-summary
color: #ccc
.page-card-side
width: 50%
padding: 60px 0
max-width: 450px
position: relative
align-self: stretch
+list-bullets
+media-sm
padding: 40px 0
+media-xs
width: 90%
max-width: 90%
padding: 40px 0
.page-card-title
font:
size: 2em
weight: 300
color: $color-danger
padding-bottom: 15px
position: relative
margin-top: 0
&:after
content: ''
border-bottom: 2px solid rgba($color-danger, .8)
width: 35px
position: absolute
left: 0
bottom: 7px
small
color: $color-text-dark-hint
font-size: .8em
padding-left: 5px
.page-card-summary
font-size: 1.4em
color: $color-text-dark-primary
padding: 15px 0 25px 0
.page-card-image
width: 100%
text-align: center
img
max-width: 100%
span
display: block
text-align: center
padding: 20px 0
color: $color-text-dark-primary
.page-card-icon
display: block
position: relative
+position-center-translate
margin: 0 auto
width: $page-card-icon-size * 2
height: $page-card-icon-size * 2
border: 2px solid rgba($color-text-dark-hint, .5)
border-radius: 50%
background:
position: 50% 50%
repeat: no-repeat
size: $page-card-icon-size
+media-sm
width: $page-card-icon-size * 1.5
height: $page-card-icon-size * 1.5
background-size: $page-card-icon-size * 0.75
+media-xs
width: $page-card-icon-size * 1.5
height: $page-card-icon-size * 1.5
background-size: $page-card-icon-size * 0.75
margin: 40px auto
svg
+position-center-translate
/* Subscribe specifics */
&.subscribe
background-color: $color-background-nav
text-align: center
padding: 60px 0
.page-card-side
width: 100%
max-width: 100%
.page-card-title
color: $color-info
text-align: center
padding-bottom: 0
&:after
border: none
.page-card-summary
color: $color-text-light-primary
.page-card-cta
text-align: center
font-size: 1.5em
padding: 10px 40px
margin-right: initial
a.page-card-cta
+button-rounded-filled($color-primary, 3px)
padding: 5px 30px
margin-right: 25px
font-size: 1em
font-weight: 500
display: inline-block
opacity: 1
color: white !important
i
position: relative
left: -10px
margin-right: 0
&.download
+button-rounded-filled($color-success, 3px)
opacity: 1
i
position: relative
left: 0
.page-section-container
background:
color: transparent
size: cover
position: 50% 50%
.page-card, .page-card.dark,
.page-card-header, .page-card-header.dark,
background-color: transparent
.page-card.dark:nth-child(even)
background-color: rgba(black, .1)
border-top: 2px solid rgba(black, .35)
.page-card-side
max-width: 500px
padding: 90px 25px
/* Page specific changes */
.page-triplet-container.homepage
.triplet-card
cursor: pointer
transition: box-shadow 150ms ease-in-out
&:hover
box-shadow: 0 0 25px rgba(black, .2)
.join.navbar-backdrop
position: relative
video
display: block
+position-center-translate
+media-xs
display: none
+media-sm
display: none
+media-md
width: 100%
+media-lg
width: 100%
.services.navbar-backdrop-overlay
background: rgba(black, .5)
.services
.page-card-side
max-width: 500px
padding: 75px 25px
.page-card-header.dark
&:after
border: none
.join.navbar-backdrop-overlay
background: linear-gradient(rgba(white, .3) 0%, transparent 60%)
.join
#page-header
.page-title
font:
size: 2.8em
.page-title-summary
font:
style: normal
size: 1.4em
weight: 400
.page-card
&:nth-child(even)
background-color: white
&.right
background-color: $color-background-light
.page-card-title,
.page-card-summary
padding-left: 25px
.page-card-title:after
left: 25px
&.dark.right
.page-card-title,
.page-card-summary
padding-left: 0
.page-card-title:after
left: 0
&.oneofus
display: block
text-align: center
min-height: initial
padding: 25px
color: transparent
background-color: $color-background-light
border-top: thin solid $color-background
font:
size: 1.4em
transition: color 350ms ease-in-out
a, strong
color: transparent
transition: color 350ms ease-in-out
&.active
color: $color-text-dark-primary
a
color: $color-primary
strong
color: $color-danger
.page-card-header
margin-bottom: 0
.page-card-header.dark
margin-bottom: -50px
&:after
border: none
.page-card-side
+media-xs
width: 100%
max-width: 100%
.page-card-image
img
border-radius: 3px

323
src/styles/_project-dashboard.sass Normal file
View File

@@ -0,0 +1,323 @@
.dashboard-container
section#home,
section#projects
background-color: $color-background
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
section#sub-nav-tabs.home,
section#sub-nav-tabs.projects
background-color: $color-background-light
border-bottom: thin solid $color-background-dark
li.nav-tabs__list-tab
padding: 15px 20px 10px 20px
&:hover
border-color: rgba($color-primary, .4)
&.active
border-color: $color-primary
color: $color-primary-dark
a, i
color: $color-primary-dark
span
color: $color-text-dark-secondary
section#home
background-color: $color-background-dark
section.nav-tabs__tab
display: none
&.active
display: block
#home-images__list
padding: 15px 20px
.home-images__list-item
display: block
break-inside: avoid
padding: 0
margin: 10px auto
background-color: white
border: thin solid darken($color-background-dark, 5%)
border-bottom: 2px solid darken($color-background-dark, 5%)
border-right: 2px solid darken($color-background-dark, 5%)
border-radius: 3px
&:first-child
margin-top: 0
&:last-child
margin-bottom: 0
a.home-images__list-thumbnail
position: relative
display: block
width: 100%
min-height: 100px
img
width: 100%
i
font-size: 1.2em
color: $color-text-dark-hint
+position-center-translate
.home-images__list-details
a.title
display: inline-block
width: 100%
padding: 10px
color: $color-text-dark-primary
font-weight: 500
border-bottom: 2px solid $color-background
font-size: larger
ul.meta
+list-meta
width: 100%
font-size: .85em
background-color: $color-background-light
color: $color-text-dark-secondary
padding: 10px
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
li.delete-image
a
&.delete-prompt:hover,
&.delete-confirm:hover
color: $color-danger
&.delete-cancel:hover
color: $color-success
&.delete-confirm,
&.delete-cancel
padding-left: 10px
span.delete-confirm
display: none
.tab_header-container
background-color: $color-background
padding: 10px 0
.tab_header-intro_text
width: 75%
.tab_header-intro_icons
width: 25%
.tab_header-intro
display: flex
position: relative
z-index: 1
padding: 15px 35px
margin: 10px -10px
color: white
border-top-left-radius: 3px
border-top-right-radius: 3px
box-shadow: 0 3px 0 rgba(black, .2)
background-position: 50%
h2
font-size: 1.6em
margin: 10px 0
p
line-height: 1.6em
a
color: white
text-decoration: underline
&:before, &:after
content: ""
bottom: -.7em
position: absolute
display: block
border:
style: solid
color: rgba(black, .5) transparent transparent transparent
z-index: -1
&:before
left: 0
border-width: .75em 0 0 .75em
&:after
right: 0
border-width: .75em .75em 0 0
.tab_header-intro_icons
display: flex
align-items: center
justify-content: center
font-size: 2.5em
color: white
.pi-heart-filled
font-size: .6em
padding: 0 15px
color: $color-danger
.pi-blender-cloud,
.pi-picture-album
position: relative
left: -15px
.blender_sync-main
background-color: white
border: thin solid $color-background-dark
border-radius: 3px
margin: 30px 20px 10px 20px
&.empty
color: $color-text-dark-secondary
text-align: center
i.pi-blender
padding-right: 10px
.blender_sync-main-header
padding: 10px 20px
display: flex
align-items: center
.blender_sync-main-title
margin:
top: 10px
bottom: 10px
flex: 1
a.download
display: block
margin: 15px auto 0 auto
width: 200px
@include button-rounded($color-success, 3px)
padding: 5px 10px
.blender_sync-main-last
text-align: right
color: $color-text-dark-secondary
#tab-images
.tab_header-intro
background-position-x: 0
ul#home-text__list
margin: 0
padding: 10px 10px
list-style: none
background-color: $color-background-dark
li.home-text__list-item
display: block
break-inside: avoid
padding: 0
margin: 10px 5px
background-color: white
border: thin solid darken($color-background-dark, 5%)
border-bottom: 2px solid darken($color-background-dark, 5%)
border-right: 2px solid darken($color-background-dark, 5%)
border-radius: 3px
.home-text__list-details
display: flex
flex-direction: column
a.title
padding: 10px
color: $color-text-dark-primary
font-weight: 500
border-bottom: 2px solid $color-background
ul.meta
+list-meta
width: 100%
font-size: .85em
background-color: $color-background-light
color: $color-text-dark-secondary
padding: 10px
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
ul.projects__list
margin: 0
padding: 5px 0 10px 0
list-style: none
li.projects__list-item
display: flex
align-items: center
padding: 10px 0
margin: 10px 20px
background-color: white
border: thin solid $color-background-dark
border-radius: 3px
box-shadow: 1px 1px 0 rgba(black, .1)
&:hover
cursor: pointer
.projects__list-details a.title
color: $color-text-dark-primary
&.active
border-color: $color-primary
.spin
animation-duration: 5s
.projects__list-details a.title
color: $color-primary
a.projects__list-thumbnail
position: relative
margin: 0 15px
width: 50px
height: 50px
border-radius: 3px
background-color: $color-background-light
display: flex
align-items: center
justify-content: center
img
width: 100%
i
transform: scale(1.2)
color: $color-text-dark-hint
.projects__list-details
display: flex
flex-direction: column
a.title
font-size: 1.2em
padding-bottom: 2px
color: $color-text-dark-primary
ul.meta
font-size: .9em
+list-meta
width: 100%
color: $color-text-dark-primary
li.leave
span
&.user-remove-prompt:hover,
&.user-remove-confirm:hover
color: $color-danger
&.user-remove-cancel:hover
color: $color-success
&.user-remove-prompt,
&.user-remove-confirm,
&.user-remove-cancel
cursor: pointer
&.user-remove
display: none
&.user-remove-confirm,
&.user-remove-cancel
padding-left: 10px

164
src/styles/_project-sharing.sass Normal file
View File

@@ -0,0 +1,164 @@
ul.sharing-users-list
list-style: none
margin: 0
padding: 0
li.sharing-users-item
padding: 10px 0
display: flex
align-items: center
cursor: default
&:hover
.sharing-users-action
visibility: visible
.sharing-users-details
.sharing-users-name
color: $color-text-dark-primary
&.active, &.added
color: $color-primary
.sharing-users-details
.sharing-users-name, .sharing-users-extra
color: $color-primary
.sharing-users-avatar
img
transform: scale(1.2)
&.added
.sharing-users-details
.sharing-users-name, .sharing-users-extra
color: $color-success
&.self
.sharing-users-details
.sharing-users-name
color: $color-info
.sharing-users-action
visibility: visible
.sharing-users-avatar img
border: 2px solid $color-info
.sharing-users-avatar
width: 15%
max-width: 60px
text-align: center
img
margin: 0 auto
width: 40px
height: 40px
border-radius: 50%
overflow: hidden
border: thin solid lighten($color-text-dark-hint, 10%)
transition: transform 350ms ease-in-out
.sharing-users-details
width: 85%
display: flex
flex-direction: column
.sharing-users-name
font:
size: 1.2em
weight: 400
color: $color-text-dark
transition: color 350ms ease-in-out
small
color: $color-text-dark-hint
.sharing-users-extra
font:
size: .9em
weight: 300
color: $color-text-dark-primary
transition: color 350ms ease-in-out
.sharing-users-action
visibility: hidden
span
font-size: .9em
color: $color-text-dark-hint
button
background: none
border: none
&.user-remove
color: $color-danger
&:hover
color: lighten($color-danger, 10%)
.sharing-users-intro,
.sharing-users-info
h4
margin: 0
font-family: $font-body
.sharing-users-info
padding-left: 15px
border-left: thin solid $color-text-dark-hint
+media-sm
margin-top: 25px
h4
padding-bottom: 10px
p
font:
size: 1.1em
weight: 300
.sharing-users-search
.disabled
color: $color-text-dark-secondary
padding-bottom: 10px
.algolia-autocomplete
position: relative
width: 100%
&:before
content: '\e81c'
font-family: 'pillar-font'
position: absolute
font-size: .9em
top: 7px
left: 15px
z-index: 1
color: $color-text-dark-secondary
.algolia-autocomplete .aa-input
padding-left: 35px
width: 100%
.algolia-autocomplete .aa-hint
width: 100%
color: $color-text-dark-hint
.algolia-autocomplete .aa-dropdown-menu
width: 100%
background-color: white
border: 1px solid $color-text-dark-hint
border-top: none
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
box-shadow: 0 15px 30px rgba(black, .1)
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion
cursor: pointer
padding: 5px 4px
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor,
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor em
background-color: $color-primary
color: white
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em
font-style: normal
color: $color-primary

2580
src/styles/_project.sass Normal file
View File

File diff suppressed because it is too large Load Diff

784
src/styles/_search.sass Normal file
View File

@@ -0,0 +1,784 @@
$search-hit-width: 160px
$search-hit-width_list: 48px
$search-hit-width_grid: 100px
.search-site-result
width: 100%
&.advanced
width: 350px
z-index: 101
.search-hit
background: white
border-top: thin solid $color-background !important
.search-hit-name
font-weight: 400
padding-top: 8px
color: $color-primary-dark
.search-hit
padding: 0
margin: 0
display: block
color: $color-text
text:
transform: initial
shadow: none
font:
size: .9em
weight: 400
family: $font-body
style: initial
width: 100%
+text-overflow-ellipsis
+clearfix
& em
color: $color-primary-dark
font-style: normal
&:hover
padding: 0
margin: 0
background: $color-background
&:first-child
border: none
.search-hit-name
top: 6px
margin: 0
padding-top: 0
.search-hit-meta
padding-top: 8px
margin: 0
.search-hit-thumbnail
border-radius: 0
transition: margin-right 100ms ease-in-out
.twitter-typeahead
.tt-hint
color: $color-text-light-hint
.tt-menu
top: 47px !important
background-color: white
box-shadow: 1px 1px 0 rgba(black, .05), 0 20px 50px rgba(black, .25)
min-width: 350px
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
border-top: 3px solid lighten($color-primary, 5%)
overflow: hidden
.tt-suggestion
&:hover, &.tt-cursor
.search-hit
text-decoration: none
background-color: lighten($color-background, 3%)
.search-hit-name
color: $color-background-nav
.search-hit-meta
span.project, span.node_type, span.media
color: $color-background-nav
.search-hit-thumbnail
opacity: .9
margin-right: 15px
&.tt-cursor:hover .search-hit
background-color: lighten($color-background, 5%)
#search-container
display: flex
border-radius: 0
min-height: 500px
background-color: white
+container-behavior
+media-lg
border-top-left-radius: 3px
border-top-right-radius: 3px
padding-left: 0
padding-right: 0
#search-sidebar
width: 20%
background-color: $color-background-nav
border-right: thick solid $color-background-nav-dark
+media-lg
border-top-left-radius: 3px
input.search-field
background-color: $color-background-nav-dark
font-size: 1.1em
color: white
margin-bottom: 10px
border: none
border-bottom: 2px solid rgba($color-primary, .2)
border-radius: 0
width: 100%
padding: 5px 15px
height: 50px
transition: border 100ms ease-in-out
&::placeholder
color: $color-text-light-secondary
&:placeholder-shown
border-bottom-color: $color-primary
&:focus
outline: none
border: none
border-bottom: 2px solid lighten($color-primary, 5%)
.search-list-filters
padding:
left: 10px
right: 10px
.panel.panel-default
margin-bottom: 10px
border-radius: 3px
border: none
background-color: lighten($color-background-nav, 5%)
a
text-decoration: none
.toggleRefine
display: block
padding-left: 7px
color: $color-text-light-primary
text-transform: capitalize
&:hover
text-decoration: none
color: $color-primary
&.refined
color: $color-primary
&:hover
color: $color-danger
span
&:before
/* x icon */
content: '\e84b'
font-family: 'pillar-font'
span
&:before
/* circle with dot */
content: '\e82f'
font-family: 'pillar-font'
position: relative
left: -7px
font-size: .9em
span
&:before
/* empty circle */
content: '\e82c'
font-family: 'pillar-font'
position: relative
left: -7px
font-size: .9em
.facet_count
color: $color-text-light-secondary
.panel-title, .panel-heading
color: $color-text-light-secondary
font:
size: 1em
weight: 500
.panel-body
padding-top: 0
.panel-title
position: relative
&:after
content: '\e83b'
font-family: 'pillar-font'
position: absolute
right: 0
color: $color-background-nav-dark
.collapsed
.panel-title:after
content: '\e838'
.search-list-stats
color: lighten($color-background-nav, 30%)
padding: 10px 15px 0 15px
text-align: center
font-size: .9em
+clearfix
#pagination
ul.search-pagination
text-align: center
list-style-type: none
margin: 0
padding: 0
width: 100%
display: flex
+clearfix
li
display: inline-block
margin: 5px auto
&:last-child
border-color: transparent
a
font-weight: 500
padding: 5px 4px
color: $color-text-light-secondary
&:hover
color: $color-text-light-primary
&.disabled
opacity: .6
&.active a
color: white
#search-list
width: 40%
height: 100%
padding: 0
position: relative
#hits
position: relative
width: 100%
#no-hits
padding: 10px 15px
color: $color-text-dark-secondary
.search-hit
#search-loading
visibility: hidden
background-color: transparent
font:
size: 1.5em
weight: 600
position: absolute
top: 0
left: 0
right: 0
bottom: 0
z-index: $z-index-base + 5
opacity: 0
cursor: default
transition: opacity 50ms ease-in-out
&.active
visibility: visible
opacity: 1
.spinner
color: $color-background-nav
background-color: white
padding: 0
width: 20px
height: 20px
border-radius: 50%
position: absolute
top: 7px
right: 10px
span
padding: 5px
+pulse
#search-details
position: relative
width: 40%
border-left: 2px solid darken(white, 3%)
#search-hit-container
position: absolute // for custom scrollbars
width: 100%
.ps-scrollbar-y-rail
z-index: 1
#error_container
position: relative
background: white
padding: 20px
#search-error
display: none
margin: 20px auto
color: $color-danger
text-align: center
#node-container
width: 100%
max-width: 100%
.node-preview
max-height: initial
&.group
background: white
.overlay
display: none
.node-title
font-size: 1.8em
padding-right: 30px
width: 100%
+text-overflow-ellipsis
.backdrop
opacity: .15
.node-preview-thumbnail
max-height: 320px
.node-children
&.group
background-color: white
position: relative
z-index: 1
.list-node-children-item.browse-list
width: 98%
.list-node-children-item-name
+text-overflow-ellipsis
font-size: 1.1em
.list-node-children-item-meta
+text-overflow-ellipsis
padding-right: 20px
span
&.free
font-size: .7em
.node-details-container
&.group
position: initial
.node-details-description
max-width: 100%
p
margin-bottom: 0
padding-bottom: 10px
.node-details-header
clear: both
width: 100%
max-width: 100%
.node-title
font-size: 1.7em
.node-details-meta
&.header
clear: both
width: 100%
max-width: 100%
padding: 10px
.node-details-meta-list
display: inline-block
float: right
font-size: .9em
.node-details-meta-list-item
&.status, &.author
display: none
&.type, &.length
padding-top: 10px
&.access
padding-top: 5px
&.footer
.node-details-meta-list
.node-details-meta-list-item
&.status
display: none
&.preview
bottom: initial
top: 10px
.node-details-meta-list
.node-details-meta-list-item
&.status, &.author, &.date
display: none
&.texture
.texture-title
font:
size: 2em
family: $font-body
padding: 15px 10px 10px 15px
.node-row
background: white
&.texture-map
width: 100%
section.node-preview.texture
max-height: 180px
max-width: 180px
.node-details-header
padding:
left: 15px
right: 15px
bottom: 0
min-height: initial
.node-title
font-size: 1.5em
.node-details-attributes
font-size: .9em
padding:
left: 15px
right: 15px
bottom: 10px
span.sizes
padding: 0
span.extra
padding: 0
.node-preview.texture
max-width: 128px
img.node-preview-thumbnail
pointer-events: none
.node-details-meta
padding: 15px
.node-details-meta-list
width: 100%
flex-wrap: wrap
margin: 0 auto
.node-details-meta-list-item
text-align: center
margin: 0 auto 0 0
padding: 5px 0
font-size: .9em
&.image.download
width: 100%
padding: 5px 0 0 0
button
width: 100%
.search-hit
float: left
box-shadow: none
border: thin solid transparent
border-top-color: darken(white, 8%)
border-left: 3px solid transparent
color: $color-background-nav
width: 100%
position: relative
margin: 0
padding: 7px 10px 7px 10px
+clearfix
&:first-child
border: thin solid transparent
border-left: 3px solid transparent
&:hover
opacity: 1
text-decoration: none
cursor: default
color: darken($color-primary, 20%)
background-color: $color-background-light
& .search-hit-name i
color: darken($color-primary, 20%)
& .search-hit-thumbnail
& .search-hit-thumbnail-icon
transform: translate(-50%, -50%) scale(1.1)
.search-hit-name
text-decoration: none
&:hover
color: darken($color-primary, 10%)
.search-hit-thumbnail
cursor: pointer
.search-hit-thumbnail-icon
transform: translate(-50%, -50%) scale(1)
&:active
background-color: rgba($color-background, .5)
opacity: .8
color: $color-primary
& .search-hit-name i
color: $color-primary
&:focus
border-color: rgba($color-primary, .2)
/* Class that gets added when we click on the item */
&.active
background-color: lighten($color-background, 2%)
border-left: 3px solid $color-primary
.search-hit-name
color: darken($color-primary, 10%)
.search-hit-meta
span.when
display: none
span.context
display: inline-block
.search-hit-thumbnail
position: relative
float: left
min-width: $search-hit-width_list * 1.49
max-width: $search-hit-width_list * 1.49
height: $search-hit-width_list
border-radius: 3px
background: $color-background
margin-right: 12px
text-align: center
overflow: hidden
+media-xs
display: none
+media-sm
min-width: $search-hit-width_list
max-width: $search-hit-width_list
img
height: $search-hit-width_list
width: auto
.pi-video:before, .pi-file:before,
.pi-group:before
font-family: 'pillar-font'
.pi-video:before
content: '\e81d'
.pi-file:before
content: '\e825'
.pi-group:before
content: '\e80d'
.search-hit-thumbnail-icon
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
color: white
font-size: 1.2em
transition: none
color: $color-text-dark-secondary
.dark
text-shadow: none
font-size: 1.3em
.search-hit-name
position: relative
font-size: 1.1em
color: $color-text-dark-primary
background-color: initial
width: initial
max-width: initial
+text-overflow-ellipsis
padding-top: 5px
&:hover
cursor: pointer
text-decoration: underline
em
color: darken($color-primary, 15%)
font-style: normal
.search-hit-ribbon
+ribbon
right: -30px
top: 5px
span
font-size: 60%
margin: 1px 0
padding: 2px 35px
.search-hit-meta
position: relative
font-size: .9em
color: $color-text-dark-secondary
background-color: initial
padding: 3px 0 0 0
text-decoration: none
+text-overflow-ellipsis
span
&.project
color: $color-text-dark-secondary
margin-right: 3px
&.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
&.media, &.node_type
color: $color-text-dark-secondary
text-transform: capitalize
margin: 0 3px
&.when
margin: 0 3px
float: right
display: block
+media-lg
display: block
+media-md
display: block
+media-sm
display: none
+media-xs
display: none
&.context
margin: 0
float: right
display: none
&:hover
cursor: pointer
.search-hit-name-user
color: $color-primary
&.users
em
font-style: normal
color: $color-primary
.search-hit-name
font-size: 1.2em
small
margin-left: 5px
color: $color-text-dark-secondary
.search-hit-roles
font-size: .9em
color: $color-text-dark-secondary
margin-left: 15px
.view-grid
display: flex
justify-content: space-between
padding: 10px !important
.search-hit
width: 30%
clear: none
padding: 0
margin: 5px
overflow: hidden
border-radius: 3px
border-left: none
border: 2px solid $color-background
background-color: $color-background
transition: border-color 150ms ease-in-out
&.active
background-color: $color-primary
border-color: $color-primary
.search-hit-name
font-weight: 500
color: white
background-color: $color-primary
.search-hit-name
font-size: .9em
color: $color-text-dark-primary
width: 100%
position: absolute
bottom: 0
padding: 4px 5px
background-color: $color-background
.search-hit-meta
display: none
.search-hit-thumbnail
display: flex
flex-direction: column
background-color: transparent
width: 100%
max-width: 100%
height: auto
min-height: $search-hit-width_grid
overflow: hidden
margin: 0 auto
+media-xs
display: none
+media-sm
img
+position-center-translate
top: 40%
width: auto
height: auto
.search-hit-thumbnail-icon,
.search-hit-thumbnail-icon .dark
top: 40%
.filter-list
width: 100%
color: $color-text-light-secondary
padding: 5px 0
margin-bottom: 10px
display: flex
align-items: center
ul
margin: 0 0 0 auto
align-self: flex-end
display: inline-block
width: auto
list-style: none
color: white
border-radius: 3px
overflow: hidden
padding: 0
li
display: inline-block
padding: 3px 10px
cursor: pointer
background-color: $color-background-nav-light
&.active
background-color: $color-background-nav-dark

2
src/styles/_stats.sass Normal file
View File

@@ -0,0 +1,2 @@
#stats-container
+container-box

202
src/styles/_user.sass Normal file
View File

@@ -0,0 +1,202 @@
#login-container
width: 60%
margin: 40px auto
padding: 15px 35px 25px 35px
+container-box
.login-title,
.settings-title
text-align: center
color: $color-primary
font:
family: $font-headings
size: 2.2em
weight: 300
padding: 15px 0
.login-info
font:
weight: 300
color: $color-text-dark-primary
text-align: center
padding-bottom: 25px
.buttons
display: flex
margin: 35px auto 35px auto
width: 100%
align-items: center
justify-content: center
.login-button-container
margin: 0 25px
text-align: center
position: relative
a.forgot
width: 100%
position: absolute
bottom: -25px
left: 50%
transform: translateX(-50%)
display: block
font-size: .8em
color: $color-text-dark-secondary
.button-login,
.button-submit
min-width: 200px
@include button-rounded-filled($color-primary, 999em)
.button-register
min-width: 150px
@include button-rounded($color-primary, 999em)
#settings
display: flex
align-items: stretch
margin: 25px auto
#settings-sidebar
width: 30%
+container-box
margin-right: 15px
.settings-content
padding: 0
ul
padding: 0
margin: 0
list-style: none
a
&:hover
text-decoration: none
li
background-color: lighten($color-background, 5%)
li
padding: 25px
margin: 0
border-bottom: thin solid $color-background
border-left: thick solid transparent
transition: all 100ms ease-in-out
i
font-size: 1.1em
padding-right: 15px
.active
li
background-color: lighten($color-background, 5%)
border-left: thick solid $color-info
#settings-container
width: 70%
+container-box
.settings-header
background-color: $color-background
border-top-left-radius: 3px
border-top-right-radius: 3px
.settings-title
padding: 25px 15px 5px 15px
font:
size: 2em
family: $font-headings
weight: 300
.settings-content
padding: 25px
p
color: $color-text-dark-primary
.settings-billing-info
font-size: 1.2em
.subscription-active
color: $color-success
padding-bottom: 20px
.subscription-demo
color: $color-info
margin-top: 0
.subscription-missing
color: $color-danger
margin-top: 0
.button-submit
display: block
clear: both
min-width: 200px
margin: 0 auto
@include button-rounded-filled($color-primary, 999em)
#settings-container
#settings-form
width: 100%
.settings-form
display: flex
align-items: center
justify-content: center
.left, .right
padding: 25px 0
.left
width: 60%
float: left
.right
width: 40%
float: right
text-align: center
.settings-avatar
img
border-radius: 999em
span
display: block
padding: 15px 0
font:
size: .9em
.settings-password
color: $color-text-dark-primary
#user-edit-container
padding: 15px
#user-edit-header
.user-edit-name
font-size: 1.5em
.user-edit-username, .user-edit-email
color: $color-text-dark-secondary
#user-edit-form
padding: 10px 0
#submit_edit_user
+button-rounded-filled($color-success, 999em)
#button-cancel
+button-rounded(#aaa, 999em)
margin: 0 10px
#user-edit-notification
float: right
color: $color-text-dark-secondary
padding: 10px 0
&.success
color: $color-success
&.fail
color: $color-danger

566
src/styles/_utils.sass Normal file
View File

@@ -0,0 +1,566 @@
/* Collection of mixins that can be plugged everywhere */
=clearfix
clear: both
&:after
// Basically same as .clearfix from bootstrap
clear: both
display: block
content: ' '
=container-behavior
width: 100%
+media-lg
width: $screen-lg-min
margin-left: auto
margin-right: auto
box-sizing: border-box
+clearfix
@mixin button-rounded($mixin-color, $roundness)
opacity: .9
padding:
left: 20px
right: 20px
text-transform: uppercase
color: $mixin-color
border: 1px solid $mixin-color
border-radius: $roundness
background-color: transparent
transition: color 350ms ease-out, border 150ms ease-in-out, opacity 150ms ease-in-out, background-color 150ms ease-in-out
text-shadow: none
&:hover
opacity: 1
cursor: pointer
color: $mixin-color
border-color: $mixin-color
background-color: rgba($mixin-color, .1)
&:active, &:focus
outline: none
box-shadow: none
border-color: $mixin-color
background-color: $mixin-color
color: white
i
margin-right: 10px
small
font-size: .6em
@mixin button-rounded-filled($mixin-color, $roundness)
font-family: $font-body
text-transform: uppercase
opacity: .9
padding:
left: 20px
right: 20px
color: white
border: thin solid darken($mixin-color, 5%)
border-radius: $roundness
background: linear-gradient(lighten($mixin-color, 2%), $mixin-color)
text-shadow: 1px 1px 0 rgba(black, .15)
transition: color 150ms ease-out, opacity 100ms ease-in-out, background 100ms ease-out
&:hover
opacity: 1
cursor: pointer
color: white
border-color: lighten($mixin-color, 5%)
background: linear-gradient(lighten($mixin-color, 5%), lighten($mixin-color, 5%))
text-decoration: none
&:active, &:focus
outline: none
box-shadow: none
border-color: lighten($mixin-color, 5%)
background: $mixin-color
color: white
i
margin-right: 10px
small
font-size: .6em
@mixin overlay($from-color, $from-percentage, $to-color, $to-percentage)
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: linear-gradient(to bottom, $from-color $from-percentage, $to-color $to-percentage)
@mixin stripes($color-light, $color-dark, $deg, $size)
background-size: $size $size
background-image: linear-gradient($deg, $color-light 25%, $color-dark 25%, $color-dark 50%, $color-light 50%, $color-light 75%, $color-dark 75%, $color-dark)
=stripes-animate
animation:
name: background-slide
duration: 1s
delay: 0s
// fill-mode: forwards
iteration-count: infinite
timing-function: linear
=container-box
position: relative
background-color: white
border-radius: 3px
box-shadow: 0 0 0 1px rgba(black, .1), 1px 1px 2px rgba(black, .1)
=text-overflow-ellipsis
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
=position-center-translate
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
=input-generic
color: $color-text-dark
box-shadow: none
font-family: $font-body
border-radius: 3px
border-color: $color-background-dark
background-color: $color-background-light
&:focus
border-color: $color-info
box-shadow: none
=label-generic
color: $color-text-dark
font-family: $font-body
font-weight: 300
@mixin badge($mixin-color, $roundness)
padding:
left: 10px
right: 10px
text-transform: uppercase
color: $mixin-color
border: 1px solid $mixin-color
border-radius: $roundness
i
margin-right: 10px
/* Smallest, like phones on portrait.
** Menu is collapsed, columns stack, no brand */
=media-xs
@media (max-width: #{$screen-tablet - 1px})
@content
/* Small but wide: phablets, iPads
** Menu is collapsed, columns stack, no brand */
=media-sm
@media (min-width: #{$screen-tablet}) and (max-width: #{$screen-desktop - 1px})
@content
/* Tablets portrait.
** Menu is expanded, but columns stack, brand is shown */
=media-md
@media (min-width: #{$screen-desktop})
@content
=media-lg
@media (min-width: #{$screen-lg-desktop})
@content
=media-print
@media print
@content
=spin
animation:
name: spin-once
duration: 1s
delay: 0s
fill-mode: forwards
iteration-count: infinite
timing-function: linear
=spin-once
+spin
animation:
iteration-count: 1
=pulse
animation:
name: pulse
duration: 1s
delay: 0s
fill-mode: forwards
iteration-count: infinite
=pulse-75
animation:
name: pulse-75
duration: 1s
delay: 0
fill-mode: forwards
iteration-count: infinite
@mixin badge($mixin-color, $roundness)
=anim-grow-bounce
animation:
name: grow-bounce
duration: .25s
delay: 0s
fill-mode: forwards
iteration-count: 1
timing-function: linear
.anim-grow-bounce
+anim-grow-bounce
.spin
position: relative
+spin
&:before, &:after
+spin
margin:
left: 0 !important
right: 0 !important
.spinner
position: relative
+spin
&:before, &:after
+spin
@keyframes spin-once
from
transform: rotate(0deg)
to
transform: rotate(360deg)
@keyframes pulse
0
opacity: 1
50%
opacity: 0
100%
opacity: 1
@keyframes pulse-75
0
opacity: 1
50%
opacity: .8
100%
opacity: 1
@keyframes background-fill-left-right
from
background-position: right bottom
to
background-position: left bottom
@keyframes grow-bounce-in
0
transform: scale(0.8)
opacity: 0
50%
transform: scale(1.05)
opacity: 1
85%
transform: scale(1.0)
90%
transform: scale(0.99)
100%
transform: scale(1.0)
@keyframes grow-bounce-out
0
transform: scale(1.0)
opacity: 1
100%
transform: scale(0.9)
opacity: 0
@keyframes background-slide
from
background-position: 0 0
to
background-position: 50px 50px
@keyframes grow-bounce
0
transform: scale(1.0)
opacity: 1
50%
transform: scale(1.01)
opacity: .9
85%
transform: scale(1.0)
90%
transform: scale(0.99)
opacity: 1
100%
transform: scale(1.0)
@keyframes grow-bounce-heartbeat
0
transform: scale(1.0)
85%
transform: scale(1.0)
90%
transform: scale(1.15)
94%
transform: scale(0.9)
96%
transform: scale(1.05)
100%
transform: scale(1.0)
=list-bullets
ul
padding-left: 20px
list-style: none
li:before
content: '·'
font-weight: 400
position: relative
left: -10px
=node-details-description
padding: 15px 0 25px 0
color: darken($color-text-dark, 5%)
font:
family: $font-body
weight: 300
size: 1.2em
word-break: break-word
clear: both
+clearfix
+media-xs
font-size: 1.1em
strong, b
font-weight: 400
a:not([class])
color: $color-text-dark-primary
text-decoration: underline
&:hover
color: $color-primary
p
padding:
left: 20px
right: 20px
margin-bottom: 20px
line-height: 1.5em
word-wrap: break-word
h1, h2, h3, h4, h5, h6
padding:
top: 20px
left: 20px
right: 20px
blockquote
background-color: lighten($color-background, 5%)
text-shadow: 1px 1px 0 rgba(white, .2)
margin:
left: 20px
right: 20px
bottom: 30px
font-size: 1em
p
padding: 0
margin: 0
ul li blockquote
margin:
left: 0
top: 15px
img,
p img,
ul li img
max-width: 100%
padding:
top: 25px
// bottom: 10px
bottom: 25px
h2
margin-bottom: 15px
+media-xs
font-size: 1.5em
/* e.g. YouTube embed */
iframe
margin-top: 20px
width: 100%
max-width: 100%
height: auto
min-height: 354px
+media-sm
iframe
min-height: 314px
+media-xs
iframe
min-height: 314px
iframe[src^="https://w.soundcloud"]
min-height: auto
+list-bullets
ul
padding-left: 40px
margin-bottom: 25px
li
margin-bottom: 7px
img
display: block
padding:
top: 25px
bottom: 10px
ul, ul li ul
margin-top: 15px
padding-left: 20px
code, kbd, pre, samp
font-size: 1.3rem
pre
background-color: lighten($color-background, 5%)
border-color: $color-background
border-radius: 3px
color: $color-text
/* when <pre> is outside <p> */
margin:
left: 20px
right: 20px
pre+p
margin-top: 30px
p+pre
/* a <pre> right after a <p> usually are related, remove some spacing */
margin-top: -10px
p
pre
/* We already have spacing on the sides inside <p> */
margin:
left: 0
right: 0
=markdown-preview-container
border:
top: 1px solid $color-background
bottom: 1px solid $color-background
position: relative
margin: 40px auto 25px auto
padding: 10px 10px 25px 10px
color: $color-text-dark-primary
cursor: default
transition: all 150ms ease-in-out
+node-details-description
// Funny, normalize.css doesn't normalize when it's outside
h1
font-size: 2.8em
h2
margin-bottom: 15px
=ribbon
background-color: $color-success
cursor: default
overflow: hidden
white-space: nowrap
position: absolute
right: -40px
top: 10px
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
span
border: thin dashed rgba(white, .5)
color: white
display: block
font-size: 70%
margin: 1px 0
padding: 3px 50px
text:
align: center
transform: uppercase
@mixin text-background($text-color, $background-color, $roundness, $padding)
border-radius: $roundness
padding: $padding
background-color: rgba($background-color, .9)
box-shadow: 0.5em 0 0 rgba($background-color, .9),-0.5em 0 0 rgba($background-color, .9)
box-decoration-break: clone
color: $text-color
=list-meta
margin: 0
padding: 0
list-style: none
color: $color-text-dark-primary
li
display: inline-block
padding-left: 15px
position: relative
&:before
content: '·'
position: relative
top: 1px
left: -7px
color: $color-text-dark-secondary
&:first-child
padding-left: 0
&:before
content: ''
a
color: $color-text-dark-secondary
&:hover
color: $color-primary
/* Bootstrap's img-responsive class */
=img-responsive
display: block
max-width: 100%
height: auto

617
src/styles/attract/_main.sass Normal file
View File

@@ -0,0 +1,617 @@
@import url(../css/font_attract.css)
$color_text-default: #444
$color_link-default: #337ab7
$color_link-accent: lighten($color_link-default, 20%)
/* Label Status */
$color_status-todo: lightgray
$color_status-on_hold: #fff2cc /* UNUSED */
$color_status-in_progress: #fff2cc
$color_status-review: #e4f5f9
$color_status-final: #e7f5d3
$color_status-active: #E6F3FD
$color_status-updated: #e7f5d3
=text-overflow-ellipsis
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
body
padding-top: 50px
$color-link-default: #337ab7
$color-link-accent: lighten($color-link-default, 20%)
.list-group
margin-top: 20px
.panel .list-group
margin-top: 0
.list-group.list-shots a.list-group-item
padding: 0
.list-group-item img
width: 80px
.stats-knobs div
text-align: center
input.dial
box-shadow: none
transition: none
border-radius: auto
height: auto
cursor: default
input.dial:focus
box-shadow: none
.btn-group-cell .btn
/*width: 80px*/
.btn-group-cell a.btn
/*text-align: left*/
.btn-group-cell a.btn span
text-align: right
.expanded-edit input[type="text"]
height: 14px
font-size: 10px
line-height: 14px
width: 90%
.expanded-edit textarea
width: 90%
height: 99px
/* Edit shot page */
.row-task
margin-bottom: 10px
/* Stats page */
.row.status-progress
margin-bottom: 10px
margin-top: 10px
.progress-bar
&.progress-bar-todo
background-color: #CCC
&.progress-bar-on_hold
background-color: #D9534F
&.progress-bar-final
background-color: #5CB85C
&.progress-bar-review,
&.progress-bar-review_required
background-color: #5BC0DE
&.progress-bar-in_progress
background-color: #F0AD4E
.stats-legend
position: relative
display: inline-block
text-align: center
margin: 20px auto
.stats-legend_item
text-align: center
background-color: #ddd
border-radius: 50%
height: 80px
width: 80px
display: inline-block
float: left
margin: 0 15px
color: white
font-size: .8em
span
position: absolute
top: 50%
transform: translateY(-50%)
width: 80px
display: block
text-align: center
&.in_progress
background-color: #F0AD4E
&.review,
&.review_required
background-color: #5BC0DE
&.final
background-color: #5CB85C
&.on_hold
background-color: #D9534F
&.todo
background-color: #CCC
#shots tbody
font-size: 12px
& td
position: relative
padding: 0
vertical-align: middle
border: none
box-shadow: 0 1px 0 rgba(black, .1)
h3.stats-title
display: inline
ul.files
list-style-type: none
margin: 0
.file.active
background: #DDD
tr.success .make-current
display: none
.table-thumbnail
max-width: 120px
// height: auto
// width: 100%
textarea#description.form-control
min-height: 150px !important
textarea#notes.form-control
min-height: 200px !important
table td:nth-child(2)
+text-overflow-ellipsis
table td:nth-child(3)
//max-width: 300px
+text-overflow-ellipsis
/* Shots Main */
#shots-main
background-color: white
border-left: thin solid #dcdcdc
position: fixed
left: 0
top: 50px
bottom: 0
overflow: auto
padding: 15px
/* Table Shots (DataTable) */
#shots
.shots-shot_thumbnail
text-align: center
.shots-shot_name
font-weight: 500
& a
padding: 12px 8px
.table.dataTable tbody tr a
color: $color-text-dark
& a
color: $color-text-dark
/* Style active rows */
.table.dataTable tbody tr.active:nth-child(odd) td,
.table.dataTable tbody tr.active:nth-child(odd):hover td,
.table.dataTable tbody tr.active:nth-child(even) td,
.table.dataTable tbody tr.active:nth-child(even):hover td,
.table.dataTable tbody tr.active:nth-child(odd) th,
.table.dataTable tbody tr.active:nth-child(odd):hover th,
.table.dataTable tbody tr.active:nth-child(even) th,
.table.dataTable tbody tr.active:nth-child(even):hover th
background-color: inherit !important
color: $color-link-accent !important
font-weight: 600
& a
color: $color-link-accent !important
font-weight: 600
.table.dataTable tbody tr.updated:nth-child(odd) td,
.table.dataTable tbody tr.updated:nth-child(odd) th
animation: fx-updated-row-odd 1.5s ease forwards
.table.dataTable tbody tr.updated:nth-child(even) td,
.table.dataTable tbody tr.updated:nth-child(even) th
animation: fx-updated-row-even 8s ease forwards
$table_row_background_odd: #f9f9f9
$table_row_background_even: white
@-webkit-keyframes fx-updated-row-even
0%
background-color: $table_row_background_even
10%
background-color: $color-status-updated
40%
background-color: $color-status-updated
100%
background-color: $table_row_background_even
@keyframes fx-updated-row-even
0%
background-color: $table_row_background_even
10%
background-color: $color-status-updated
40%
background-color: $color-status-updated
100%
background-color: $table_row_background_even
@-webkit-keyframes fx-updated-row-odd
0%
background-color: $table_row_background_odd
10%
background-color: $color-status-updated
40%
background-color: $color-status-updated
100%
background-color: $table_row_background_odd
@keyframes fx-updated-row-odd
0%
background-color: $table_row_background_odd
10%
background-color: $color-status-updated
40%
background-color: $color-status-updated
100%
background-color: $table_row_background_odd
/* Shots Sidebar */
#shots-sidebar
background-color: white
border-left: thin solid #dcdcdc
position: fixed
right: 0
top: 50px
bottom: 0
position: fixed
overflow-y: auto
overflow-x: hidden
padding: 15px 0 15px 0
#shots-sidebar
/* First hide everything */
& [id^="field_"]
display: none
/* then show some fields */
& #field_status,
& #field_cut_in,
& #field_cut_out,
& #field_description,
& #field_notes,
& #field_revision,
& #field_filepath,
& #field_owners__users,
display: block
& .action_submit,
& .action_cancel
display: none
#field_status
& .form-control
text-transform: capitalize
&:focus
box-shadow: none !important
&.todo
background-color: lightgray
border: thin solid darken(lightgray, 10%)
color: #444
&.in-progress,
&.in_progress,
&.on_hold
background-color: $color-status-in_progress
border: thin solid darken($color-status-in_progress, 20%)
color: #b86811
&.review
background-color: $color-status-review
border: thin solid darken($color-status-review, 10%)
color: #174773
&.done,
&.approved,
&.final,
&.final1,
&.final2
background-color: $color-status-final
border: thin solid darken($color-status-final, 10%)
color: #38761d
&.cbb
border: thin solid #A7CA98
color: #38761d
&.conflict
border: thin solid crimson !important
color: crimson !important
font-weight: bold
background-color: white !important
#field_owners__users
.form-control
min-height: 150px
#shots-sidebar_edit
h2
text-transform: capitalize
#field_description
display: none
#description_print
font-size: 1.2em
padding: 2px
margin: 0
border: 1px solid transparent
color: lighten(black, 40%)
min-height: 100px
cursor: text
#description_form
& textarea
font-size: 1.2em
width: 100%
min-height: 100px
margin: 0
#description_container
position: relative
min-height: 120px
&:hover
.description_toggle
opacity: 1.0
.node__image_preview
width: 100%
.task-update,
.task-success,
.task-error
min-width: 150px
position: absolute
bottom: 0
right: 15px
display: block
.task-success,
.task-error
user-select: none
pointer-events: none
cursor: default
visible: hidden
.task-success
color: #398439
border-color: #398439
.task-error, .task-delete
color: #d9534f
border-color: #d43f3a
.task-delete:hover
background-color: #d9534f
color: white
.task-edit
color: lightblue
border-color: lightblue
&:hover
background-color: CornflowerBlue
color: white
/* Shots List */
.table td
position: relative
.task-add
display: block
visibility: hidden
margin: 0 auto
text-align: center
width: 90%
cursor: pointer
border: thin dashed gray
position: absolute
top: 50%
transform: translateY(-50%)
&:hover
background-color: white
border: thin dashed gray
.table td:hover
.task-add
visibility: visible
.load-task-view
cursor: pointer
display: block
width: 90%
font-size: .9em
font-weight: 400
line-height: 1.5em
margin: 0 auto
user-select: none
position: absolute
top: 50%
transform: translateY(-50%)
&:hover
opacity: .8
.table td.shots-shot_name a
display: block
width: auto
margin: 0 auto
visibility: visible
color: $color-link-default !important
position: relative
top: 17px
transform: translateY(-15px)
.table tr:hover
.load-shot-view
visibility: visible
.node_title
.parent_name
color: lighten($color-text-default, 30%)
border-right: 2px solid lighten($color-text-default, 60%)
padding-right: 15px
margin-right: 5px
.status
.label
display: block
width: 90%
font-size: .9em
font-weight: 400
line-height: 1.5em
margin: 0 auto
.table
tr
color: $color_text-default
tr:hover
opacity: 0.9
cursor: pointer
color: $color-link-accent
a
color: $color-link-accent
tr[data-shot-status ~= "final"]
background-color: $color-status-final !important
// tr[data-shot-status ~= "in_progress"]
// background-color: $color-status-in_progress
tr[data-shot-status ~= "review"],
tr[data-shot-status ~= "review_required"]
background-color: $color-status-review !important
tr[data-shot-status ~= "todo"]
background-color: $color-status-todo !important
tr[data-shot-status ~= "in-progress"],
tr[data-shot-status ~= "in_progress"]
background-color: $color_status-in_progress !important
tr[data-shot-status ~= "on_hold"]
//background-color: $color_status-on_hold !important
color: crimson
tr.active
color: #08C
a
color: #08C !important
.table tr.review_required
background-color: $color-status-review
/* Labels */
.label-todo
background-color: lightgray
border: thin solid darken(lightgray, 10%)
color: #444
&.active
border: 2px dashed darken(lightgray, 15%)
.label-in-progress, .label-in_progress, .label-on_hold
background-color: $color-status-in_progress
border: thin solid darken($color-status-in_progress, 20%)
color: #b86811
&.active
border: 2px dashed darken($color-status-in_progress, 25%)
.label-review
background-color: $color-status-review
border: thin solid darken($color-status-review, 10%)
color: #174773
&.active
border: 2px dashed darken($color-status-review, 25%)
.label-done,
.label-approved,
.label-final,
.label-final1,
.label-final2
background-color: $color-status-final
border: thin solid darken($color-status-final, 10%)
color: #38761d
&.active
border: 2px dashed darken($color-status-final, 15%)
.label-cbb
border: thin solid #A7CA98
color: #38761d
&.active
border: 2px dashed darken(#A7CA98, 5%)
.label-conflict
border: thin solid crimson !important
color: crimson !important
font-weight: bold
background-color: white !important
&:hover
opacity: 1.0 !important
&.active
border: 2px dashed crimson !important
.shots-shot_notes
max-width: 300px

650
src/styles/blog.sass Normal file
View File

@@ -0,0 +1,650 @@
@import _normalize
@import _config
@import _utils
@import _comments
@import _error
@import _base
@import _notifications
/* CSS comes from fontello.com using static/assets/font/config.json */
@import _font-pillar
@import plugins/js_perfectscrollbar
#blog_container
margin: 0
padding:
top: 0
bottom: 15px
display: flex
justify-content: center
+media-xs
flex-direction: column
padding-top: 0
#blog_post-edit-form
padding: 20px
.form-group
position: relative
margin: 0 auto 30px auto
font-family: $font-body
input, textarea, select
+input-generic
&#fileupload
color: $color-info
&.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
margin:
left: -20px
right: -20px
padding:
top: 20px
left: 0
right: 0
&:before
content: 'Live Preview'
position: absolute
top: -25px
left: 20px
font-size: .7em
color: $color-text-dark-secondary
transition: color 150ms ease-in-out
&:after
content: 'Markdown Supported'
position: absolute
top: -25px
right: 20px
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
&.post-create
flex-direction: row-reverse
#blog_post-create-container,
#blog_post-edit-container
padding: 25px
#blog_index-container,
#blog_post-container,
#blog_post-create-container,
#blog_post-edit-container
+container-box
width: 75%
+media-xs
border-radius: 0
width: 100%
clear: both
display: block
+media-sm
width: 60%
+media-md
width: 70%
+media-lg
width: 75%
.blog_index-header
width: 100%
height: 300px
max-height: 300px
overflow: hidden
position: relative
display: block
border-top-left-radius: 3px
border-top-right-radius: 3px
img
+position-center-translate
width: 100%
.blog_index-item
margin: 0 auto 15px auto
&:hover
.item-info a
color: $color-primary
.item-picture
position: relative
width: 100%
max-height: 350px
min-height: 200px
height: auto
overflow: hidden
border-top-left-radius: 3px
border-top-right-radius: 3px
+clearfix
img
+position-center-translate
width: 100%
border-top-left-radius: 3px
border-top-right-radius: 3px
+media-xs
min-height: 150px
+media-sm
min-height: 150px
+media-md
min-height: 250px
+media-lg
min-height: 250px
.item-title
display: block
font:
family: $font-body
size: 2em
weight: 400
padding: 25px 25px 10px 25px
.item-info
color: $color-text-dark-secondary
font-size: 1em
padding:
left: 25px
right: 25px
a
color: $color-text-dark-secondary
&:hover
color: $color-primary
.item-content
+node-details-description
padding: 35px 5px 35px 5px
font-size: 1.3em
+media-xs
padding:
left: 0
right: 0
.item-meta
color: $color-text-dark-secondary
padding:
left: 25px
right: 25px
+media-xs
padding:
left: 10px
right: 10px
.button-create, .button-edit
position: absolute
z-index: 2
top: 20px
right: 20px
+button-rounded-filled($color-success, 6px)
.button-edit
right: 170px
top: 15px
.item-picture+.button-back+.button-edit
right: 20px
top: 20px
#comments-container
padding:
left: 20px
right: 20px
max-width: 680px
margin: 0 auto
+media-lg
padding:
left: 0
right: 0
.comment-reply-form
+media-xs
padding:
left: 0
#blog_post-edit-form
padding: 0
.form-group
label
text-transform: capitalize
.form-group.content
.form-control
min-height: 350px
.form-group.url
label
text-transform: uppercase
.form-group.picture
+text-overflow-ellipsis
img
display: block
max-width: 100%
a
display: block
padding: 10px 0
text-align: right
.original a
color: $color-info
.delete a
color: $color-danger
.form-upload-file-meta
width: initial
#blog_post-edit-title
padding: 0
color: $color-text
font:
family: $font-headings
size: 1.8em
weight: 300
margin: 0 20px 15px 0
#blog_index-sidebar
width: 25%
padding: 0 15px
+media-xs
width: 100%
clear: both
display: block
margin-top: 25px
+media-sm
width: 40%
+media-md
width: 30%
+media-lg
width: 25%
.button-create
display: block
width: 100%
+button-rounded($color-success, 6px)
margin: 0
.button-back
display: block
width: 100%
+button-rounded($color-info, 6px)
margin: 15px 0 0 0
#blog_post-edit-form
.form-group
.form-control
background-color: white
.blog_index-sidebar,
.blog_project-sidebar
+container-box
background-color: lighten($color-background, 5%)
padding: 20px
.blog_project-card
position: relative
width: 100%
border-radius: 3px
overflow: hidden
background-color: white
color: lighten($color-text, 10%)
box-shadow: 0 0 30px rgba(black, .2)
margin:
top: 0
bottom: 15px
left: auto
right: auto
a.item-header
position: relative
width: 100%
height: 100px
display: block
background-size: 100% 100%
overflow: hidden
.overlay
z-index: 1
width: 100%
height: 100px
@include overlay(transparent, 0%, white, 100%)
img.background
width: 100%
// We can't have nice things because of Edge
// filter: blur(5px)
transform: scale(1.4)
.card-thumbnail
position: absolute
z-index: 2
height: 90px
width: 90px
display: block
top: 35px
left: 50%
transform: translateX(-50%)
background-color: white
border-radius: 3px
overflow: hidden
&:hover
img.thumb
opacity: .9
img.thumb
width: 100%
border-radius: 3px
transition: opacity 150ms ease-in-out
+position-center-translate
.item-info
padding: 10px 20px
background-color: white
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
a.item-title
display: inline-block
width: 100%
padding: 30px 0 15px 0
color: $color-text-dark
text-align: center
font:
size: 1.6em
family: $font-headings
weight: 300
transition: color 150ms ease-in-out
&:hover
text-decoration: none
color: $color-primary
#blog_post-container
.button-create
+button-rounded($color-success, 6px)
.button-back
position: absolute
top: 15px
right: 15px
z-index: 2
+button-rounded-filled($color-info, 6px)
.button-create, .button-edit
position: absolute
z-index: 2
top: 15px
right: 15px
+button-rounded-filled($color-success, 6px)
.button-edit
right: 170px
top: 15px
.button-back+.button-edit
right: 15px
top: 15px
#blog_container
&.cloud-blog
#blog_index-container,
#blog_post-container,
#blog_post-create-container,
#blog_post-edit-container
width: 90%
padding: 25px 30px 20px 30px
#blog_index-container+#blog_index-sidebar,
#blog_post-container+#blog_index-sidebar
display: none
&.cloud-blog #blog_index-container,
&.cloud-blog #blog_post-container,
#blog_index-container, #blog_post-container
padding: 0 0 50px 0
+media-sm
width: 100%
padding: 25px 20px 20px 20px
+media-xs
width: 100%
padding: 0 0 20px 0
.blog_index-item
padding: 25px 80px 20px 80px
position: relative
+media-xs
width: 100%
padding: 25px 0 20px 0
&.list
margin: 0 auto
padding: 15px 0
margin: 0 80px
border-bottom: thin solid $color-background
&:last-child
border-bottom: none
+media-xs
width: 100%
padding: 15px 10px
margin: 0
a.item-title
padding:
top: 0
bottom: 5px
font:
size: 1.6em
weight: 400
family: $font-body
.item-info
color: $color-text-dark-secondary
font-size: .9em
padding:
left: 25px
right: 25px
.item-header
width: 50px
height: 50px
position: absolute
top: 20px
border-radius: 3px
background-color: $color-background
overflow: hidden
img
+position-center-translate
width: 100%
i
+position-center-translate
font-size: 1.2em
color: $color-text-dark-hint
&.nothumb
border-radius: 50%
a.item-title, .item-info
padding-left: 70px
h4.blog_index-title
margin-left: 80px
padding-top: 25px
font:
family: $font-body
color: $color-text-dark-secondary
#blog_index-container,
#blog_post-container
.blog_index-item
padding: 25px 10px 20px 10px
position: relative
+media-xs
padding: 25px 0 20px 0
&.list
padding: 15px 10px
margin: 0 25px
+media-xs
width: 100%
padding: 15px 10px
margin: 0
h4.blog_index-title
margin-left: 35px
&.cloud-blog #blog_post-container,
#blog_post-container
.blog_index-item
padding-top: 55px
font-size: .9em

27
src/styles/main.sass Normal file
View File

@@ -0,0 +1,27 @@
@import _normalize
@import _config
@import _utils
// @import attract/_main
@import _comments
@import _project
@import _project-sharing
@import _project-dashboard
@import _user
@import _join
@import _homepage
@import _error
@import _stats
@import _search
@import _base
@import _notifications
/* services, about, etc */
@import _pages
/* CSS comes from fontello.com using static/assets/font/config.json */
@import _font-pillar
@import plugins/_jstree
@import plugins/js_perfectscrollbar
@import plugins/_js_select2

1046
src/styles/plugins/_flowplayer.sass Normal file
View File

File diff suppressed because it is too large Load Diff

147
src/styles/plugins/_js_perfectscrollbar.sass Normal file
View File

@@ -0,0 +1,147 @@
$color-scrollbars-base: lighten($color-background-nav, 25%)
.ps-container
.ps-scrollbar-y
opacity: 0
transition: opacity 150ms ease-in-out
&:hover
.ps-scrollbar-y
opacity: 1
/* perfect-scrollbar v0.6.3 */
.ps-container
-ms-touch-action: none
overflow: hidden !important
.ps-container.ps-active-x > .ps-scrollbar-x-rail,
.ps-container.ps-active-y > .ps-scrollbar-y-rail
display: block
.ps-container > .ps-scrollbar-x-rail
display: none
position: absolute
/* please don't change 'position' */
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
border-radius: 4px
opacity: 0
-webkit-transition: background-color .2s linear, opacity .2s linear
-moz-transition: background-color .2s linear, opacity .2s linear
-o-transition: background-color .2s linear, opacity .2s linear
transition: background-color .2s linear, opacity .2s linear
bottom: 3px
/* there must be 'bottom' for ps-scrollbar-x-rail */
height: 8px
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x
position: absolute
/* please don't change 'position' */
background-color: $color-scrollbars-base
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
border-radius: 4px
-webkit-transition: background-color .2s linear
-moz-transition: background-color .2s linear
-o-transition: background-color .2s linear
transition: background-color .2s linear
bottom: 0
/* there must be 'bottom' for ps-scrollbar-x */
height: 5px
.ps-container > .ps-scrollbar-y-rail
display: none
position: absolute
/* please don't change 'position' */
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
border-radius: 4px
opacity: 0.6
-webkit-transition: background-color .2s linear, opacity .2s linear
-moz-transition: background-color .2s linear, opacity .2s linear
-o-transition: background-color .2s linear, opacity .2s linear
transition: background-color .2s linear, opacity .2s linear
right: 3px
/* there must be 'right' for ps-scrollbar-y-rail */
width: 5px
margin:
top: 5px
bottom: 5px
#project_nav.ps-container > .ps-scrollbar-y-rail
margin-top: $project_header-height + 10
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y
position: absolute
/* please don't change 'position' */
background-color: $color-scrollbars-base
-webkit-border-radius: 4px
-moz-border-radius: 4px
-ms-border-radius: 4px
border-radius: 4px
-webkit-transition: background-color .2s linear
-moz-transition: background-color .2s linear
-o-transition: background-color .2s linear
transition: background-color .2s linear, height .2s linear
right: 0
/* there must be 'right' for ps-scrollbar-y */
width: 5px
.ps-container.ps-in-scrolling
pointer-events: none
&.ps-x
.ps-scrollbar-x-rail
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-x
background-color: rgba($color-scrollbars-base, .2)
&.ps-y
.ps-scrollbar-y-rail
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-y
background-color: rgba($color-scrollbars-base, .2)
.ps-container:hover
.ps-scrollbar-x-rail, .ps-scrollbar-y-rail
opacity: 0.6
&:hover
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-x, .ps-scrollbar-y
background-color: $color-scrollbars-base
&.ps-in-scrolling
pointer-events: none
&.ps-x
.ps-scrollbar-x-rail
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-x
background-color: rgba($color-scrollbars-base, .1)
&.ps-y
.ps-scrollbar-y-rail
background-color: rgba($color-scrollbars-base, .2)
opacity: 0.9
.ps-scrollbar-y
background-color: rgba($color-scrollbars-base, .1)

449
src/styles/plugins/_js_select2.sass Normal file
View File

@@ -0,0 +1,449 @@
.select2-container
box-sizing: border-box
display: inline-block
margin: 0
position: relative
vertical-align: middle
.select2-selection--single
box-sizing: border-box
cursor: pointer
display: block
height: 28px
user-select: none
-webkit-user-select: none
.select2-selection__rendered
display: block
padding-left: 8px
padding-right: 20px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.select2-selection__clear
position: relative
&[dir="rtl"] .select2-selection--single .select2-selection__rendered
padding-right: 8px
padding-left: 20px
.select2-selection--multiple
box-sizing: border-box
cursor: pointer
display: block
min-height: 32px
user-select: none
-webkit-user-select: none
.select2-selection__rendered
display: inline-block
overflow: hidden
padding-left: 8px
text-overflow: ellipsis
white-space: nowrap
.select2-search--inline
float: left
.select2-search__field
box-sizing: border-box
border: none
font-size: 100%
margin-top: 5px
padding: 0
&::-webkit-search-cancel-button
-webkit-appearance: none
.select2-dropdown
background-color: white
border: 1px solid #aaa
border-radius: 4px
box-sizing: border-box
display: block
position: absolute
left: -100000px
width: 100%
z-index: 1051
.select2-results
display: block
.select2-results__options
list-style: none
margin: 0
padding: 0
.select2-results__option
padding: 6px
user-select: none
-webkit-user-select: none
&[aria-selected]
cursor: pointer
.select2-container--open
.select2-dropdown
left: 0
.select2-dropdown--above
border-bottom: none
border-bottom-left-radius: 0
border-bottom-right-radius: 0
.select2-dropdown--below
border-top: none
border-top-left-radius: 0
border-top-right-radius: 0
.select2-search--dropdown
display: block
padding: 4px
.select2-search__field
padding: 4px
width: 100%
box-sizing: border-box
&::-webkit-search-cancel-button
-webkit-appearance: none
&.select2-search--hide
display: none
.select2-close-mask
border: 0
margin: 0
padding: 0
display: block
position: fixed
left: 0
top: 0
min-height: 100%
min-width: 100%
height: auto
width: auto
opacity: 0
z-index: 99
background-color: #fff
filter: alpha(opacity = 0)
.select2-hidden-accessible
border: 0 !important
clip: rect(0 0 0 0) !important
height: 1px !important
margin: -1px !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
width: 1px !important
.select2-container--default
.select2-selection--single
background-color: #fff
border: 1px solid #aaa
border-radius: 4px
.select2-selection__rendered
color: #444
line-height: 28px
.select2-selection__clear
cursor: pointer
float: right
font-weight: bold
.select2-selection__placeholder
color: #999
.select2-selection__arrow
height: 26px
position: absolute
top: 1px
right: 1px
width: 20px
b
border-color: #888 transparent transparent transparent
border-style: solid
border-width: 5px 4px 0 4px
height: 0
left: 50%
margin-left: -4px
margin-top: -2px
position: absolute
top: 50%
width: 0
&[dir="rtl"] .select2-selection--single
.select2-selection__clear
float: left
.select2-selection__arrow
left: 1px
right: auto
&.select2-container--disabled .select2-selection--single
background-color: #eee
cursor: default
.select2-selection__clear
display: none
&.select2-container--open .select2-selection--single .select2-selection__arrow b
border-color: transparent transparent #888 transparent
border-width: 0 4px 5px 4px
.select2-selection--multiple
background-color: white
border: 1px solid #aaa
border-radius: 4px
cursor: text
.select2-selection__rendered
box-sizing: border-box
list-style: none
margin: 0
padding: 0 5px
width: 100%
.select2-selection__placeholder
color: #999
margin-top: 5px
float: left
.select2-selection__clear
cursor: pointer
float: right
font-weight: bold
margin-top: 5px
margin-right: 10px
.select2-selection__choice
background-color: #e4e4e4
border: 1px solid #aaa
border-radius: 4px
cursor: default
float: left
margin-right: 5px
margin-top: 5px
padding: 0 5px
.select2-selection__choice__remove
color: #999
cursor: pointer
display: inline-block
font-weight: bold
margin-right: 2px
&:hover
color: #333
&[dir="rtl"] .select2-selection--multiple
.select2-selection__choice, .select2-selection__placeholder, .select2-search--inline
float: right
.select2-selection__choice
margin-left: 5px
margin-right: auto
.select2-selection__choice__remove
margin-left: 2px
margin-right: auto
&.select2-container--focus .select2-selection--multiple
border: solid $color-text-dark 1px
outline: 0
&.select2-container--disabled
.select2-selection--multiple
background-color: #eee
cursor: default
.select2-selection__choice__remove
display: none
&.select2-container--open
&.select2-container--above
.select2-selection--single, .select2-selection--multiple
border-top-left-radius: 0
border-top-right-radius: 0
&.select2-container--below
.select2-selection--single, .select2-selection--multiple
border-bottom-left-radius: 0
border-bottom-right-radius: 0
.select2-search--dropdown .select2-search__field
border: 1px solid #aaa
.select2-search--inline .select2-search__field
background: transparent
border: none
outline: 0
box-shadow: none
-webkit-appearance: textfield
.select2-results > .select2-results__options
max-height: 200px
overflow-y: auto
.select2-results__option
&[role=group]
padding: 0
&[aria-disabled=true]
color: #999
&[aria-selected=true]
background-color: #ddd
.select2-results__option
padding-left: 1em
.select2-results__group
padding-left: 0
.select2-results__option
margin-left: -1em
padding-left: 2em
.select2-results__option
margin-left: -2em
padding-left: 3em
.select2-results__option
margin-left: -3em
padding-left: 4em
.select2-results__option
margin-left: -4em
padding-left: 5em
.select2-results__option
margin-left: -5em
padding-left: 6em
.select2-results__option--highlighted[aria-selected]
background-color: #5897fb
color: white
.select2-results__group
cursor: default
display: block
padding: 6px
.select2-container--classic
.select2-selection--single
background-color: #f7f7f7
border: 1px solid #aaa
border-radius: 4px
outline: 0
background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%)
background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%)
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%)
background-repeat: repeat-x
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
&:focus
border: 1px solid #5897fb
.select2-selection__rendered
color: #444
line-height: 28px
.select2-selection__clear
cursor: pointer
float: right
font-weight: bold
margin-right: 10px
.select2-selection__placeholder
color: #999
.select2-selection__arrow
background-color: #ddd
border: none
border-left: 1px solid #aaa
border-top-right-radius: 4px
border-bottom-right-radius: 4px
height: 26px
position: absolute
top: 1px
right: 1px
width: 20px
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%)
background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%)
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%)
background-repeat: repeat-x
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
b
border-color: #888 transparent transparent transparent
border-style: solid
border-width: 5px 4px 0 4px
height: 0
left: 50%
margin-left: -4px
margin-top: -2px
position: absolute
top: 50%
width: 0
&[dir="rtl"] .select2-selection--single
.select2-selection__clear
float: left
.select2-selection__arrow
border: none
border-right: 1px solid #aaa
border-radius: 0
border-top-left-radius: 4px
border-bottom-left-radius: 4px
left: 1px
right: auto
&.select2-container--open
.select2-selection--single
border: 1px solid #5897fb
.select2-selection__arrow
background: transparent
border: none
b
border-color: transparent transparent #888 transparent
border-width: 0 4px 5px 4px
&.select2-container--above .select2-selection--single
border-top: none
border-top-left-radius: 0
border-top-right-radius: 0
background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%)
background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%)
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%)
background-repeat: repeat-x
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
&.select2-container--below .select2-selection--single
border-bottom: none
border-bottom-left-radius: 0
border-bottom-right-radius: 0
background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%)
background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%)
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%)
background-repeat: repeat-x
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
.select2-selection--multiple
background-color: white
border: 1px solid #aaa
border-radius: 4px
cursor: text
outline: 0
&:focus
border: 1px solid #5897fb
.select2-selection__rendered
list-style: none
margin: 0
padding: 0 5px
.select2-selection__clear
display: none
.select2-selection__choice
background-color: #e4e4e4
border: 1px solid #aaa
border-radius: 4px
cursor: default
float: left
margin-right: 5px
margin-top: 5px
padding: 0 5px
.select2-selection__choice__remove
color: #888
cursor: pointer
display: inline-block
font-weight: bold
margin-right: 2px
&:hover
color: #555
&[dir="rtl"] .select2-selection--multiple
.select2-selection__choice
float: right
margin-left: 5px
margin-right: auto
.select2-selection__choice__remove
margin-left: 2px
margin-right: auto
&.select2-container--open
.select2-selection--multiple
border: 1px solid #5897fb
&.select2-container--above .select2-selection--multiple
border-top: none
border-top-left-radius: 0
border-top-right-radius: 0
&.select2-container--below .select2-selection--multiple
border-bottom: none
border-bottom-left-radius: 0
border-bottom-right-radius: 0
.select2-search--dropdown .select2-search__field
border: 1px solid #aaa
outline: 0
.select2-search--inline .select2-search__field
outline: 0
box-shadow: none
.select2-dropdown
background-color: white
border: 1px solid transparent
.select2-dropdown--above
border-bottom: none
.select2-dropdown--below
border-top: none
.select2-results > .select2-results__options
max-height: 200px
overflow-y: auto
.select2-results__option
&[role=group]
padding: 0
&[aria-disabled=true]
color: grey
.select2-results__option--highlighted[aria-selected]
background-color: #3875d7
color: white
.select2-results__group
cursor: default
display: block
padding: 6px
&.select2-container--open .select2-dropdown
border-color: #5897fb

267
src/styles/plugins/_jstree.sass Normal file
View File

@@ -0,0 +1,267 @@
/* jsTree overrides */
$tree-color-text: $color-text-light-primary
$tree-color-highlight: white
$tree-color-highlight-background: $color-primary
.jstree-default
font-weight: 400
.jstree-loading
padding: 5px
color: $color-text-light-secondary
.jstree-default-responsive .jstree-anchor
+media-sm
font-weight: normal !important
text-shadow: none !important
.jstree-default .jstree-node
max-width: 100% // Needed for ellipsis on long names
padding: 0 !important
margin: 0 !important
font-weight: 400 !important
color: $tree-color-text
min-height: 12px !important
line-height: 12px !important
+media-xs
width: 100%
.ps-active-y
.jstree-default .jstree-node
max-width: 97%
.jstree-node.jstree-open
background-color: darken($color-background-nav, 2%) !important
.jstree-node.jstree-open > .jstree-anchor:first-of-type
color: white !important
background-color: darken($color-background-nav, 2%) !important
.jstree-default .jstree-node.jstree-open,
.jstree-default .jstree-node.jstree-leaf
// border-left: 2px solid lighten($color-background-nav, 15%) /* Whatever after the top level */
.jstree-default .jstree-node.jstree-closed
// border-left: 2px solid lighten($color-background-nav, 20%) /* Closed Folder */
.jstree-default .jstree-node.jstree-closed .jstree-icon.jstree-ocl,
.jstree-default .jstree-node.jstree-open .jstree-icon.jstree-ocl
position: absolute
z-index: 1
opacity: 0
min-width: 30px
float: left
.jstree-default .jstree-ocl:before
+media-xs
font-weight: bold
font-size: 100%
top: 10%
left: 46%
.jstree-anchor
padding-right: 5px
+media-xs
width: 98%
padding: 0 !important
.jstree-default .jstree-node.jstree-closed .jstree-icon.jstree-ocl + .jstree-anchor,
.jstree-default .jstree-node.jstree-open .jstree-icon.jstree-ocl + .jstree-anchor
padding-left: 28px !important
.jstree .jstree-open > .jstree-children
padding-top: 0 !important
.jstree-default .jstree-anchor /* The text of the last level item */
width: 100%
padding-left: 28px !important
height: inherit !important
line-height: 26px !important
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
border-bottom: thin solid transparent
transition: none
.jstree-default li
transition: none
/* expanded item, like a folder */
.jstree-default .jstree-open > .jstree-ocl,
.jstree-default .jstree-open > .jstree-anchor,
.jstree-default .jstree-open > .jstree-ocl .jstree-icon.jstree-themeicon,
.jstree-default .jstree-open > .jstree-anchor .jstree-icon.jstree-themeicon
color: $tree-color-text !important
/* active item text */
.jstree-default .jstree-clicked,
.jstree-default .jstree-clicked > .jstree-ocl
background-color: transparent !important
border-radius: 0
box-shadow: none
border-bottom: thin solid transparent
// max-width: 95%
.jstree-default .jstree-leaf .jstree-clicked
width: 100% !important
/* hovered text */
.jstree-default .jstree-hovered,
.jstree-default .jstree-open .jstree-hovered,
.jstree-default .jstree-hovered .jstree-icon.jstree-themeicon
color: $tree-color-highlight !important
.jstree-default .jstree-hovered
background-color: rgba($tree-color-highlight, .1) !important
/* active item text + icon */
.jstree-default .jstree-clicked,
.jstree-default .jstree-clicked > .jstree-ocl,
.jstree-default .jstree-clicked .jstree-icon.jstree-themeicon
color: $tree-color-highlight !important
.jstree-leaf[aria-selected='true']
a.jstree-anchor.jstree-clicked
background-color: rgba($tree-color-highlight-background, .5) !important
padding-left: 28px !important
.jstree-default li[aria-selected='true']
a.jstree-anchor
padding-right: 15px
&:after
content: '\e83a'
font-family: 'pillar-font'
color: $tree-color-highlight
position: absolute
right: 7px
top: 1px
li
a.jstree-anchor:after
content: ''
.jstree-default li[aria-expanded='true']
background-color: transparent
a.jstree-anchor.jstree-clicked
background-color: rgba($tree-color-highlight-background, .5) !important
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
background-color: rgba($tree-color-highlight-background, .7) !important
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
background-color: rgba($tree-color-highlight-background, .8) !important
a.jstree-anchor+ul
border:
top: none !important
bottom: none !important
a.jstree-anchor
color: darken($color-text-light-primary, 10%) !important
&.jstree-hovered,
&.jstree-clicked
color: white !important
&+ul
a.jstree-anchor
color: darken($color-text-light-primary, 10%) !important
&.jstree-hovered,
&.jstree-clicked
color: white !important
/* hover an active item */
.jstree-default .jstree-clicked.jstree-hovered,
.jstree-default .jstree-clicked.jstree-hovered .jstree-icon.jstree-themeicon
color: lighten($tree-color-highlight, 5%) !important
box-shadow: none
.jstree-anchor > .jstree-themeicon
margin-right: 10px !important
margin-left: 20px !important
.jstree-default .jstree-hovered,
.jstree-default .jstree-hovered .jstree-ocl
background-color: transparent !important
box-shadow: none
color: white !important
.jstree-default .jstree-hovered
box-shadow: none
.jstree-default .jstree-node,
.jstree-default .jstree-icon
background-image: none !important
position: relative
.jstree-default .jstree-icon /* Folder that you click to collapse/expand */
width: 20px !important
text-align: left !important
background-color: transparent !important
position: absolute
i.jstree-icon.jstree-ocl
height: 26px !important
color: rgba($tree-color-text, .5) !important
+media-xs
height: 40px !important
.jstree-default .jstree-icon:empty
line-height: 26px
left: 5px
.jstree-children .jstree-open i.jstree-icon.jstree-ocl
height: 26px !important
.jstree-anchor > .jstree-themeicon
margin-right: 3px !important
margin-left: 0 !important
color: rgba($tree-color-text, .7) !important
font-size: 95% !important
.jstree-open > .jstree-anchor > .jstree-themeicon
color: $color-primary !important
.jstree-leaf > .jstree-clicked > .jstree-themeicon
color: $color-secondary !important
.jstree-leaf .jstree-icon /* Icon of the files (not nodes) */
opacity: 0
width: 0px !important
.jstree-leaf .jstree-icon.jstree-themeicon
opacity: 1
width: 24px !important
color: lighten($color-text, 30%) !important
&.pi-image
font-size: .85em !important
.jstree .jstree-open > .jstree-children > .jstree-node
padding-left: 15px !important
.jstree-icon:empty
left: 20px !important
// Tweaks for specific icons
&.pi-file-archive
left: 22px !important
&.pi-folder
left: 21px !important
font-size: .9em !important
&.pi-film-thick
left: 22px !important
font-size: .85em !important
.jstree-anchor
border-left: thin solid lighten($color-background-nav, 5%)
/* /jsTree overrides */

19
src/styles/project-main.sass Normal file
View File

@@ -0,0 +1,19 @@
@import _normalize
@import _config
@import _utils
@import _comments
@import _project
@import _project-sharing
@import _project-dashboard
@import _error
@import _base
@import _notifications
@import _search
@import _font-pillar
@import plugins/_jstree
@import plugins/js_perfectscrollbar
@import plugins/_js_select2

213
src/styles/theatre.sass Normal file
View File

@@ -0,0 +1,213 @@
@import _normalize
@import _config
@import _utils
@import _font-pillar
@import _base
@import _comments
@import _notifications
@import plugins/js_perfectscrollbar
$color-theatre-background: #222
$color-theatre-background-light: lighten($color-theatre-background, 5%)
$color-theatre-background-dark: darken($color-theatre-background, 5%)
$theatre-width: 350px
body.theatre,
body.theatre .container-page
background-color: $color-theatre-background
.navbar-transparent
+media-lg
background-color: $color-background-nav
background-image: none
a.navbar-item.info
font-size: 1.4em
.page-content
position: absolute
top: 0
left: 0
right: 0
bottom: 0
display: flex
align-items: center
justify-content: center
.page-body
height: 100%
width: 100%
#theatre-container
display: flex
position: relative
height: 100%
overflow: hidden
#theatre-media
display: flex
align-items: center
justify-content: center
height: 100%
width: 100%
padding: 25px
position: relative
&:hover
ul#theatre-tools
display: block
img
display: block
border: thin solid $color-theatre-background-light
box-shadow: 1px 1px 10px rgba(black, .2)
max-width: 100%
max-height: 100%
height: auto
margin: 0 auto
+position-center-translate
&.zoomed-out
cursor: zoom-in
&.zoomed-in
display: block
padding: 0
img
cursor: zoom-out
position: initial
top: initial
left: initial
transform: initial
height: initial
width: initial
max-width: initial
max-height: initial
ul#theatre-tools
display: none
position: fixed
z-index: 9
bottom: 15px
right: 15px
margin: 0
padding: 0
list-style: none
color: white
background-color: rgba(black, .5)
border-radius: 3px
box-shadow: 0 0 15px rgba(black, .2)
li
display: inline-block
a, span
display: block
padding: 10px
cursor: default
color: white
&:hover a, &:hover span
color: $color-primary
&.download
a
cursor: pointer
&:hover
color: $color-primary
&.disabled
a
cursor: not-allowed
color: $color-text-dark-hint
&.active
background-color: rgba(black, .8)
a, span
color: $color-primary
&.theatre-tool-resize.active span i:before
content: '\e843'
&.with-info
#theatre-media ul#theatre-tools
right: $theatre-width + 15
#theatre-info
right: 0
visibility: visible
position: relative
#comments-container #comments-list .comment-reply-container
.comment-reply-form .comment-reply-field textarea
display: block
#theatre-info
visibility: hidden
width: $theatre-width
min-width: $theatre-width
height: 100%
position: relative
top: 0
right: -$theatre-width
background-color: white
border-left: 2px solid $color-background-nav
transition: right 200ms ease-in-out
position: absolute
.theatre-info-header
border-bottom: thin solid $color-background
padding-bottom: 10px
.theatre-info-title
padding: 20px 10px 5px 20px
font:
size: 1.2em
weight: 500
.theatre-info-user,
.theatre-info-date
display: inline-block
padding: 0 0 0 20px
font-size: .9em
color: $color-text-dark-secondary
ul.theatre-info-details
padding: 10px 20px 0 20px
margin: 0
list-style: none
color: $color-text-dark-primary
li
display: flex
padding: 2px 0
span
display: inline-block
flex: 2
&:first-child
flex: 1
#comments-container
height: 100%
padding: 0 15px
#comments-list
#comments-list-header
#comments-list-title
font-size: 1.2em
.comment-container,
.comment-reply-container
padding-top: 10px
padding-bottom: 10px
.comment-reply-form
.comment-reply-field textarea
display: none
.comment-reply-preview
padding-top: 25px
.comment-reply-meta
.comment-author,
.comment-rules
display: none
button.comment-action-submit
min-width: auto
font-size: .9em

75
src/styles/vrview.sass Normal file
View File

@@ -0,0 +1,75 @@
html, body
background-color: #000
color: #eee
margin: 0px
padding: 0px
position: fixed
overflow: hidden
top: 0
bottom: 0
left: 0
right: 0
.dialog
display: none
align-items: center
justify-content: center
font-family: sans-serif
font-size: 170%
position: absolute
width: 100%
height: 100%
background: rgba(255, 255, 255, 0.2)
-webkit-user-select: none
-moz-user-select: none
user-select: none
&.visible
display: flex
.wrap
padding: 30px 60px
margin: 20px auto
width: 60%
background: rgba(0, 0, 0, 0.8)
border-radius: 5px
h1
margin: 0
a
color: skyblue
&:visited
color: skyblue
#title
-webkit-user-select: none
-moz-user-select: none
user-select: none
position: absolute
top: 10%
width: 100%
font-size: 3em
font-family: 'Dosis'
opacity: 1
-webkit-transition: all 0.3s ease-in-out
-moz-transition: all 0.3s ease-in-out
transition: all 0.3s ease-in-out
margin: 0 0.5rem
&.hidden
opacity: 0
#watermark img
position: fixed
overflow: hidden
left: 0
bottom: 0
opacity: 0.3
width: 24px
height: 24px
padding: 12px
&:hover
opacity: 1
-webkit-filter: drop-shadow(white 0 0 5px)
canvas
cursor: -webkit-grab
&:active
cursor: -webkit-grabbing