Accords-Library-Archive
/
gallery.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
gallery.accords-library.com/client/css/post-list-view.styl

219 lines
6.6 KiB
Stylus
Raw Normal View History

client/home: view featured post, add search form
2016-05-29 10:28:52 +00:00
@import colors
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
.post-list
ul
list-style-type: none
margin: 0
padding: 0
display: flex
align-content: flex-end
flex-wrap: wrap
margin: 0 -0.25em
li
position: relative
flex-grow: 1
margin: 0 0.25em 0.5em 0.25em
display: inline-block
text-align: left
min-width: 10em
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
width: 12vw
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
&:not(.flexbox-dummy)
min-height: 7.5em
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
height: 9vw
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
client/posts: add mass tag
2016-07-05 19:20:28 +00:00
.thumbnail-wrapper
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
display: inline-block
width: 100%
height: 100%
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
line-height: 80%
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
font-size: 80%
color: white
client/posts: change hover border
2016-06-02 21:56:56 +00:00
outline-offset: -3px
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
box-shadow: 0 0 0 1px rgba(0,0,0,0.2)
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
.type, .stats
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
position: absolute
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
bottom: 0.5em
padding: 0.33em 0.5em
background: rgba(0,0,0,0.5)
height: 1em
.type
float: left
left: 0.5em
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
&[data-type=image]
display: none
.stats
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
float: right
right: 0.5em
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
text-align: right
i
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
margin-right: 0.25em
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
.icon:not(:first-of-type)
margin-left: 1em
client/posts: refactor bulk tag editor Extract the state that controls mass tag form in the posts list header to a separate class. It's not exactly a 100% reusable control (the .tpl is shared), but it should greatly simplify reading the JS.
2017-02-11 19:12:44 +00:00
.edit-overlay
client/posts: add mass tag
2016-07-05 19:20:28 +00:00
position: absolute
top: 0.5em
left: 0.5em
client/posts: refactor bulk tag editor Extract the state that controls mass tag form in the posts list header to a separate class. It's not exactly a 100% reusable control (the .tpl is shared), but it should greatly simplify reading the JS.
2017-02-11 19:12:44 +00:00
.tag-flipper
client/posts: add mass tag
2016-07-05 19:20:28 +00:00
display: inline-block
client/posts: refactor bulk tag editor Extract the state that controls mass tag form in the posts list header to a separate class. It's not exactly a 100% reusable control (the .tpl is shared), but it should greatly simplify reading the JS.
2017-02-11 19:12:44 +00:00
padding: 0.5em
box-sizing: border-box
border: 0
client/posts: add mass tag
2016-07-05 19:20:28 +00:00
&:after
client/posts: refactor bulk tag editor Extract the state that controls mass tag form in the posts list header to a separate class. It's not exactly a 100% reusable control (the .tpl is shared), but it should greatly simplify reading the JS.
2017-02-11 19:12:44 +00:00
display: inline-block
width: 1em
height: 1em
text-align: center
line-height: 1em
client/css: change font size declarations to em
2017-12-18 02:35:30 +00:00
font-size: 1.6em
client/posts: refactor bulk tag editor Extract the state that controls mass tag form in the posts list header to a separate class. It's not exactly a 100% reusable control (the .tpl is shared), but it should greatly simplify reading the JS.
2017-02-11 19:12:44 +00:00
&.tagged
background: rgba(0, 230, 0, 0.7)
&:after
color: white
content: '-'
&:not(.tagged)
background: rgba(255, 0, 0, 0.7)
&:after
color: white
content: '+'
&[data-disabled]
background: rgba(200, 200, 200, 0.7)
client/posts: add mass tag
2016-07-05 19:20:28 +00:00
client/posts: add bulk safety editing (#122)
2017-02-11 20:58:18 +00:00
.safety-flipper a
display: inline-block
margin: 0.1em
box-sizing: border-box
border: 0
display: inline-block
width: 1.2em
height: 1.2em
text-align: center
line-height: 1em
client/css: change font size declarations to em
2017-12-18 02:35:30 +00:00
font-size: 1.6em
client/posts: add bulk safety editing (#122)
2017-02-11 20:58:18 +00:00
border: 3px solid
&.safety-safe
background-color: darken($safety-safe, 5%)
border-color: @background-color
&:not(.active)
background-color: alpha(@background-color, 0.3)
&.safety-sketchy
background-color: $safety-sketchy
border-color: @background-color
&:not(.active)
background-color: alpha(@background-color, 0.3)
&.safety-unsafe
background-color: $safety-unsafe
border-color: @background-color
&:not(.active)
background-color: alpha(@background-color, 0.3)
&[data-disabled]
background: rgba(200, 200, 200, 0.7)
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
.thumbnail
background-position: 50% 30%
width: 100%
height: 100%
client/posts: change hover border
2016-06-02 21:56:56 +00:00
outline-offset: -3px
client/css: fix border around active post
2016-06-11 09:27:27 +00:00
client/posts: add border around tagless posts
2016-09-10 09:34:11 +00:00
.thumbnail-wrapper.no-tags
.thumbnail
outline: 4px solid $post-thumbnail-no-tags-border-color
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
&:hover
client/posts: add border around tagless posts
2016-09-10 09:34:11 +00:00
background: $post-thumbnail-border-color
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
.thumbnail
opacity: .9
client/css: fix border around active post
2016-06-11 09:27:27 +00:00
&:hover a, a:active, a:focus
.thumbnail
client/posts: add border around tagless posts
2016-09-10 09:34:11 +00:00
outline: 4px solid $main-color !important
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
.post-list-header
client/css: improve appearance on small screens
2016-08-27 18:08:58 +00:00
white-space: nowrap
text-align: left
client/general: make search box seen by Vimperator
2016-06-08 20:51:26 +00:00
label
client/css: fix lists in comments css inheritance Markdown lists in comments inherited some unwanted CSS rules. The fix is to make the culprit rules apply to more specific elements.
2016-12-22 22:37:30 +00:00
display: none !important
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
form
width: auto
client/css: improve appearance on small screens
2016-08-27 18:08:58 +00:00
margin-bottom: 0.75em
client/posts: add mass tag
2016-07-05 19:20:28 +00:00
*
vertical-align: top
client/css: improve mobile styling
2017-12-16 02:45:51 +00:00
@media (max-width: 1000px)
display: block
client/css: improve appearance on small screens
2016-08-27 18:08:58 +00:00
input
margin-bottom: 0.25em
margin-right: 0.25em
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
input[name=search-text]
width: 25em
client/css: improve mobile styling
2017-12-16 02:45:51 +00:00
@media (max-width: 1000px)
display: block
width: 100%
margin-bottom: 0.5em
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
.append
client/css: improve mobile styling
2017-12-16 02:45:51 +00:00
vertical-align: middle
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
font-size: 0.95em
color: $inactive-link-color
client/posts: add bulk safety editing (#122)
2017-02-11 20:58:18 +00:00
.bulk-edit
client/posts: refactor bulk tag editor Extract the state that controls mass tag form in the posts list header to a separate class. It's not exactly a 100% reusable control (the .tpl is shared), but it should greatly simplify reading the JS.
2017-02-11 19:12:44 +00:00
&:not(.opened)
.close
client/posts: add mass tag
2016-07-05 19:20:28 +00:00
display: none
client/posts: refactor bulk tag editor Extract the state that controls mass tag form in the posts list header to a separate class. It's not exactly a 100% reusable control (the .tpl is shared), but it should greatly simplify reading the JS.
2017-02-11 19:12:44 +00:00
&.opened
client: rename 'mass tag' to 'bulk edit tags' That way other bulk operations will be easier to name. This also changes the privilege name.
2017-02-11 18:50:22 +00:00
.open
client/paging: avoid redrawing header navigation
2016-08-28 16:53:06 +00:00
display: none
client/posts: add bulk safety editing (#122)
2017-02-11 20:58:18 +00:00
&.hidden
display: none
.bulk-edit-tags
client/css: improve mobile styling
2017-12-16 02:45:51 +00:00
&.opened
.hint
@media (max-width: 1000px)
display: block
margin-bottom: 0.5em
client/posts: add bulk safety editing (#122)
2017-02-11 20:58:18 +00:00
&:not(.opened)
[type=text],
.start
display: none
.hint
display: none
client: rename 'mass tag' to 'bulk edit tags' That way other bulk operations will be easier to name. This also changes the privilege name.
2017-02-11 18:50:22 +00:00
input[name=tag]
width: 12em
client/css: improve mobile styling
2017-12-16 02:45:51 +00:00
@media (max-width: 1000px)
display: block
width: 100%
margin-bottom: 0.5em
.append
&.open,
&.hint
@media (max-width: 1000px)
margin-left: 0
client/posts: add bulk safety editing (#122)
2017-02-11 20:58:18 +00:00
.hint
client: rename 'mass tag' to 'bulk edit tags' That way other bulk operations will be easier to name. This also changes the privilege name.
2017-02-11 18:50:22 +00:00
margin-right: 1em
client/css: improve mobile styling
2017-12-16 02:45:51 +00:00
.bulk-edit-safety
.append
@media (max-width: 1000px)
margin-left: 0
client/posts: add proof of concept for post list
2016-06-01 22:07:51 +00:00
client/posts: add safety buttons
2016-06-03 17:12:10 +00:00
.safety
client/css: improve appearance on small screens
2016-08-27 18:08:58 +00:00
margin-right: 0.25em
client/posts: add safety buttons
2016-06-03 17:12:10 +00:00
&.safety-safe
client/posts: add post view (without comments yet)
2016-06-06 18:57:22 +00:00
background-color: $safety-safe
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
client/posts: add safety buttons
2016-06-03 17:12:10 +00:00
&.safety-sketchy
client/posts: add post view (without comments yet)
2016-06-06 18:57:22 +00:00
background-color: $safety-sketchy
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
client/posts: add safety buttons
2016-06-03 17:12:10 +00:00
&.safety-unsafe
client/posts: add post view (without comments yet)
2016-06-06 18:57:22 +00:00
background-color: $safety-unsafe
client/posts: tweak posts list view
2016-06-04 10:22:14 +00:00
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)