snuffster/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/css: split into files

Browse source
This commit is contained in:
rr- 2016-08-27 18:19:42 +02:00
parent 702ec3e6fe
commit 514c4349e0
28 changed files with 468 additions and 470 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/css/colors.styl
View file

@ -50,3 +50,6 @@ $note-text-text-color = black
$first-note-point-color = orangered
$hovered-note-point-color = red
$hovered-first-note-point-color = red
$safety-safe = #88D488
$safety-sketchy = #F3D75F
$safety-unsafe = #F3985F

35
client/css/comments.styl → client/css/comment-control.styl
View file

@ -1,12 +1,5 @@
@import colors
.comments>ul
list-style-type: none
margin: 0 0 2em 0
padding: 0
.comment-form-container
&:not(.editing)
.tabs nav
@ -107,7 +100,6 @@
margin: 1em 0
.comment-content
ul
list-style-position: inside
@ -150,30 +142,3 @@
blockquote :last-child
margin-bottom: 0
.global-comment-list
text-align: left
&>ul
list-style-type: none
margin: 1em 0
padding: 0
&>li
display: flex
margin-bottom: 2em
.post-thumbnail
float: left
vertical-align: top
margin-right: 1em
.thumbnail
width: 12em
height: 8em
a
display: inline-block
.comments-container
width: 100%

4
client/css/comment-list-control.styl Normal file
View file

@ -0,0 +1,4 @@
.comments>ul
list-style-type: none
margin: 0 0 2em 0
padding: 0

24
client/css/comment-list-view.styl Normal file
View file

@ -0,0 +1,24 @@
.global-comment-list
text-align: left
&>ul
list-style-type: none
margin: 1em 0
padding: 0
&>li
display: flex
margin-bottom: 2em
.post-thumbnail
float: left
vertical-align: top
margin-right: 1em
.thumbnail
width: 12em
height: 8em
a
display: inline-block
.comments-container
width: 100%

0
client/css/forms.styl → client/css/core-forms.styl
View file

55
client/css/main.styl → client/css/core-general.styl
View file

@ -192,62 +192,7 @@ a .access-key
margin-top: 0 !important
margin-bottom: 0 !important
.pager
nav
.disabled
opacity: .5
.prev span,
.next span
opacity: 0
position: absolute
display: block
width: 0
height: 0
.page
position: relative
.page-header
margin: 0.5em 0.5em 0.5em 0
position: relative
&:before
display: block
content: ''
position: absolute
left: 0
top: 50%
right: 0
height: 3px
background: $top-navigation-color
z-index: 1
span
position: relative
background: white
padding: 0 1em
z-index: 2
/* hack to prevent text from being copied */
[data-pseudo-content]:before {
content: attr(data-pseudo-content)
}
.expander
&.collapsed
margin-bottom: 1em
&>*
display: none
&>header
display: block
header
background: $active-tab-background-color
line-height: 2em
a
padding: 0 0.5em
display: block
color: mix($text-color, $inactive-link-color)
font-size: 120%
i
font-size: 12pt
color: $inactive-link-color
float: right
line-height: 2em
.expander-content
padding: 0.5em 0.5em 2em 0.5em

24
client/css/expander-control.styl Normal file
View file

@ -0,0 +1,24 @@
@import colors
.expander
&.collapsed
margin-bottom: 1em
&>*
display: none
&>header
display: block
header
background: $active-tab-background-color
line-height: 2em
a
padding: 0 0.5em
display: block
color: mix($text-color, $inactive-link-color)
font-size: 120%
i
font-size: 12pt
color: $inactive-link-color
float: right
line-height: 2em
.expander-content
padding: 0.5em 0.5em 2em 0.5em

0
client/css/help.styl → client/css/help-view.styl
View file

0
client/css/home.styl → client/css/home-view.styl
View file

34
client/css/pager.styl Normal file
View file

@ -0,0 +1,34 @@
@import colors
.pager
nav
.disabled
opacity: .5
.prev span,
.next span
opacity: 0
position: absolute
display: block
width: 0
height: 0
.page
position: relative
.page-header
margin: 0.5em 0.5em 0.5em 0
position: relative
&:before
display: block
content: ''
position: absolute
left: 0
top: 50%
right: 0
height: 3px
background: $top-navigation-color
z-index: 1
span
position: relative
background: white
padding: 0 1em
z-index: 2

27
client/css/post-content-control.styl Normal file
View file

