Style Project page
This commit is contained in:
brunosimon
File diff suppressed because one or more lines are too long
@@ -52,6 +52,7 @@ body.project
|
|||||||
font-family 'Stellar'
|
font-family 'Stellar'
|
||||||
text-transform uppercase
|
text-transform uppercase
|
||||||
letter-spacing 2px
|
letter-spacing 2px
|
||||||
|
text-decoration none
|
||||||
|
|
||||||
aside.aside
|
aside.aside
|
||||||
position fixed
|
position fixed
|
||||||
@@ -227,6 +228,63 @@ body.project
|
|||||||
border-top 1px solid #515771
|
border-top 1px solid #515771
|
||||||
background rgba(0,0,0,0.2)
|
background rgba(0,0,0,0.2)
|
||||||
|
|
||||||
|
.button-container
|
||||||
|
margin-bottom 5px
|
||||||
|
.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
|
||||||
|
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
|
section.main
|
||||||
position fixed
|
position fixed
|
||||||
@@ -268,4 +326,163 @@ body.project
|
|||||||
left 200px
|
left 200px
|
||||||
right 0
|
right 0
|
||||||
height 30px
|
height 30px
|
||||||
|
line-height 30px
|
||||||
background #4d5b8d
|
background #4d5b8d
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
.content
|
||||||
|
display inline-block
|
||||||
|
|
||||||
|
.path
|
||||||
|
display inline-block
|
||||||
|
margin-right 3px
|
||||||
|
opacity 0.5
|
||||||
|
|
||||||
|
.name
|
||||||
|
display inline-block
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
|
nav.versions-nav
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
width 200px
|
||||||
|
bottom 0
|
||||||
|
background #4d5b8d
|
||||||
|
overflow-y scroll
|
||||||
|
|
||||||
|
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 0
|
||||||
|
bottom 0
|
||||||
|
left 200px
|
||||||
|
overflow-y scroll
|
||||||
|
|
||||||
|
pre
|
||||||
|
position relative
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
|
code
|
||||||
|
line-height 20px
|
||||||
|
font-family monospace
|
||||||
|
|
||||||
|
&.lines
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
width 38px
|
||||||
|
padding 0.5em
|
||||||
|
opacity 0.2
|
||||||
|
|
||||||
|
&.hljs
|
||||||
|
margin-left 38px
|
||||||
|
background none
|
||||||
|
|
||||||
|
&.differences
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 38px
|
||||||
|
padding 0.5em
|
||||||
|
pointer-events none
|
||||||
|
|
||||||
|
.value
|
||||||
|
visibility hidden
|
||||||
|
|
||||||
|
&.inactive
|
||||||
|
display none
|
||||||
|
|
||||||
|
span
|
||||||
|
&.removed
|
||||||
|
display none
|
||||||
|
border 1px solid red
|
||||||
|
|
||||||
|
.value
|
||||||
|
display none
|
||||||
|
|
||||||
|
&.added
|
||||||
|
border 1px solid #b0ea23
|
||||||
|
background rgba(176, 234, 35, 0.1)
|
||||||
|
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ body.projects
|
|||||||
height 920px
|
height 920px
|
||||||
background linear-gradient( 0deg, #323759, #5e50c3 33%, #c9b2cd )
|
background linear-gradient( 0deg, #323759, #5e50c3 33%, #c9b2cd )
|
||||||
|
|
||||||
p,
|
p
|
||||||
ul
|
ul
|
||||||
font-size 14px
|
font-size 14px
|
||||||
line-height 18px
|
line-height 18px
|
||||||
@@ -99,6 +99,7 @@ body.projects
|
|||||||
background rgba(255,255,255,0.2)
|
background rgba(255,255,255,0.2)
|
||||||
text-decoration none
|
text-decoration none
|
||||||
transition background 0.15s
|
transition background 0.15s
|
||||||
|
will-change transform
|
||||||
&:hover
|
&:hover
|
||||||
background rgba(255,255,255,0.30)
|
background rgba(255,255,255,0.30)
|
||||||
|
|
||||||
@@ -135,6 +136,7 @@ body.projects
|
|||||||
color #6c6e7c
|
color #6c6e7c
|
||||||
border-bottom 1px solid #dadada
|
border-bottom 1px solid #dadada
|
||||||
transition background 0.15s
|
transition background 0.15s
|
||||||
|
will-change background
|
||||||
|
|
||||||
.title
|
.title
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s
|
|||||||
.disk.index-2
|
.disk.index-2
|
||||||
.disk.index-1
|
.disk.index-1
|
||||||
.disk.index-0
|
.disk.index-0
|
||||||
.title
|
a.title(href="/")
|
||||||
| Keppler
|
| Keppler
|
||||||
|
|
||||||
|
|
||||||
@@ -59,13 +59,20 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s
|
|||||||
li.folder(ng-repeat="_folder in project.tree.folders",ng-include="'folder_template.html'",ng-class="_folder.active ? 'active' : 'inactive'")
|
li.folder(ng-repeat="_folder in project.tree.folders",ng-include="'folder_template.html'",ng-class="_folder.active ? 'active' : 'inactive'")
|
||||||
|
|
||||||
footer.aside-footer
|
footer.aside-footer
|
||||||
.always-last-version-toggle(ng-click="always_last_version_toggle_click()",ng-class="always_last_version ? 'active' : 'inactive'")
|
.button-container
|
||||||
.switch
|
a.button.switch.always-last-version-toggle(ng-click="always_last_version_toggle_click()",ng-class="always_last_version ? 'active' : 'inactive'",href="#")
|
||||||
|
.switch-icon
|
||||||
|
.bar
|
||||||
|
.disk
|
||||||
| Always last version
|
| Always last version
|
||||||
.show-differences-toggle(ng-click="show_differences_toggle_click()",ng-class="show_differences ? 'active' : 'inactive'")
|
.button-container
|
||||||
.switch
|
a.button.switch.show-differences-toggle(ng-click="show_differences_toggle_click()",ng-class="show_differences ? 'active' : 'inactive'",href="#")
|
||||||
|
.switch-icon
|
||||||
|
.bar
|
||||||
|
.disk
|
||||||
| Show differences
|
| Show differences
|
||||||
.mark-all-as-read(ng-click="mark_all_as_read_click()")
|
.button-container
|
||||||
|
a.button.default.mark-all-as-read(ng-click="mark_all_as_read_click()",href="#")
|
||||||
| Mark all as read
|
| Mark all as read
|
||||||
|
|
||||||
section.main
|
section.main
|
||||||
@@ -74,17 +81,27 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s
|
|||||||
| Choose a file
|
| Choose a file
|
||||||
section.file(ng-if="file")
|
section.file(ng-if="file")
|
||||||
header.file-header
|
header.file-header
|
||||||
|
.content
|
||||||
span.path
|
span.path
|
||||||
| {{file.path.directory}}/
|
| {{file.path.directory}}/
|
||||||
span.name
|
span.name
|
||||||
| {{file.name}}
|
| {{file.name}}
|
||||||
nav.versions-nav
|
nav.versions-nav
|
||||||
a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)",ng-class="_version.active ? 'active' : 'inactive'")
|
a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)",ng-class="_version.active ? 'active' : 'inactive'")
|
||||||
|
.background
|
||||||
|
.content
|
||||||
|
.label
|
||||||
|
| created at
|
||||||
.date
|
.date
|
||||||
| {{_version.date_formated}}
|
| {{_version.date_formated}}
|
||||||
.time-from-now
|
.time-from-now
|
||||||
| {{_version.time_from_now}}
|
| {{_version.time_from_now}}
|
||||||
.differences
|
.differences
|
||||||
|
.label
|
||||||
|
| changes
|
||||||
|
.bar
|
||||||
|
.fill(style="width:{{_version.diff_percent}};")
|
||||||
|
.percent(style="width:{{_version.diff_percent}};")
|
||||||
| {{_version.diff_percent}}
|
| {{_version.diff_percent}}
|
||||||
section.code
|
section.code
|
||||||
pre
|
pre
|
||||||
|
|||||||
Reference in New Issue
Block a user