Implemented most of the styles in scarlet now
This commit is contained in:
parent
31dfc47d5c
commit
59ef1f53f2
@ -5,10 +5,10 @@
|
||||
"Ubuntu"
|
||||
],
|
||||
"styles": [
|
||||
"reset",
|
||||
"font-awesome",
|
||||
"config",
|
||||
"mixins",
|
||||
"libs/reset",
|
||||
"libs/font-awesome",
|
||||
"include/config",
|
||||
"include/mixins",
|
||||
"base",
|
||||
"typography",
|
||||
"layout",
|
||||
|
||||
@ -3,7 +3,7 @@ component Dashboard(posts []*arn.Post)
|
||||
|
||||
.dashboard-widget
|
||||
each post in posts
|
||||
a.dashboard-event.ui.ajax(href=post.Link())
|
||||
a.dashboard-event.ajax(href=post.Link())
|
||||
.dashboard-event-author
|
||||
AvatarNoLink(post.Author())
|
||||
.dashboard-event-text
|
||||
|
||||
@ -1,23 +1,22 @@
|
||||
.dashboard-widget
|
||||
display flex
|
||||
flex-flow column
|
||||
vertical
|
||||
align-items center
|
||||
|
||||
.dashboard-event
|
||||
display flex
|
||||
flex-flow column wrap
|
||||
vertical-wrap
|
||||
ui-element
|
||||
margin-bottom 1rem
|
||||
padding 0.75rem
|
||||
width 100%
|
||||
max-width 700px
|
||||
|
||||
.dashboard-event-author
|
||||
display flex
|
||||
horizontal
|
||||
justify-content center
|
||||
width 100%
|
||||
|
||||
.dashboard-event-text
|
||||
display flex
|
||||
horizontal
|
||||
justify-content center
|
||||
align-items center
|
||||
width 100%
|
||||
@ -10,10 +10,11 @@ component ThreadLink(thread *arn.Thread)
|
||||
.post-author.thread-author
|
||||
Avatar(thread.Author())
|
||||
.thread-content-container
|
||||
.post-content.thread-content
|
||||
.thread-content
|
||||
if thread.Sticky
|
||||
i.fa.fa-thumb-tack.fa-fw.thread-icon
|
||||
a.thread-title.ajax(href="/threads/" + thread.ID)= thread.Title
|
||||
Icon("thumb-tack")
|
||||
a.thread-link-title.ajax(href="/threads/" + thread.ID)= thread.Title
|
||||
.spacer
|
||||
.thread-reply-count= thread.Replies
|
||||
.thread-icons
|
||||
Icon(arn.GetForumIcon(thread.Tags[0]))
|
||||
@ -1,7 +1,7 @@
|
||||
component Thread(thread *arn.Thread, posts []*arn.Post)
|
||||
.thread
|
||||
h2.thread-title= thread.Title
|
||||
|
||||
.thread
|
||||
.posts
|
||||
Postable(thread.ToPostable(), nil, thread.Author().ID)
|
||||
|
||||
|
||||
16
pages/threads/threads.scarlet
Normal file
16
pages/threads/threads.scarlet
Normal file
@ -0,0 +1,16 @@
|
||||
.thread
|
||||
horizontal
|
||||
justify-content center
|
||||
|
||||
.posts
|
||||
vertical
|
||||
width 100%
|
||||
max-width 830px
|
||||
|
||||
.post
|
||||
vertical
|
||||
margin-bottom 1rem
|
||||
|
||||
> 600px
|
||||
.post
|
||||
horizontal
|
||||
@ -21,8 +21,14 @@ a
|
||||
:active
|
||||
transform translateY(3px)
|
||||
|
||||
&.active
|
||||
color link-active-color
|
||||
|
||||
strong
|
||||
font-weight bold
|
||||
|
||||
em
|
||||
font-style italic
|
||||
|
||||
.spacer
|
||||
flex 1
|
||||
@ -1,4 +1,5 @@
|
||||
#content
|
||||
vertical
|
||||
padding content-padding
|
||||
padding-top content-padding-top
|
||||
line-height 1.7em
|
||||
@ -1,26 +1,78 @@
|
||||
.forum-header
|
||||
text-align left
|
||||
margin-bottom 1rem
|
||||
|
||||
.post-content
|
||||
ui-element
|
||||
flex-grow 1
|
||||
padding 0.8rem 1rem
|
||||
position relative
|
||||
|
||||
h1
|
||||
font-size 1.5rem
|
||||
line-height 2em
|
||||
|
||||
h2
|
||||
font-size 1.3rem
|
||||
line-height 2em
|
||||
font-weight normal
|
||||
|
||||
h3
|
||||
font-size 1.1rem
|
||||
line-height 2em
|
||||
font-weight normal
|
||||
|
||||
:hover
|
||||
.post-toolbar
|
||||
opacity 1
|
||||
|
||||
.thread-content
|
||||
horizontal
|
||||
ui-element
|
||||
padding 0.4rem 1rem
|
||||
align-items center
|
||||
|
||||
.thread-link
|
||||
horizontal
|
||||
|
||||
.thread-icons,
|
||||
.thread-reply-count
|
||||
opacity 0.5
|
||||
text-align right
|
||||
font-size 0.9rem
|
||||
|
||||
.thread-reply-count
|
||||
margin-right 0.5rem
|
||||
|
||||
.thread-content-container
|
||||
flex 1
|
||||
vertical
|
||||
justify-content center
|
||||
|
||||
.thread-content
|
||||
horizontal
|
||||
.thread-link-title
|
||||
color text-color
|
||||
|
||||
.forum-tags
|
||||
margin-bottom content-padding
|
||||
margin-bottom 1rem
|
||||
|
||||
.post-author
|
||||
horizontal
|
||||
justify-content center
|
||||
align-items flex-start
|
||||
margin 0.25rem 0.5rem
|
||||
margin-left 0
|
||||
|
||||
// Toolbar
|
||||
|
||||
.post-toolbar
|
||||
horizontal
|
||||
opacity 0
|
||||
position absolute
|
||||
bottom 3px
|
||||
right 0
|
||||
margin-right 0.5rem
|
||||
default-transition
|
||||
|
||||
.post-tool
|
||||
opacity 0.7
|
||||
&:hover
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
i.fa
|
||||
margin-right 0.5em
|
||||
.fa + span,
|
||||
.fa + a
|
||||
margin-left 0.5em
|
||||
@ -3,6 +3,7 @@ text-color = rgb(60, 60, 60)
|
||||
main-color = rgb(248, 165, 130)
|
||||
link-color = rgb(245, 126, 76)
|
||||
link-hover-color = rgb(242, 93, 30)
|
||||
link-active-color = rgb(100, 149, 237)
|
||||
post-highlight-color = rgba(248, 165, 130, 0.7)
|
||||
|
||||
// UI
|
||||
@ -30,7 +31,8 @@ outline-shadow-medium = 0 0 6px rgba(0, 0, 0, 0.13)
|
||||
outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
|
||||
|
||||
// Distances
|
||||
content-padding = 1.5rem
|
||||
content-padding = 1.6rem
|
||||
content-padding-top = 2rem
|
||||
hover-line-size = 2px
|
||||
nav-height = 3.11rem
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
height nav-height
|
||||
overflow hidden
|
||||
background-color nav-color
|
||||
justify-content center
|
||||
// border-bottom ui-border
|
||||
|
||||
.navigation-link
|
||||
@ -34,3 +35,13 @@
|
||||
font-size 1.1em
|
||||
line-height 1em
|
||||
padding 0.75em 1em
|
||||
|
||||
.navigation-text
|
||||
display none
|
||||
|
||||
> 930px
|
||||
#navigation
|
||||
justify-content flex-start
|
||||
|
||||
.navigation-text
|
||||
display inline-block
|
||||
@ -1,101 +0,0 @@
|
||||
.anime-list-container
|
||||
text-align left
|
||||
|
||||
.embedded-anime-list-container
|
||||
.anime-list
|
||||
width calc(100% - 225px - 1em)
|
||||
.anime-list-image
|
||||
display block
|
||||
|
||||
.anime-list
|
||||
list-style-type none
|
||||
margin 0
|
||||
width 100%
|
||||
max-width 750px
|
||||
|
||||
.anime-status-icon
|
||||
margin 0 !important
|
||||
|
||||
.anime-list-image
|
||||
display none
|
||||
position fixed
|
||||
top 50%
|
||||
right calc(16px + 1em)
|
||||
z-index 9999
|
||||
width 225px
|
||||
margin 0
|
||||
padding 0
|
||||
opacity 0
|
||||
border-radius 3px
|
||||
box-shadow 0px 0px 8px rgba(0, 0, 0, 0.4)
|
||||
transform translate(10%, -50%)
|
||||
transition all transitionSpeed ease
|
||||
pointer-events none
|
||||
|
||||
.anime
|
||||
padding 0.25em 0.75em
|
||||
border uiBorder
|
||||
border-radius 3px
|
||||
margin 0.25em 0
|
||||
background uiBackground
|
||||
display flex
|
||||
flex-direction row
|
||||
transition all 200ms ease
|
||||
&:hover
|
||||
background uiHoverBackground
|
||||
.anime-list-image
|
||||
opacity 1
|
||||
transform translate(0, -50%)
|
||||
|
||||
.anime-title
|
||||
.anime-view-link
|
||||
color darken(mainColor, 30%) !important
|
||||
&:hover
|
||||
color rgb(255, 32, 12) !important
|
||||
|
||||
.anime-title
|
||||
flex-grow 0
|
||||
flex-shrink 1
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
overflow hidden
|
||||
|
||||
.spacer
|
||||
flex 1
|
||||
|
||||
.anime-completed
|
||||
.anime-warning
|
||||
.anime-up-to-date
|
||||
.anime-download-link
|
||||
flex 0 0 32px
|
||||
text-align right
|
||||
|
||||
.anime-completed
|
||||
color blue !important
|
||||
opacity 0.25
|
||||
&:hover
|
||||
opacity 0.7
|
||||
|
||||
.anime-warning
|
||||
color red !important
|
||||
opacity 0.2
|
||||
&:hover
|
||||
opacity 0.7
|
||||
|
||||
.anime-up-to-date
|
||||
color green !important
|
||||
opacity 0.7
|
||||
|
||||
.airing-date
|
||||
.episodes-behind
|
||||
flex-grow 0
|
||||
flex-shrink 1
|
||||
opacity 0.5
|
||||
text-align right
|
||||
white-space nowrap
|
||||
|
||||
.episodes-behind
|
||||
&:before
|
||||
content '+'
|
||||
&:after
|
||||
content ''
|
||||
@ -1,105 +0,0 @@
|
||||
html
|
||||
height 100%
|
||||
|
||||
body
|
||||
font-family "Ubuntu", "Trebuchet MS", sans-serif
|
||||
font-size 1.05rem
|
||||
tab-size 4
|
||||
overflow hidden
|
||||
height 100%
|
||||
|
||||
a
|
||||
text-decoration none
|
||||
transition all transitionSpeed ease
|
||||
&:hover
|
||||
text-decoration none
|
||||
&:active
|
||||
transform translateY(3px)
|
||||
|
||||
/*.page
|
||||
height 100vh*/
|
||||
|
||||
section
|
||||
float left
|
||||
width 100%
|
||||
|
||||
.icon-list
|
||||
margin-left 1px !important
|
||||
list-style-type none
|
||||
.fa
|
||||
opacity 0.93
|
||||
|
||||
.powered-by
|
||||
opacity 0.8
|
||||
font-size 0.9em
|
||||
margin-top 1em
|
||||
|
||||
.maintenance
|
||||
width 100%
|
||||
height 100%
|
||||
text-align center
|
||||
padding 1em
|
||||
font-size 3em
|
||||
line-height 1.5em
|
||||
|
||||
.region-block
|
||||
float left
|
||||
width 100%
|
||||
font-size 1.2em
|
||||
padding 1em
|
||||
p
|
||||
text-align center
|
||||
max-width none
|
||||
|
||||
.editor-info
|
||||
max-width 1200px
|
||||
|
||||
// tooltipOffset = -10px
|
||||
//
|
||||
// .tooltip
|
||||
// display inline-block
|
||||
// position relative
|
||||
//
|
||||
// &:after
|
||||
// display inline
|
||||
// content attr(data-tooltip)
|
||||
// opacity 0
|
||||
// transition opacity 250ms ease
|
||||
// background rgb(48, 48, 48)
|
||||
// border-radius 3px
|
||||
// color rgb(255, 255, 255)
|
||||
// // box-shadow 0 0 8px rgba(0, 0, 0, 0.2)
|
||||
// padding 0.3rem 0.75rem
|
||||
// width auto
|
||||
// pointer-events none
|
||||
//
|
||||
// position absolute
|
||||
// left 50%
|
||||
// top tooltipOffset
|
||||
// transform translate(-50%, -100%)
|
||||
// z-index 100
|
||||
//
|
||||
// margin 0
|
||||
//
|
||||
// &:before
|
||||
// content ""
|
||||
// border solid
|
||||
// border-color rgb(60, 60, 60) transparent
|
||||
// border-width 6px 6px 0 6px
|
||||
// opacity 0
|
||||
// transition opacity 250ms ease
|
||||
// pointer-events none
|
||||
// margin 0
|
||||
// padding 0
|
||||
//
|
||||
// position absolute
|
||||
// left 50%
|
||||
// top tooltipOffset
|
||||
// transform translateX(-50%)
|
||||
// z-index 99
|
||||
//
|
||||
// &:hover
|
||||
// &:after
|
||||
// opacity 1
|
||||
// &:before
|
||||
// opacity 1
|
||||
@ -1,91 +0,0 @@
|
||||
html, body
|
||||
color textColor
|
||||
background-color rgb(254, 254, 254)
|
||||
|
||||
a
|
||||
color mainColor
|
||||
&:hover
|
||||
color hoverColor
|
||||
|
||||
#header
|
||||
background-color rgb(245, 245, 245)
|
||||
background-image url("/images/characters/pencil-girl.png")
|
||||
background-repeat no-repeat
|
||||
background-size auto 100%
|
||||
background-position 100% 0%
|
||||
|
||||
#slogan
|
||||
color rgb(120, 120, 120)
|
||||
|
||||
#content
|
||||
background-color transparent
|
||||
|
||||
a
|
||||
color linkColor
|
||||
&:hover
|
||||
color linkHoverColor
|
||||
|
||||
.active
|
||||
color activeLinkColor
|
||||
&:hover
|
||||
color @color
|
||||
|
||||
.navigation-link
|
||||
color rgb(160, 160, 160)
|
||||
&.active
|
||||
&:hover
|
||||
color rgb(80, 80, 80)
|
||||
text-shadow 1px 1px 3px rgba(4, 4, 4, 0.1)
|
||||
|
||||
.saving
|
||||
opacity 0.5 !important
|
||||
|
||||
input[type="text"]
|
||||
input[type="email"]
|
||||
input[type="password"]
|
||||
input[type="url"]
|
||||
input[type="number"]
|
||||
textarea
|
||||
color rgb(32, 32, 32)
|
||||
background-color rgb(255, 255, 255)
|
||||
box-shadow none
|
||||
border 1px solid rgba(0, 0, 0, 0.1)
|
||||
&:focus
|
||||
color rgb(0, 0, 0)
|
||||
box-shadow 0 0 6px alpha(mainColor, 20%)
|
||||
border 1px solid mainColor
|
||||
&:disabled
|
||||
background-color rgb(224, 224, 224)
|
||||
cursor not-allowed
|
||||
|
||||
button
|
||||
select
|
||||
border 1px solid rgb(170, 170, 170)
|
||||
color rgb(32, 32, 32)
|
||||
background linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%)
|
||||
box-shadow 0 0 2px rgb(255, 255, 255), 0 -2px 5px rgba(0, 0, 0, 0.08) inset
|
||||
&:focus
|
||||
color rgb(0, 0, 0)
|
||||
box-shadow 0 0 6px alpha(mainColor, 20%)
|
||||
border 1px solid mainColor
|
||||
|
||||
input[type="submit"]:hover
|
||||
button:hover
|
||||
.button:hover
|
||||
cursor pointer
|
||||
background linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%)
|
||||
text-decoration none
|
||||
|
||||
button[disabled]
|
||||
opacity 0.5
|
||||
&:hover
|
||||
cursor not-allowed
|
||||
color rgb(32, 32, 32)
|
||||
background linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%)
|
||||
|
||||
.user-name
|
||||
a
|
||||
color rgb(16, 16, 16)
|
||||
|
||||
.list-provider-name-highlight
|
||||
color rgb(48, 48, 48)
|
||||
@ -1,28 +0,0 @@
|
||||
textColor = rgb(60, 60, 60)
|
||||
mainColor = rgb(248, 165, 130)
|
||||
hoverColor = darken(mainColor, 10%)
|
||||
linkColor = darken(mainColor, 15%)
|
||||
linkHoverColor = darken(hoverColor, 20%)
|
||||
activeLinkColor = rgb(100, 149, 237)
|
||||
uiBorder = 1px solid rgba(0, 0, 0, 0.1)
|
||||
uiHoverBorder = 1px solid rgba(0, 0, 0, 0.15)
|
||||
uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
|
||||
uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
|
||||
outlineShadowLight = 0 0 6px alpha(black, 0.05)
|
||||
outlineShadowMedium = 0 0 6px alpha(black, 0.13)
|
||||
outlineShadowHeavy = 0 0 6px alpha(black, 0.6)
|
||||
transitionSpeed = 290ms
|
||||
fadeSpeed = 200ms
|
||||
contentPadding = 1.5rem
|
||||
contentPaddingMobile = 1rem
|
||||
|
||||
uiElement()
|
||||
border uiBorder
|
||||
background uiBackground
|
||||
border-radius 3px
|
||||
transition all transitionSpeed ease
|
||||
|
||||
&:hover
|
||||
border uiHoverBorder
|
||||
background uiHoverBackground
|
||||
box-shadow outlineShadowMedium
|
||||
@ -1,108 +0,0 @@
|
||||
p, ul, ol, h3, dl, blockquote, label
|
||||
line-height 1.7em
|
||||
float left
|
||||
width 100%
|
||||
|
||||
p, ul, ol, pre, h2, dl, blockquote, label
|
||||
text-align left
|
||||
margin-top 0.4em
|
||||
margin-bottom 0.4em
|
||||
float left
|
||||
|
||||
p
|
||||
max-width 728px
|
||||
clear both
|
||||
|
||||
dl
|
||||
max-width 728px
|
||||
|
||||
dt
|
||||
font-weight bold
|
||||
font-size 1.4em
|
||||
line-height 2.5em
|
||||
|
||||
dd
|
||||
margin-left 1em
|
||||
margin-bottom 1em
|
||||
|
||||
table
|
||||
float left
|
||||
width 100%
|
||||
|
||||
iframe
|
||||
float left
|
||||
display block
|
||||
margin 0 auto
|
||||
|
||||
pre
|
||||
border 1px solid rgb(128, 128, 128)
|
||||
padding 1em
|
||||
width 100%
|
||||
box-shadow 1px 1px 16px rgba(0, 0, 0, 0.6)
|
||||
color rgb(224, 224, 224)
|
||||
background-color rgb(32, 32, 32)
|
||||
border none
|
||||
border-radius 3px
|
||||
|
||||
pre, code
|
||||
font-family 'Ubuntu Mono', Consolas, monospace
|
||||
|
||||
ul
|
||||
list-style-type square
|
||||
|
||||
ol
|
||||
list-style-type decimal
|
||||
|
||||
ul, ol
|
||||
list-style-position outside
|
||||
padding 0
|
||||
margin-left 1.7em
|
||||
width calc(100% - 1.7em)
|
||||
|
||||
strong
|
||||
font-weight bold
|
||||
|
||||
em
|
||||
font-style italic
|
||||
|
||||
hr
|
||||
clear both
|
||||
height 4px
|
||||
border-bottom 1px dotted #ccc
|
||||
border-left none
|
||||
border-right none
|
||||
border-top none
|
||||
|
||||
img
|
||||
margin 0.5em auto
|
||||
max-width 100%
|
||||
height auto
|
||||
|
||||
i.fa
|
||||
margin-right 0.5em
|
||||
|
||||
table
|
||||
float left
|
||||
width 100%
|
||||
|
||||
th
|
||||
font-size 120%
|
||||
padding 5px 0
|
||||
text-align left
|
||||
|
||||
tr
|
||||
border-bottom-width 1px
|
||||
border-bottom-style solid
|
||||
border-bottom-color rgba(0, 0, 0, 0.05)
|
||||
&:last-child
|
||||
border none
|
||||
|
||||
td
|
||||
padding 0.5em
|
||||
text-align left
|
||||
vertical-align top
|
||||
|
||||
tbody
|
||||
tr
|
||||
&:hover
|
||||
background-color rgba(0, 0, 0, 0.03)
|
||||
@ -1,8 +0,0 @@
|
||||
.embedded-header
|
||||
position fixed
|
||||
left 0
|
||||
bottom 0
|
||||
z-index 1
|
||||
|
||||
.embedded-content
|
||||
margin-bottom 3em
|
||||
@ -1,7 +0,0 @@
|
||||
.fade
|
||||
opacity 1
|
||||
transition opacity fadeSpeed ease
|
||||
will-change opacity
|
||||
|
||||
.fade-out
|
||||
opacity 0
|
||||
@ -1,79 +0,0 @@
|
||||
maxWidth = 560px
|
||||
|
||||
input[type="text"]
|
||||
input[type="email"]
|
||||
input[type="password"]
|
||||
input[type="url"]
|
||||
input[type="number"]
|
||||
button
|
||||
font-family inherit
|
||||
font-size 1rem
|
||||
border-radius 3px
|
||||
transition all transitionSpeed ease
|
||||
margin 0 0 10px
|
||||
padding 0.4em 0.8em
|
||||
width calc(100% - 1.6em)
|
||||
max-width maxWidth
|
||||
float left
|
||||
&:focus
|
||||
outline none
|
||||
&:active
|
||||
transform translateY(3px)
|
||||
|
||||
input[type="submit"]
|
||||
button
|
||||
.button
|
||||
font-family inherit
|
||||
font-size 1em
|
||||
color black
|
||||
padding 0.5em 2em
|
||||
border-radius 3px
|
||||
box-shadow none
|
||||
border none
|
||||
text-align center
|
||||
transition all transitionSpeed ease
|
||||
width 100%
|
||||
max-width none
|
||||
|
||||
textarea
|
||||
float left
|
||||
border 1px solid rgba(0, 0, 0, 0.5)
|
||||
border-radius 3px
|
||||
padding 0.2em 0.4em
|
||||
font-size 1em
|
||||
font-family inherit
|
||||
line-height 1.7em
|
||||
outline none
|
||||
resize vertical
|
||||
overflow auto
|
||||
|
||||
select
|
||||
// Layout
|
||||
float left
|
||||
padding 0.5em
|
||||
padding 5px 10px
|
||||
width 100%
|
||||
max-width 756px
|
||||
|
||||
// Font
|
||||
font-size 1em
|
||||
font-weight normal
|
||||
font-family inherit
|
||||
|
||||
transition all 0.5s ease
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)
|
||||
user-select none
|
||||
border-radius 2px
|
||||
font-size inherit
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
|
||||
.error
|
||||
padding 1em
|
||||
background-color rgb(255, 64, 64)
|
||||
color white
|
||||
border-radius 5px
|
||||
margin-bottom 1em
|
||||
@ -1,128 +0,0 @@
|
||||
#posts
|
||||
display flex
|
||||
flex-flow column
|
||||
flex 1
|
||||
max-width 100%
|
||||
|
||||
.post
|
||||
display flex
|
||||
flex-flow column
|
||||
margin 0.5rem 0
|
||||
|
||||
.post-author
|
||||
text-align center
|
||||
flex-grow 0
|
||||
display flex
|
||||
flex-flow row
|
||||
justify-content center
|
||||
margin-bottom -3px
|
||||
|
||||
img
|
||||
margin 0 !important
|
||||
|
||||
#post-input
|
||||
.post-input
|
||||
width 100%
|
||||
min-height 150px
|
||||
margin 0.5rem 0
|
||||
|
||||
.post-submit
|
||||
margin-top 0.5rem
|
||||
max-width 200px
|
||||
align-items flex-end
|
||||
|
||||
.post-toolbar
|
||||
display flex
|
||||
flex-flow row
|
||||
opacity 0
|
||||
transition opacity 250ms ease
|
||||
position absolute
|
||||
bottom 3px
|
||||
right 0
|
||||
|
||||
.post-save
|
||||
float right
|
||||
&:hover
|
||||
cursor pointer
|
||||
|
||||
.post-input-toolbar
|
||||
display flex
|
||||
flex-flow row
|
||||
|
||||
.post-tool
|
||||
opacity 0.7
|
||||
&:hover
|
||||
cursor pointer
|
||||
opacity 1
|
||||
|
||||
.post-likes
|
||||
opacity 0.4
|
||||
margin-right 0.4em
|
||||
&:before
|
||||
content "+"
|
||||
|
||||
.post-permalink
|
||||
color blue !important
|
||||
|
||||
.post-delete
|
||||
color rgb(255, 32, 12) !important
|
||||
|
||||
.post-like
|
||||
color green !important
|
||||
|
||||
.post-unlike
|
||||
color rgb(255, 32, 12) !important
|
||||
|
||||
.post-content
|
||||
uiElement()
|
||||
text-align left
|
||||
flex-grow 1
|
||||
padding 0.4rem 1rem
|
||||
margin-left 0.3rem
|
||||
border-radius 3px
|
||||
position relative
|
||||
|
||||
&:hover
|
||||
.post-toolbar
|
||||
opacity 1
|
||||
|
||||
h1
|
||||
font-size 1.5rem
|
||||
line-height 2em
|
||||
|
||||
h2
|
||||
font-size 1.3rem
|
||||
line-height 2em
|
||||
font-weight normal
|
||||
|
||||
h3
|
||||
font-size 1.1rem
|
||||
line-height 2em
|
||||
font-weight normal
|
||||
|
||||
.post[data-highlight="true"]
|
||||
.post-content
|
||||
border 2px solid alpha(mainColor, 70%)
|
||||
|
||||
.hidden
|
||||
display none
|
||||
|
||||
.thread
|
||||
display flex
|
||||
flex-flow column
|
||||
align-items center
|
||||
|
||||
.thread-title
|
||||
width auto
|
||||
|
||||
.posts
|
||||
width 100%
|
||||
max-width 830px
|
||||
|
||||
@media only screen and (min-width: 500px)
|
||||
.post
|
||||
flex-flow row
|
||||
justify-content center
|
||||
|
||||
.post-author
|
||||
//
|
||||
@ -1,89 +0,0 @@
|
||||
.grid
|
||||
display flex
|
||||
flex-flow row wrap
|
||||
justify-content center
|
||||
float none !important
|
||||
|
||||
.grid-cell
|
||||
position relative
|
||||
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
|
||||
width 16vw
|
||||
height 9vw
|
||||
min-width 90px
|
||||
min-height 127px
|
||||
max-width 200px
|
||||
max-height 282px
|
||||
border-radius 3px
|
||||
background-size cover
|
||||
background-position 50% 50%
|
||||
|
||||
margin 0.5rem
|
||||
|
||||
&:hover
|
||||
.backside-card
|
||||
transform rotateY(180deg)
|
||||
|
||||
.front
|
||||
opacity 0
|
||||
.back
|
||||
opacity 1
|
||||
// .grid-icon
|
||||
// transform scale(1.3)
|
||||
|
||||
.ui
|
||||
uiElement()
|
||||
|
||||
.scale-out
|
||||
&:hover
|
||||
transform scale(1.02)
|
||||
|
||||
.backside-card
|
||||
width 100%
|
||||
height 100%
|
||||
transition all transitionSpeed ease-in-out
|
||||
|
||||
.front
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
opacity 1
|
||||
transition opacity transitionSpeed ease
|
||||
|
||||
.back
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
opacity 0
|
||||
transition opacity transitionSpeed ease
|
||||
transform rotateY(180deg)
|
||||
|
||||
.grid-anime
|
||||
border none
|
||||
&:hover
|
||||
border none
|
||||
|
||||
.grid-text
|
||||
width 100%
|
||||
height 100%
|
||||
display flex
|
||||
flex-flow column
|
||||
align-items center
|
||||
justify-content center
|
||||
font-size 1rem
|
||||
color rgb(160, 160, 160)
|
||||
|
||||
.grid-icon
|
||||
font-size 2.5rem
|
||||
margin-top 2rem
|
||||
margin-bottom 0.7rem
|
||||
color linkColor
|
||||
|
||||
.grid-image
|
||||
width 100%
|
||||
height 100%
|
||||
margin 0
|
||||
border-radius 3px
|
||||
object-fit cover
|
||||
@ -1,19 +0,0 @@
|
||||
h1
|
||||
display inline-block
|
||||
font-size 3em
|
||||
line-height 3em
|
||||
|
||||
h2
|
||||
font-size 2em
|
||||
line-height 1.5em
|
||||
font-weight bold
|
||||
text-align center
|
||||
width 100%
|
||||
&:first-of-type
|
||||
margin-top 0
|
||||
h3
|
||||
line-height 2em
|
||||
font-size 1.5em
|
||||
font-weight bold
|
||||
text-align left
|
||||
margin-top 0.6em
|
||||
@ -1,86 +0,0 @@
|
||||
#container
|
||||
width 100%
|
||||
height 100%
|
||||
float left
|
||||
overflow-x hidden
|
||||
overflow-y scroll
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 0
|
||||
|
||||
#emergency
|
||||
float left
|
||||
width 100%
|
||||
background-color rgb(255, 32, 32)
|
||||
color black
|
||||
padding 0.7em
|
||||
box-sizing border-box
|
||||
|
||||
#header-container
|
||||
display block
|
||||
float left
|
||||
width 100%
|
||||
height auto
|
||||
background-color transparent
|
||||
|
||||
#header
|
||||
display block
|
||||
margin 0 auto
|
||||
width 100%
|
||||
overflow hidden
|
||||
|
||||
#title, #slogan
|
||||
display block
|
||||
margin 0 auto
|
||||
width calc(100% - 3em)
|
||||
height auto
|
||||
text-align left
|
||||
|
||||
#title
|
||||
padding 1.5em
|
||||
padding-bottom 0.5em
|
||||
text-transform uppercase
|
||||
//letter-spacing 1px
|
||||
//opacity 0
|
||||
letter-spacing 6px
|
||||
h1
|
||||
line-height inherit
|
||||
a
|
||||
text-decoration none
|
||||
|
||||
#slogan
|
||||
padding 1.5em
|
||||
padding-top 0.5em
|
||||
line-height 1.3em
|
||||
|
||||
#content-container
|
||||
display block
|
||||
float left
|
||||
width 100%
|
||||
height auto
|
||||
background-color transparent
|
||||
|
||||
#content
|
||||
width 100%
|
||||
height 100%
|
||||
min-height 100%
|
||||
padding contentPadding
|
||||
line-height 1.7em
|
||||
text-align center
|
||||
display flex
|
||||
flex-flow column
|
||||
& > div
|
||||
width 100%
|
||||
|
||||
.header-logged-in
|
||||
background-image none !important
|
||||
|
||||
.navigation-link-left
|
||||
float left
|
||||
|
||||
.navigation-link-right
|
||||
float right
|
||||
|
||||
.navigation-icon-no-title
|
||||
margin-right 0 !important
|
||||
@ -1,95 +0,0 @@
|
||||
duration = 0.8s
|
||||
size = 24px
|
||||
|
||||
#loading-animation
|
||||
display block
|
||||
position fixed
|
||||
bottom 1.15rem
|
||||
right 1.15rem
|
||||
pointer-events none
|
||||
|
||||
.sk-cube-grid
|
||||
width size
|
||||
height size
|
||||
transform rotateZ(0deg)
|
||||
animation sk-rotate duration infinite linear
|
||||
|
||||
.sk-cube
|
||||
width 33.3%
|
||||
height 33.3%
|
||||
background-color alpha(linkHoverColor, 70%)
|
||||
box-shadow 0 0 size alpha(linkHoverColor, 80%)
|
||||
float left
|
||||
animation sk-cube-grid duration infinite linear
|
||||
border-radius 100%
|
||||
|
||||
.sk-cube5
|
||||
background-color linkHoverColor
|
||||
box-shadow 0 0 size alpha(linkHoverColor, 90%)
|
||||
|
||||
.sk-cube1
|
||||
.sk-cube3
|
||||
.sk-cube7
|
||||
.sk-cube9
|
||||
visibility hidden
|
||||
|
||||
@keyframes sk-cube-grid
|
||||
0%, 100%
|
||||
transform scale3D(0.4, 0.4, 0.4)
|
||||
50%
|
||||
transform scale3D(0.9, 0.9, 0.9)
|
||||
|
||||
@keyframes sk-rotate
|
||||
0%
|
||||
transform rotateZ(0deg)
|
||||
100%
|
||||
transform rotateZ(360deg)
|
||||
|
||||
// Anime list loading
|
||||
.sk-folding-cube
|
||||
margin 20px auto
|
||||
width 40px
|
||||
height 40px
|
||||
position relative
|
||||
transform rotateZ(45deg)
|
||||
.sk-cube
|
||||
float left
|
||||
width 50%
|
||||
height 50%
|
||||
position relative
|
||||
transform scale(1.1)
|
||||
&:before
|
||||
content ''
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
height 100%
|
||||
background-color mainColor
|
||||
animation sk-foldCubeAngle 2.4s infinite linear both
|
||||
transform-origin 100% 100%
|
||||
.sk-cube2
|
||||
transform scale(1.1) rotateZ(90deg)
|
||||
&:before
|
||||
animation-delay 0.3s
|
||||
.sk-cube3
|
||||
transform scale(1.1) rotateZ(180deg)
|
||||
&:before
|
||||
animation-delay 0.6s
|
||||
.sk-cube4
|
||||
transform scale(1.1) rotateZ(270deg)
|
||||
&:before
|
||||
animation-delay 0.9s
|
||||
|
||||
@keyframes sk-foldCubeAngle
|
||||
0%, 10%
|
||||
transform perspective(140px) rotateX(-180deg)
|
||||
opacity 0
|
||||
|
||||
25%, 75%
|
||||
transform perspective(140px) rotateX(0deg)
|
||||
opacity 1
|
||||
|
||||
90%, 100%
|
||||
transform perspective(140px) rotateY(180deg)
|
||||
opacity 0
|
||||
@ -1,67 +0,0 @@
|
||||
@media only screen and (max-width: 1024px)
|
||||
#header
|
||||
background-image none
|
||||
|
||||
@media only screen and (max-width: 930px)
|
||||
#title, #slogan
|
||||
display none
|
||||
|
||||
.navigation-text
|
||||
display none
|
||||
|
||||
.navigation-button i.fa
|
||||
margin-right 0
|
||||
|
||||
.episodes-behind
|
||||
&:before
|
||||
content '+'
|
||||
&:after
|
||||
content ''
|
||||
|
||||
#content
|
||||
padding contentPaddingMobile
|
||||
|
||||
#header
|
||||
text-align center
|
||||
|
||||
#navigation
|
||||
float none
|
||||
display inline-block
|
||||
width auto
|
||||
|
||||
.profile
|
||||
left contentPaddingMobile * -1 !important
|
||||
top contentPaddingMobile * -1 !important
|
||||
min-width calc(100% + 2rem) !important
|
||||
|
||||
@media only screen and (min-width: 1100px)
|
||||
.anime-list-image
|
||||
display block
|
||||
|
||||
@media only screen and (max-width: 560px)
|
||||
#navigation
|
||||
padding 0
|
||||
|
||||
.navigation-link-right
|
||||
display none
|
||||
|
||||
.navigation-button i.fa
|
||||
font-size 1.5em
|
||||
|
||||
// Remove admin icon
|
||||
@media only screen and (max-width: 612px)
|
||||
.navigation-link-right[href='/admin']
|
||||
display none
|
||||
|
||||
@media only screen and (max-width: 320px)
|
||||
.navigation-button i.fa
|
||||
font-size 1.4em
|
||||
|
||||
@media only screen and (max-height: 700px)
|
||||
.anime-list-image
|
||||
top 0.5em
|
||||
transform translate(10%, 0)
|
||||
|
||||
.anime:hover
|
||||
.anime-list-image
|
||||
transform translate(0, 0)
|
||||
@ -1,31 +0,0 @@
|
||||
#navigation
|
||||
width 100%
|
||||
height 100%
|
||||
padding 0 content-padding
|
||||
box-sizing border-box
|
||||
|
||||
.navigation-link
|
||||
display inline-block
|
||||
height 100%
|
||||
text-decoration none
|
||||
position relative
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
margin auto
|
||||
margin-top 0
|
||||
height 3px
|
||||
width 0px
|
||||
default-transition
|
||||
&.active
|
||||
&:hover
|
||||
cursor pointer
|
||||
text-decoration none
|
||||
&:after
|
||||
width 100%
|
||||
background-color rgb(248, 165, 130)
|
||||
|
||||
.navigation-button
|
||||
padding 0.75em 1em
|
||||
font-size 1.1em
|
||||
line-height 1em
|
||||
@ -1,60 +0,0 @@
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, address, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, samp,
|
||||
small, strong, sub, sup, var,
|
||||
b, i,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video, main
|
||||
outline 0
|
||||
border 0
|
||||
font-size 100%
|
||||
font inherit
|
||||
vertical-align baseline
|
||||
background transparent
|
||||
|
||||
html
|
||||
box-sizing border-box
|
||||
|
||||
textarea
|
||||
resize vertical
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section
|
||||
display block
|
||||
|
||||
body
|
||||
line-height 1
|
||||
-webkit-font-smoothing antialiased
|
||||
-moz-osx-font-smoothing grayscale
|
||||
|
||||
ol, ul
|
||||
list-style none
|
||||
|
||||
blockquote, q
|
||||
quotes none
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after
|
||||
content ''
|
||||
content none
|
||||
|
||||
table
|
||||
border-collapse collapse
|
||||
border-spacing 0
|
||||
|
||||
audio, canvas, img, video, input, select
|
||||
vertical-align middle
|
||||
|
||||
:focus
|
||||
outline 0
|
||||
|
||||
*
|
||||
margin 0
|
||||
padding 0
|
||||
box-sizing inherit
|
||||
@ -1,19 +0,0 @@
|
||||
.category
|
||||
flex 1
|
||||
min-width 300px
|
||||
max-width 100%
|
||||
|
||||
.categories
|
||||
display flex
|
||||
flex-flow row wrap
|
||||
|
||||
.field
|
||||
float left
|
||||
width 100%
|
||||
padding 0 0.5em
|
||||
box-sizing border-box
|
||||
|
||||
.value
|
||||
margin-left 0.5em
|
||||
font-weight bold
|
||||
font-size 1.1em
|
||||
@ -1,5 +0,0 @@
|
||||
#staff-info
|
||||
display none
|
||||
float left
|
||||
width 100%
|
||||
text-align left
|
||||
@ -1,33 +0,0 @@
|
||||
avatarSize = 50px
|
||||
|
||||
.user-list
|
||||
width 100%
|
||||
display flex
|
||||
flex-flow row wrap
|
||||
|
||||
.user
|
||||
display block
|
||||
transform scale(1.0)
|
||||
width avatarSize
|
||||
height avatarSize
|
||||
border-radius 100%
|
||||
margin 0.2em
|
||||
&:hover
|
||||
.user-image
|
||||
box-shadow outlineShadowHeavy
|
||||
|
||||
.user-image
|
||||
opacity 0
|
||||
transition all 250ms ease
|
||||
border-radius 100%
|
||||
margin 0 !important
|
||||
width avatarSize
|
||||
height avatarSize
|
||||
object-fit cover
|
||||
|
||||
svg.user-image
|
||||
circle.body, circle.head
|
||||
fill textColor
|
||||
text
|
||||
fill white
|
||||
font-size 0.65rem
|
||||
@ -1,6 +0,0 @@
|
||||
.video-container
|
||||
width 100%
|
||||
|
||||
.video
|
||||
width 100%
|
||||
height 100vh
|
||||
@ -6,3 +6,10 @@ p, h1, h2, h3, h4, h5, h6
|
||||
|
||||
:last-child
|
||||
margin-bottom 0
|
||||
|
||||
h2
|
||||
margin-bottom content-padding
|
||||
|
||||
p > img
|
||||
max-width 100%
|
||||
border-radius 3px
|
||||
@ -2,5 +2,7 @@
|
||||
width 50px
|
||||
height 50px
|
||||
border-radius 100%
|
||||
object-fit cover
|
||||
default-transition
|
||||
outline-shadow-up
|
||||
:hover
|
||||
box-shadow outline-shadow-heavy
|
||||
Loading…
Reference in New Issue
Block a user