Everything is scarlet now
This commit is contained in:
parent
fe03d70095
commit
31dfc47d5c
5
.gitignore
vendored
5
.gitignore
vendored
@ -38,4 +38,7 @@ debug
|
||||
/components
|
||||
|
||||
# binaries
|
||||
/notify.moe
|
||||
/notify.moe
|
||||
|
||||
# DB
|
||||
/db
|
||||
@ -1,9 +1,13 @@
|
||||
.anime-section-name
|
||||
font-weight bold
|
||||
|
||||
.anime-header
|
||||
horizontal
|
||||
|
||||
< 800px
|
||||
.anime-header
|
||||
vertical
|
||||
|
||||
.anime-section-name
|
||||
font-weight bold
|
||||
|
||||
.anime-image-container
|
||||
horizontal
|
||||
justify-content center
|
||||
@ -58,8 +62,4 @@
|
||||
object-fit cover
|
||||
default-transition
|
||||
scale-up
|
||||
shadow-up
|
||||
|
||||
< 800px
|
||||
.anime-header
|
||||
vertical
|
||||
shadow-up
|
||||
@ -14,18 +14,17 @@ profile-boot-duration = 2s
|
||||
text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
|
||||
|
||||
default-transition
|
||||
animation-name appear
|
||||
animation-duration transition-speed
|
||||
animation appear transition-speed
|
||||
|
||||
overflow hidden
|
||||
|
||||
// @keyframes appear
|
||||
// 0%
|
||||
// transform rotateX(90deg)
|
||||
// filter opacity(0) saturate(0) blur(10px)
|
||||
// 100%
|
||||
// transform rotateX(0)
|
||||
// filter opacity(1) saturate(1) blur(0)
|
||||
animation appear
|
||||
0%
|
||||
transform rotateX(90deg)
|
||||
filter opacity(0) saturate(0) blur(10px)
|
||||
100%
|
||||
transform rotateX(0)
|
||||
filter opacity(1) saturate(1) blur(0)
|
||||
|
||||
.profile-cover
|
||||
position absolute
|
||||
@ -41,7 +40,7 @@ profile-boot-duration = 2s
|
||||
animation cover-animation profile-boot-duration
|
||||
animation-fill-mode forwards
|
||||
|
||||
@keyframes cover-animation
|
||||
animation cover-animation
|
||||
0%
|
||||
filter brightness(500%) blur(5px)
|
||||
100%
|
||||
|
||||
7
pages/search/search.scarlet
Normal file
7
pages/search/search.scarlet
Normal file
@ -0,0 +1,7 @@
|
||||
#search-container
|
||||
horizontal
|
||||
justify-content center
|
||||
|
||||
#search
|
||||
width 100%
|
||||
max-width 560px
|
||||
@ -3,9 +3,6 @@ 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)
|
||||
header-color = rgb(60, 60, 60)
|
||||
nav-link-color = rgb(160, 160, 160)
|
||||
nav-link-hover-color = rgb(255, 255, 255)
|
||||
post-highlight-color = rgba(248, 165, 130, 0.7)
|
||||
|
||||
// UI
|
||||
@ -13,6 +10,15 @@ ui-border = 1px solid rgba(0, 0, 0, 0.1)
|
||||
ui-hover-border = 1px solid rgba(0, 0, 0, 0.15)
|
||||
ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
|
||||
ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
|
||||
ui-disabled-color = rgb(224, 224, 224)
|
||||
|
||||
// Navigation
|
||||
nav-color = rgb(60, 60, 60)
|
||||
nav-link-color = rgb(160, 160, 160)
|
||||
nav-link-hover-color = rgb(255, 255, 255)
|
||||
// nav-color = rgb(245, 245, 245)
|
||||
// nav-link-color = rgb(160, 160, 160)
|
||||
// nav-link-hover-color = rgb(80, 80, 80)
|
||||
|
||||
// Shadow
|
||||
shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)
|
||||
|
||||
37
styles/forms.scarlet
Normal file
37
styles/forms.scarlet
Normal file
@ -0,0 +1,37 @@
|
||||
input, textarea, button, select
|
||||
font-family inherit
|
||||
font-size 1rem
|
||||
padding 0.4em 0.8em
|
||||
border-radius 3px
|
||||
color text-color
|
||||
default-transition
|
||||
|
||||
input, textarea
|
||||
border ui-border
|
||||
background-color white
|
||||
box-shadow none
|
||||
:focus
|
||||
color black
|
||||
border 1px solid main-color
|
||||
// TODO: Replace with alpha(main-color, 20%) function
|
||||
box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
|
||||
:disabled
|
||||
ui-disabled
|
||||
|
||||
// button, select
|
||||
// ui-element
|
||||
// box-shadow 0 0 2px white, 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
|
||||
// cursor pointer
|
||||
// text-decoration none
|
||||
|
||||
// button[disabled]
|
||||
// opacity 0.5
|
||||
// :hover
|
||||
// cursor not-allowed
|
||||
@ -2,9 +2,6 @@
|
||||
vertical
|
||||
height 100%
|
||||
|
||||
#header
|
||||
background-color header-color
|
||||
|
||||
#content-container
|
||||
flex 1
|
||||
overflow-x hidden
|
||||
|
||||
@ -27,6 +27,10 @@ mixin ui-element
|
||||
background ui-hover-background
|
||||
box-shadow outline-shadow-medium
|
||||
|
||||
mixin ui-disabled
|
||||
background-color ui-disabled-color
|
||||
cursor not-allowed
|
||||
|
||||
mixin light-up
|
||||
filter brightness(0.4) saturate(1)
|
||||
:hover
|
||||
|
||||
@ -3,17 +3,32 @@
|
||||
padding 0 content-padding
|
||||
height nav-height
|
||||
overflow hidden
|
||||
background-color nav-color
|
||||
// border-bottom ui-border
|
||||
|
||||
.navigation-link
|
||||
color nav-link-color
|
||||
|
||||
:after
|
||||
content ""
|
||||
display block
|
||||
height 3px
|
||||
background-color main-color
|
||||
transform scaleX(0)
|
||||
opacity 0
|
||||
default-transition
|
||||
|
||||
:hover,
|
||||
&.active
|
||||
color nav-link-hover-color
|
||||
cursor pointer
|
||||
:after
|
||||
transform scaleX(1.0)
|
||||
opacity 1
|
||||
|
||||
&.active
|
||||
text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5)
|
||||
// text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5)
|
||||
text-shadow 1px 1px 3px rgba(4, 4, 4, 0.1)
|
||||
|
||||
.navigation-button
|
||||
font-size 1.1em
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
p, h1, h2, h3, h4, h5, h6
|
||||
margin 0.4em 0
|
||||
margin 0.4rem 0
|
||||
|
||||
:first-child
|
||||
margin-top 0
|
||||
|
||||
Loading…
Reference in New Issue
Block a user