web/notify.moe
Code Issues Pull Requests Activity

Group up existing components into elements

Browse Source
This commit is contained in:
Eduard Urbach
2019-11-19 16:12:52 +09:00
parent dc4fc1410d
commit c542bcdcd6
77 changed files with 291 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
styles/anime-grid.scarlet
View File

@ -1,34 +0,0 @@
.anime-grid
grid
.anime-grid-cell
grid-cell
saturate-up
shadow-up
default-transition
:hover
.image-title,
.anime-grid-add-button
opacity 1
< 450px
.anime-grid-cell
width 71px
height 100px
margin 0.3rem
.anime-grid-cell-hide
opacity 0.05
pointer-events none
.anime-grid-image
grid-image
.anime-grid-add-button
opacity 0
position absolute
top 5px
right 5px
padding 0.25rem
height auto

103
styles/input.scarlet
View File

@ -1,103 +0,0 @@
mixin input-focus
:focus
border 1px solid input-focus-border-color !important
// TODO: Replace with alpha(main-color, 20%) function
box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important
mixin button-hover
:hover,
&.active
cursor pointer
color button-hover-color
background button-hover-background
:active
transform translateY(3px)
input, textarea, button, .button, select
ui-element
font-family inherit
font-size 1em
line-height 1.25em
color text-color
input, textarea, select
input-focus
width 100%
:disabled
ui-disabled
input, select
padding 0.5rem 1rem
input
height input-height
[pattern]
:focus
:invalid
border-color red !important
:valid
border-color green !important
:active
transform translateY(3px)
.color-picker-container
horizontal
.color-picker
ui-element
flex 1
height input-height
margin-right content-padding-half
:hover
cursor pointer
:active
transform translateY(3px)
button, .button
horizontal
padding 0rem 1rem
color button-color
align-items center
pointer-events all
height input-height
button-hover
:disabled
ui-disabled
select
appearance none
-webkit-appearance none
-moz-appearance none
option
color text-color
background bg-color
label
width 100%
padding 0.5rem 0
text-align left
textarea
padding 0.4em 0.8em
line-height 1.5em
min-height 10rem
transition none
.number-input-container
horizontal
button
justify-content center
margin-left 0.2rem
width input-height
height input-height

42
styles/loading.scarlet
View File

@ -1,42 +0,0 @@
const loading-anim-duration = 0.8s
const loading-anim-size = 24px
#loading
position fixed
bottom 1.15rem
right 1.15rem
z-index 1
pointer-events none
.sk-cube-grid
horizontal-wrap
width loading-anim-size
height loading-anim-size
transform rotateZ(0deg)
animation sk-rotate loading-anim-duration infinite linear
.sk-cube
width 33.3%
height 33.3%
background-color loading-anim-color
opacity 0.7
border-radius 100%
animation sk-pulse loading-anim-duration infinite linear
.sk-cube-center
opacity 1.0
.hide
visibility hidden
animation sk-rotate
0%
transform rotateZ(0deg)
100%
transform rotateZ(360deg)
animation sk-pulse
0%, 100%
transform scale3D(0.4, 0.4, 0.4)
50%
transform scale3D(0.9, 0.9, 0.9)

15
styles/mixins/input.scarlet Normal file
View File

@ -0,0 +1,15 @@
mixin input-focus
:focus
border 1px solid input-focus-border-color !important
// TODO: Replace with alpha(main-color, 20%) function
box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important
mixin button-hover
:hover,
&.active
cursor pointer
color button-hover-color
background button-hover-background
:active
transform translateY(3px)

109
styles/post.scarlet
View File