@ -0,0 +1,27 @@
.post-container
.post-content.transparency-grid img
background: url('/img/transparency_grid.png')
text-align: center
.post-content
text-align: left
margin: 0 auto
position: relative
img, object, video, .post-overlay
position: absolute
height: 100%
width: 100%
left: 0
right: 0
top: 0
bottom: 0
.post-overlay>*
position: absolute
left: 0
right: 0
top: 0
bottom: 0
width: 100%
height: 100%

163
client/css/posts.styl → client/css/post-list-view.styl
View file

@ -1,49 +1,4 @@
@import colors
$safety-safe = #88D488
$safety-sketchy = #F3D75F
$safety-unsafe = #F3985F
.post-view
width: 100%
display: flex !important
flex-direction: row
>.sidebar
margin-right: 1em
max-width: 20em
min-width: 20em
line-height: 160%
a:active
border: 0
outline: 0
nav.buttons
margin-top: 0
display: flex
flex-wrap: wrap
article
flex: 1 0 33%
a
display: inline-block
width: 100%
padding: 0.3em 0
text-align: center
vertical-align: middle
transition: background 0.2s linear
&:not(.inactive):hover
background: lighten($main-color, 90%)
i
font-size: 140%
text-align: center
>.content
width: 100%
.post-container
margin-bottom: 2em
.post-content
margin: 0
.post-list
ul
@ -183,121 +138,3 @@ $safety-unsafe = #F3985F
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
.post-container
.post-content.transparency-grid img
background: url('/img/transparency_grid.png')
text-align: center
.post-content
text-align: left
margin: 0 auto
position: relative
img, object, video, .post-overlay
position: absolute
height: 100%
width: 100%
left: 0
right: 0
top: 0
bottom: 0
.post-overlay>*
position: absolute
left: 0
right: 0
top: 0
bottom: 0
width: 100%
height: 100%
.post-view .readonly-sidebar
.details
i
margin-right: 0.6em
display: inline-block
width: 1em
text-align: center
.safety-safe
color: $safety-safe
.safety-sketchy
color: $safety-sketchy
.safety-unsafe
color: $safety-unsafe
.upload-info
.thumbnail
width: 1em
height: 1em
margin: -0.1em 0.6em 0 0
.zoom
margin-top: 1em
a
display: inline-block
.active
text-decoration: underline
.social
margin-top: 1em
.score-container
float: left
margin-right: 3em
.downvote i
text-align: right
i
text-align: left
margin: 0
.value
text-align: center
display: inline-block
width: 2em
.relations
margin-top: 2em
h1
margin-bottom: 0.5em
.thumbnail
background-position: 50% 30%
width: 4em
height: 3em
li
margin: 0 0.3em 0.3em 0
display: inline-block
.tags
margin-top: 2em
h1
margin-bottom: 0.5em
.post-view .edit-sidebar
.expander-content
section:not(:last-child)
margin-bottom: 1em
.safety
display: flex
flex-wrap: wrap
label:not(.radio)
width: 100%
.radio
flex-grow: 1
display: inline-block
.management
li
margin: 0
label
margin-bottom: 0.3em
display: block
input[type=submit],
input[type=button],
button
margin-top: 1em
width: 100%
&:focus
border: 2px solid $text-color !important

0
client/css/notes.styl → client/css/post-notes-overlay-control.styl
View file

2
client/css/post-upload.styl
View file

@ -1,6 +1,6 @@
@import colors
.post-upload
#post-upload
form
width: 100%
max-width: 40em

134
client/css/post-view.styl Normal file
View file

@ -0,0 +1,134 @@
@import colors
.post-view
width: 100%
display: flex !important
flex-direction: row
>.sidebar
margin-right: 1em
max-width: 20em
min-width: 20em
line-height: 160%
a:active
border: 0
outline: 0
nav.buttons
margin-top: 0
display: flex
flex-wrap: wrap
article
flex: 1 0 33%
a
display: inline-block
width: 100%
padding: 0.3em 0
text-align: center
vertical-align: middle
transition: background 0.2s linear
&:not(.inactive):hover
background: lighten($main-color, 90%)
i
font-size: 140%
text-align: center
>.content
width: 100%
.post-container
margin-bottom: 2em
.post-content
margin: 0
.post-view .readonly-sidebar
.details
i
margin-right: 0.6em
display: inline-block
width: 1em
text-align: center
.safety-safe
color: $safety-safe
.safety-sketchy
color: $safety-sketchy
.safety-unsafe
color: $safety-unsafe
.upload-info
.thumbnail
width: 1em
height: 1em
margin: -0.1em 0.6em 0 0
.zoom
margin-top: 1em
a
display: inline-block
.active
text-decoration: underline
.social
margin-top: 1em
.score-container
float: left
margin-right: 3em
.downvote i
text-align: right
i
text-align: left
margin: 0
.value
text-align: center
display: inline-block
width: 2em
.relations
margin-top: 2em
h1
margin-bottom: 0.5em
.thumbnail
background-position: 50% 30%
width: 4em
height: 3em
li
margin: 0 0.3em 0.3em 0
display: inline-block
.tags
margin-top: 2em
h1
margin-bottom: 0.5em
.post-view .edit-sidebar
.expander-content
section:not(:last-child)
margin-bottom: 1em
.safety
display: flex
flex-wrap: wrap
label:not(.radio)
width: 100%
.radio
flex-grow: 1
display: inline-block
.management
li
margin: 0
label
margin-bottom: 0.3em
display: block
input[type=submit],
input[type=button],
button
margin-top: 1em
width: 100%
&:focus
border: 2px solid $text-color !important

