brunosimon
529 lines
17 KiB
Stylus
529 lines
17 KiB
Stylus
body.project
|
|
background #31344a
|
|
color #ffffff
|
|
|
|
.label
|
|
font-size 10px
|
|
margin-bottom 2px
|
|
|
|
header
|
|
position relative
|
|
height 80px
|
|
overflow hidden
|
|
|
|
.logo
|
|
position absolute
|
|
top 40px
|
|
left -35px
|
|
|
|
.disks
|
|
.disk
|
|
position absolute
|
|
border-radius 50%
|
|
background #fff
|
|
transform translateX(-50%) translateY(-50%)
|
|
|
|
&.index-0
|
|
width 70px
|
|
height 70px
|
|
background #fff
|
|
&.index-1
|
|
width 140px
|
|
height 140px
|
|
background #666b99
|
|
&.index-2
|
|
width 210px
|
|
height 210px
|
|
background #555980
|
|
&.index-3
|
|
width 280px
|
|
height 280px
|
|
background #474a6b
|
|
&.index-4
|
|
width 350px
|
|
height 350px
|
|
background #3b3e59
|
|
.title
|
|
position absolute
|
|
top 0
|
|
left 80px
|
|
line-height 4px
|
|
font-size 28px
|
|
font-family 'Stellar'
|
|
text-transform uppercase
|
|
letter-spacing 2px
|
|
text-decoration none
|
|
|
|
aside.aside
|
|
position fixed
|
|
top 80px
|
|
left 0
|
|
bottom 0
|
|
width 240px
|
|
|
|
header.aside-header
|
|
position relative
|
|
width 100%
|
|
height 115px
|
|
padding 12px 20px 0 20px
|
|
border-top 1px solid #515771
|
|
border-bottom 1px solid #515771
|
|
background #2c2f42
|
|
|
|
.name
|
|
position absolute
|
|
top 15px
|
|
left 20px
|
|
font-weight bold
|
|
|
|
.details
|
|
text-align right
|
|
|
|
.detail
|
|
margin-bottom 6px
|
|
|
|
.value
|
|
font-weight bold
|
|
|
|
|
|
.aside-tree
|
|
position absolute
|
|
top 115px
|
|
left 0
|
|
bottom 95px
|
|
width calc(100% + 15px)
|
|
overflow-y scroll
|
|
overflow-x scroll
|
|
|
|
nav.files-tree-nav
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
|
|
li
|
|
line-height 24px
|
|
font-size 12px
|
|
cursor pointer
|
|
white-space nowrap
|
|
|
|
.name
|
|
position relative
|
|
display inline-block
|
|
padding-left 20px
|
|
padding-right 6px
|
|
font-smoothing(auto)
|
|
+retina()
|
|
font-smoothing(antialiased)
|
|
|
|
.notif
|
|
display inline-block
|
|
height 12px
|
|
margin 0 2px 0 3px
|
|
padding 0 4px
|
|
line-height 12px
|
|
border-radius 6px
|
|
font-size 8px
|
|
font-smoothing(auto)
|
|
|
|
&.new-file
|
|
background #748bd5
|
|
|
|
&.new-version
|
|
background #ec399e
|
|
line-height 13px
|
|
|
|
> span
|
|
display inline-block
|
|
padding-right 20px
|
|
padding-left 15px * 1
|
|
li > span
|
|
padding-left 15px * 2
|
|
li li > span
|
|
padding-left 15px * 3
|
|
li li li > span
|
|
padding-left 15px * 4
|
|
li li li li > span
|
|
padding-left 15px * 5
|
|
li li li li li > span
|
|
padding-left 15px * 6
|
|
li li li li li li > span
|
|
padding-left 15px * 7
|
|
li li li li li li li > span
|
|
padding-left 15px * 8
|
|
li li li li li li li li > span
|
|
padding-left 15px * 9
|
|
|
|
&.active
|
|
background #4d5b8d
|
|
|
|
i
|
|
position absolute
|
|
top 25%
|
|
left 0
|
|
display block
|
|
width 12px
|
|
height 50%
|
|
background center center no-repeat
|
|
|
|
&.folder
|
|
background-image url('../svg/folder.svg')
|
|
&.folder-active
|
|
background-image url('../svg/folder-active.svg')
|
|
&.js
|
|
background-image url('../svg/js.svg')
|
|
&.html
|
|
background-image url('../svg/html.svg')
|
|
&.sass
|
|
background-image url('../svg/sass.svg')
|
|
&.less
|
|
background-image url('../svg/less.svg')
|
|
&.stylus
|
|
background-image url('../svg/stylus.svg')
|
|
&.css
|
|
background-image url('../svg/css.svg')
|
|
&.php
|
|
background-image url('../svg/php.svg')
|
|
&.json
|
|
background-image url('../svg/json.svg')
|
|
&.jade
|
|
background-image url('../svg/jade.svg')
|
|
&.pug
|
|
background-image url('../svg/pug.svg')
|
|
&.md
|
|
background-image url('../svg/md.svg')
|
|
&.sql
|
|
background-image url('../svg/sql.svg')
|
|
&.apache
|
|
background-image url('../svg/apache.svg')
|
|
&.yml
|
|
background-image url('../svg/yml.svg')
|
|
&.svg
|
|
background-image url('../svg/svg.svg')
|
|
&.font
|
|
background-image url('../svg/font.svg')
|
|
&.image
|
|
background-image url('../svg/image.svg')
|
|
&.video
|
|
background-image url('../svg/video.svg')
|
|
&.audio
|
|
background-image url('../svg/audio.svg')
|
|
&.zip
|
|
background-image url('../svg/zip.svg')
|
|
&.txt
|
|
background-image url('../svg/txt.svg')
|
|
&.coffee
|
|
background-image url('../svg/coffee.svg')
|
|
&.git
|
|
background-image url('../svg/git.svg')
|
|
&.xml
|
|
background-image url('../svg/xml.svg')
|
|
&.twig
|
|
background-image url('../svg/twig.svg')
|
|
&.c
|
|
background-image url('../svg/c.svg')
|
|
&.random
|
|
background-image url('../svg/random.svg')
|
|
|
|
footer.aside-footer
|
|
position absolute
|
|
bottom 0
|
|
left 0
|
|
width 100%
|
|
height 110px
|
|
padding 10px 20px 0 20px
|
|
border-top 1px solid #515771
|
|
background #2c2f42
|
|
|
|
.button-container
|
|
|
|
.button
|
|
&.switch
|
|
display inline-block
|
|
padding 5px 10px 5px 0
|
|
text-decoration none
|
|
|
|
.switch-icon
|
|
display inline-block
|
|
position relative
|
|
top 2px
|
|
width 22px
|
|
height 12px
|
|
margin 0 10px 0 0
|
|
|
|
.bar
|
|
position absolute
|
|
top 2px
|
|
left 0
|
|
width 100%
|
|
height 8px
|
|
background #404a78
|
|
border-radius 4px
|
|
transition background 0.15s
|
|
will-change background
|
|
|
|
.disk
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
background #4f547d
|
|
width 12px
|
|
height 12px
|
|
border-radius 6px
|
|
box-shadow 0px 2px 2px rgba(0,0,0,0.2)
|
|
transition transform 0.15s
|
|
will-change transform
|
|
|
|
&.active
|
|
.switch-icon
|
|
.bar
|
|
background #5965a0
|
|
|
|
.disk
|
|
transform translateX(10px)
|
|
|
|
&.default
|
|
display inline-block
|
|
margin 10px 0
|
|
padding 5px 10px
|
|
background rgba(128,147,232,0.2)
|
|
text-decoration none
|
|
transition background 0.15s
|
|
will-change background
|
|
&:hover
|
|
background rgba(128,147,232,0.30)
|
|
|
|
|
|
section.main
|
|
position fixed
|
|
top 80px
|
|
left 240px
|
|
right 0
|
|
bottom 0
|
|
background #31344a
|
|
|
|
section.big-centered-text
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
height 100%
|
|
border-top 1px solid #515771
|
|
border-left 1px solid #515771
|
|
|
|
.text
|
|
position absolute
|
|
top 50%
|
|
left 0
|
|
width 100%
|
|
text-align center
|
|
color #c6c0d8
|
|
text-transform uppercase
|
|
font-size 20px
|
|
opacity 0.2
|
|
font-weight bold
|
|
|
|
section.file
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
height 100%
|
|
|
|
header.file-header
|
|
position absolute
|
|
top 0
|
|
left 200px
|
|
right 0
|
|
height 30px
|
|
background #4d5b8d
|
|
text-align center
|
|
|
|
.content
|
|
line-height 30px
|
|
display inline-block
|
|
|
|
.path
|
|
display inline-block
|
|
margin-right 3px
|
|
opacity 0.5
|
|
|
|
.name
|
|
display inline-block
|
|
font-weight bold
|
|
|
|
.right-buttons
|
|
position absolute
|
|
top 0
|
|
right 2px
|
|
|
|
.button
|
|
display inline-block
|
|
margin 4px 2px
|
|
padding 5px 10px
|
|
background rgba(128,147,232,0.2)
|
|
text-decoration none
|
|
transition background 0.15s
|
|
will-change background
|
|
&:hover
|
|
background rgba(128,147,232,0.30)
|
|
|
|
nav.versions-nav
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
bottom 0
|
|
width 215px
|
|
padding-bottom 5px
|
|
background #4d5b8d
|
|
overflow-y scroll
|
|
overflow-x hidden
|
|
|
|
a.version
|
|
display block
|
|
position relative
|
|
width 200px
|
|
height 55px
|
|
|
|
.background
|
|
display block
|
|
position absolute
|
|
top 5px
|
|
right 5px
|
|
bottom 0px
|
|
left 5px
|
|
background #404a73
|
|
transition background 0.15s
|
|
will-change background
|
|
|
|
.content
|
|
position absolute
|
|
top 10px
|
|
right 13px
|
|
bottom 10px
|
|
left 10px
|
|
text-align right
|
|
|
|
.date
|
|
font-weight bold
|
|
|
|
.time-from-now
|
|
font-size 10px
|
|
opacity 0.5
|
|
|
|
.differences
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
text-align left
|
|
|
|
.label
|
|
margin-bottom 4px
|
|
|
|
.bar
|
|
display block
|
|
position relative
|
|
width 75px
|
|
height 2px
|
|
margin-bottom 3px
|
|
background rgba(189,202,255,0.25)
|
|
transition background 0.15s
|
|
will-change background
|
|
|
|
.fill
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
height 100%
|
|
background #17f861
|
|
|
|
.percent
|
|
font-size 10px
|
|
color #17f861
|
|
white-space nowrap
|
|
text-align right
|
|
font-smoothing(auto)
|
|
+retina()
|
|
font-smoothing(antialiased)
|
|
|
|
&:hover
|
|
.background
|
|
background #616d9f
|
|
.content
|
|
.differences
|
|
.bar
|
|
background rgba(189,202,255,0.30)
|
|
&.active
|
|
.background
|
|
background #7481b5
|
|
.content
|
|
.differences
|
|
.bar
|
|
background rgba(189,202,255,0.5)
|
|
|
|
section.code
|
|
position absolute
|
|
top 30px
|
|
right -15px
|
|
bottom -15px
|
|
left 200px
|
|
background #31344a
|
|
overflow-y scroll
|
|
overflow-x scroll
|
|
|
|
pre
|
|
position relative
|
|
|
|
code
|
|
line-height 20px
|
|
font-family monospace
|
|
|
|
.lines
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
width 38px
|
|
padding 0.5em
|
|
|
|
.line
|
|
position relative
|
|
|
|
.index
|
|
opacity 0.2
|
|
|
|
.added-icon
|
|
display none
|
|
position absolute
|
|
top 50%
|
|
right -2px
|
|
width 6px
|
|
height 6px
|
|
margin-top -3px
|
|
|
|
.bar
|
|
display block
|
|
position absolute
|
|
background #17f861
|
|
|
|
&.bar-1
|
|
left 2px
|
|
width 2px
|
|
height 100%
|
|
&.bar-2
|
|
top 2px
|
|
width 100%
|
|
height 2px
|
|
|
|
.current
|
|
pre
|
|
code
|
|
display inline-block
|
|
width 999999px
|
|
margin-right 15px
|
|
margin-bottom 15px
|
|
margin-left 38px
|
|
background none
|
|
outline none
|
|
.state-show-differences
|
|
section.main section.file section.code .lines .line.added .added-icon
|
|
display block
|