@ -1,109 +0,0 @@
post-content-padding-y = 0.75rem
.post-author
horizontal
justify-content center
align-items flex-start
margin-right post-avatar-text-margin
.post-header
horizontal
horizontal-line-bottom
.post-header-info
flex 1
clip-long-text
.post-action
display flex
align-items center
border none
background none
padding 0
height auto
color hsla(text-color-h, text-color-s, text-color-l, 0.5)
:hover
color link-hover-color
background none
.post-header-action
opacity 0
margin-right 0.5rem
.post-date
color hsla(text-color-h, text-color-s, text-color-l, 0.5)
white-space nowrap
.post-box
ui-element
flex-grow 1
padding 0.75rem 1rem
position relative
overflow hidden
h1, h2, h3
font-weight bold
text-align left
line-height 1.5em
margin 1rem 0
h1
font-size 1.5rem
h2
font-size 1.3rem
h3
font-size 1.1rem
img
max-width 100%
max-height 450px
width 100%
object-fit cover
:hover
.post-header-action
opacity 1
.post-toolbar
horizontal
justify-content flex-end
margin-top typography-margin
padding-top typography-margin
border-top 1px solid reverse-light-color
.post-toolbar-action
margin-left 1rem
[data-like="true"]
color hsla(0, 90%, 50%, 1)
.new-post-actions
justify-content flex-end
opacity 0
height 0
transform translateY(-50%)
transition all transition-speed ease
button
pointer-events none
.new-post-actions-enabled
opacity 1
height auto
margin-bottom 0.75rem
transform translateY(0)
button
pointer-events all
.post-edit-interface
vertical
.post-title-input
margin-bottom post-content-padding-y
.post-text-input
min-height 200px

36
styles/search.scarlet
View File

@ -1,36 +0,0 @@
#search
background transparent
border none !important
box-shadow none !important
font-size 1em
padding 0
width 0
height auto
flex-grow 1
opacity 0.5
-webkit-appearance none
:focus
color link-color
opacity 1.0
::-webkit-search-cancel-button
display none
// Microphone icon
.speech-input
display none
opacity 0
default-transition
:hover
cursor pointer
opacity 1
.speech-input-available
display block
opacity 0.25
.speech-listening
color link-hover-color
opacity 1

33
styles/status-message.scarlet
View File

@ -1,33 +0,0 @@
#status-message
horizontal
position fixed
bottom 0
left 0
width 100%
padding 0.5rem content-padding
pointer-events none
z-index 1000
&.fade-out
z-index 1
#status-message-text
flex 1
text-align center
line-height content-line-height
.status-message-action
color white !important
pointer-events auto !important
display flex
justify-content center
align-items center
margin-left 0.5rem
.error-message
color white
background-color hsl(0, 75%, 50%)
.info-message
color white
background tab-active-background

57
styles/tabs.scarlet
View File

@ -1,57 +0,0 @@
const tab-padding-x = 1rem
.tab
horizontal
align-items center
color text-color
padding 0.5rem tab-padding-x
background-color tab-background
border ui-border
border-left none
white-space nowrap
:hover
color text-color
background-color tab-hover-background
cursor pointer
:active
transform none
&.active
background-color tab-active-background
color tab-active-color
:first-child
border-left ui-border
border-top-left-radius ui-element-border-radius
border-bottom-left-radius ui-element-border-radius
:last-child
border-top-right-radius ui-element-border-radius
border-bottom-right-radius ui-element-border-radius
.tab-count
margin-left typography-margin
opacity 0.5
< 920px
.tab
padding 0.75rem tab-padding-x
.padded-icon
margin-right 0
.tab-text,
.tab-count
display none
.tabs
horizontal
justify-content center
margin content-padding calc(content-padding / 4)
margin-top 0
.tab-groups
horizontal
justify-content center

45
styles/widgets.scarlet
View File

@ -1,45 +0,0 @@
.widget
vertical
flex 1
margin content-padding-half
.widget-section
vertical
width 100%
.widget-section-with-preview
horizontal
.widget-section-preview
display flex
justify-content center
align-items center
margin-left 1rem
img
anime-mini-item-image
.widget-title
horizontal
align-items center
padding-bottom 0.5rem
border-bottom 1px solid rgba(0, 0, 0, 0.1)
// We need !important here to overwrite the h3:first-child rule
margin 1rem 0 !important
.widget-ui-element
vertical-wrap
ui-element
transition border transition-speed ease, background transition-speed ease, transform transition-speed ease, color transition-speed ease
margin-bottom 1rem
padding 0.5rem 1rem
width 100%
// max-width 700px
.widget-form
width 100%
max-width 650px
margin 0 auto
.indent
margin-left 1rem