0
client/css/snapshots.styl → client/css/snapshots-list-view.styl
View file

23
client/css/tag-categories-view.styl Normal file
View file

@ -0,0 +1,23 @@
@import colors
.content-wrapper.tag-categories
width: 100%
max-width: 40em
table
border-spacing: 0
width: 100%
tr.default td
background: $default-tag-category-background-color
td, th
padding: .4em
&.color
text-align: center
&.usages
text-align: center
&.remove, &.set-default
white-space: pre
tfoot
display: none
.messages, form
width: auto

0
client/css/tag-input.styl → client/css/tag-input-control.styl
View file

52
client/css/tag-list-view.styl Normal file
View file

@ -0,0 +1,52 @@
@import colors
.tag-list
table
width: 100%
border-spacing: 0
text-align: left
line-height: 1.3em
tr:hover td
background: $top-navigation-color
th, td
padding: 0.1em 0.5em
th
background: $top-navigation-color
.names
width: 28%
.implications
width: 28%
.suggestions
width: 28%
.usages
text-align: center
width: 8%
.edit-time
text-align: center
width: 8%
white-space: pre
ul
list-style-type: none
margin: 0
padding: 0
display: inline
li
padding: 0
display: inline
&:not(:last-child):after
content: ', '
@media (max-width: 800px)
.implications, .suggestions
display: none
.tag-list-header
label
display: none
text-align: left
form
width: auto
input[name=search-text]
max-width: 15em
.append
font-size: 0.95em
color: $inactive-link-color

33
client/css/tag-view.styl Normal file
View file

@ -0,0 +1,33 @@
#tag
width: 100%
max-width: 40em
h1
word-break: break-all
line-height: 130%
margin-top: 0
form, .messages
width: 100%
.tag-edit
textarea
height: 10em
.tag-summary
section
&.description
margin: 1.5em 0 0 0
&.details
vertical-align: top
padding-right: 0.5em
ul
margin: 0
padding: 0
list-style-type: none
li
display: inline
margin: 0
padding: 0
li:not(:last-of-type):after
content: ', '
ul:empty:after
content: '(none)'
section
margin-bottom: 1em

107
client/css/tags.styl
View file

@ -1,107 +0,0 @@
@import colors
.tag-list
table
width: 100%
border-spacing: 0
text-align: left
line-height: 1.3em
tr:hover td
background: $top-navigation-color
th, td
padding: 0.1em 0.5em
th
background: $top-navigation-color
.names
width: 28%
.implications
width: 28%
.suggestions
width: 28%
.usages
text-align: center
width: 8%
.edit-time
text-align: center
width: 8%
white-space: pre
ul
list-style-type: none
margin: 0
padding: 0
display: inline
li
padding: 0
display: inline
&:not(:last-child):after
content: ', '
@media (max-width: 800px)
.implications, .suggestions
display: none
.tag-list-header
label
display: none
text-align: left
form
width: auto
input[name=search-text]
max-width: 15em
.append
font-size: 0.95em
color: $inactive-link-color
.content-wrapper.tag
width: 100%
max-width: 40em
h1
word-break: break-all
line-height: 130%
margin-top: 0
form, .messages
width: 100%
.tag-edit
textarea
height: 10em
.tag-summary
section
&.description
margin: 1.5em 0 0 0
&.details
vertical-align: top
padding-right: 0.5em
ul
margin: 0
padding: 0
list-style-type: none
li
display: inline
margin: 0
padding: 0
li:not(:last-of-type):after
content: ', '
ul:empty:after
content: '(none)'
section
margin-bottom: 1em
.content-wrapper.tag-categories
width: 100%
max-width: 40em
table
border-spacing: 0
width: 100%
tr.default td
background: $default-tag-category-background-color
td, th
padding: .4em
&.color
text-align: center
&.usages
text-align: center
&.remove, &.set-default
white-space: pre
tfoot
display: none
.messages, form
width: auto

