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'
|
||||
text-transform uppercase
|
||||
letter-spacing 2px
|
||||
text-decoration none
|
||||
|
||||
aside.aside
|
||||
position fixed
|
||||
@@ -227,6 +228,63 @@ body.project
|
||||
border-top 1px solid #515771
|
||||
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
|
||||
position fixed
|
||||
@@ -268,4 +326,163 @@ body.project
|
||||
left 200px
|
||||
right 0
|
||||
height 30px
|
||||
line-height 30px
|
||||
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
|
||||
background linear-gradient( 0deg, #323759, #5e50c3 33%, #c9b2cd )
|
||||
|
||||
p,
|
||||
p
|
||||
ul
|
||||
font-size 14px
|
||||
line-height 18px
|
||||
@@ -99,6 +99,7 @@ body.projects
|
||||
background rgba(255,255,255,0.2)
|
||||
text-decoration none
|
||||
transition background 0.15s
|
||||
will-change transform
|
||||
&:hover
|
||||
background rgba(255,255,255,0.30)
|
||||
|
||||
@@ -135,6 +136,7 @@ body.projects
|
||||
color #6c6e7c
|
||||
border-bottom 1px solid #dadada
|
||||
transition background 0.15s
|
||||
will-change background
|
||||
|
||||
.title
|
||||
display inline-block
|
||||
|
||||
@@ -28,7 +28,7 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s
|
||||
.disk.index-2
|
||||
.disk.index-1
|
||||
.disk.index-0
|
||||
.title
|
||||
a.title(href="/")
|
||||
| Keppler
|
||||
|
||||
|
||||
@@ -59,14 +59,21 @@ 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'")
|
||||
|
||||
footer.aside-footer
|
||||
.always-last-version-toggle(ng-click="always_last_version_toggle_click()",ng-class="always_last_version ? 'active' : 'inactive'")
|
||||
.switch
|
||||
| Always last version
|
||||
.show-differences-toggle(ng-click="show_differences_toggle_click()",ng-class="show_differences ? 'active' : 'inactive'")
|
||||
.switch
|
||||
| Show differences
|
||||
.mark-all-as-read(ng-click="mark_all_as_read_click()")
|
||||
| Mark all as read
|
||||
.button-container
|
||||
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
|
||||
.button-container
|
||||
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
|
||||
.button-container
|
||||
a.button.default.mark-all-as-read(ng-click="mark_all_as_read_click()",href="#")
|
||||
| Mark all as read
|
||||
|
||||
section.main
|
||||
section.no-file(ng-if="!file")
|
||||
@@ -74,18 +81,28 @@ div(ng-controller="ProjectController as controller",ng-init="init('" + project_s
|
||||
| Choose a file
|
||||
section.file(ng-if="file")
|
||||
header.file-header
|
||||
span.path
|
||||
| {{file.path.directory}}/
|
||||
span.name
|
||||
| {{file.name}}
|
||||
.content
|
||||
span.path
|
||||
| {{file.path.directory}}/
|
||||
span.name
|
||||
| {{file.name}}
|
||||
nav.versions-nav
|
||||
a.version(href="#",ng-repeat="_version in file.versions",ng-click="version_click(_version)",ng-class="_version.active ? 'active' : 'inactive'")
|
||||
.date
|
||||
| {{_version.date_formated}}
|
||||
.time-from-now
|
||||
| {{_version.time_from_now}}
|
||||
.differences
|
||||
| {{_version.diff_percent}}
|
||||
.background
|
||||
.content
|
||||
.label
|
||||
| created at
|
||||
.date
|
||||
| {{_version.date_formated}}
|
||||
.time-from-now
|
||||
| {{_version.time_from_now}}
|
||||
.differences
|
||||
.label
|
||||
| changes
|
||||
.bar
|
||||
.fill(style="width:{{_version.diff_percent}};")
|
||||
.percent(style="width:{{_version.diff_percent}};")
|
||||
| {{_version.diff_percent}}
|
||||
section.code
|
||||
pre
|
||||
code.lines
|
||||
|
||||
Reference in New Issue
Block a user