39
client/css/user-list-view.styl Normal file
View file

@ -0,0 +1,39 @@
@import colors
.user-list
ul
list-style-type: none
padding: 0
display: flex
align-content: flex-end
flex-wrap: wrap
margin: 0 -0.5em
li
flex-grow: 1
width: 20em
margin: 0 0.5em 1em 0.5em
padding: 0.75em
vertical-align: top
background: $top-navigation-color
text-align: left
.wrapper
display: flex
.details
font-size: 90%
line-height: 130%
.thumbnail
width: 3em
height: 3em
margin: 0.25em 0.6em 0 0
.user-list-header
label
display: none
text-align: left
form
width: auto
input[name=search-text]
max-width: 15em
.append
font-size: 0.95em
color: $inactive-link-color

24
client/css/user-registration.styl Normal file
View file

@ -0,0 +1,24 @@
@import colors
#user-registration
form
float: left
.info
float: left
margin-left: 3em
border-radius: 0.2em
width: 20em
ul
line-height: 1.8em
list-style-type: none
margin: 0
padding: 0
li
margin: 0
padding: 0
i
margin-right: 0.5em
i.fa
color: $main-color
p:first-child
margin: 0 0 0.5em 0

43
client/css/user-view.styl Normal file
View file

@ -0,0 +1,43 @@
#user
width: 100%
max-width: 35em
nav.text-nav
margin-bottom: 1.5em
#user-summary
.thumbnail
width: 6em
height: 6em
margin: 0 1.5em 1.5em 0
float: left
.basic-info
list-style-type: none
margin: 0
div
clear: both
nav
float: left
width: 45%
margin-right: 1em
#user-edit
form, .messages
width: 100%
.avatar
#avatar-content
float: right
width: 65%
margin-top: .5em
#avatar-radio
float: left
width: 30%
&:after
content: ' '
display: block
height: 1px
clear: both
#user-delete form
width: 100%

106
client/css/users.styl
View file

@ -1,106 +0,0 @@
@import colors
#user-registration
form
float: left
.info
float: left
margin-left: 3em
border-radius: 0.2em
width: 20em
ul
line-height: 1.8em
list-style-type: none
margin: 0
padding: 0
li
margin: 0
padding: 0
i
margin-right: 0.5em
i.fa
color: $main-color
p:first-child
margin: 0 0 0.5em 0
#user
width: 100%
max-width: 35em
nav.text-nav
margin-bottom: 1.5em
#user-summary
.thumbnail
width: 6em
height: 6em
margin: 0 1.5em 1.5em 0
float: left
.basic-info
list-style-type: none
margin: 0
div
clear: both
nav
float: left
width: 45%
margin-right: 1em
#user-edit
form, .messages
width: 100%
.avatar
#avatar-content
float: right
width: 65%
margin-top: .5em
#avatar-radio
float: left
width: 30%
&:after
content: ' '
display: block
height: 1px
clear: both
#user-delete form
width: 100%
.user-list
ul
list-style-type: none
padding: 0
display: flex
align-content: flex-end
flex-wrap: wrap
margin: 0 -0.5em
li
flex-grow: 1
width: 20em
margin: 0 0.5em 1em 0.5em
padding: 0.75em
vertical-align: top
background: $top-navigation-color
text-align: left
.wrapper
display: flex
.details
font-size: 90%
line-height: 130%
.thumbnail
width: 3em
height: 3em
margin: 0.25em 0.6em 0 0
.user-list-header
label
display: none
text-align: left
form
width: auto
input[name=search-text]
max-width: 15em
.append
font-size: 0.95em
color: $inactive-link-color

2
client/html/index.htm
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset='utf-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
<title><!-- configured in the config file --></title>
<link href='/css/app.min.css' rel='stylesheet' type='text/css'/>
<link href='/css/vendor.min.css' rel='stylesheet' type='text/css'/>

2
client/html/post_upload.tpl
View file

@ -1,4 +1,4 @@
<div class='post-upload'>
<div id='post-upload'>
<form>
<div class='dropper-container'></div>

2
client/html/tag.tpl
View file

@ -1,4 +1,4 @@
<div class='content-wrapper tag'>
<div class='content-wrapper' id='tag'>
<h1><%- ctx.tag.names[0] %></h1>
<nav class='buttons'><!--
--><ul><!--