web/notify.moe
Code Issues Pull Requests Activity

Flat design

Browse Source
This commit is contained in:
Eduard Urbach
2017-06-25 23:07:14 +02:00
parent 9988bf7315
commit da6b250f39
10 changed files with 55 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
styles/base.scarlet
View File

@ -8,6 +8,7 @@ body
overflow hidden
height 100%
color text-color
background-color bg-color
a
color link-color
@ -21,8 +22,8 @@ a
:active
transform translateY(3px)
&.active
color link-active-color
// &.active
// color link-active-color
strong
font-weight bold

30
styles/include/config.scarlet
View File

@ -1,19 +1,28 @@
// Colors
text-color = rgb(60, 60, 60)
main-color = rgb(248, 165, 130)
link-color = rgb(225, 38, 15)
main-color = rgb(225, 38, 15)
link-color = main-color
link-hover-color = rgb(242, 60, 30)
link-active-color = rgb(100, 149, 237)
link-active-color = link-hover-color
post-highlight-color = rgba(248, 165, 130, 0.7)
bg-color = white
bg-color = rgb(246, 246, 246)
// UI
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-background = rgb(254, 254, 254)
ui-hover-background = rgb(255, 255, 255)
// 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)
// Input
input-focus-border-color = rgb(248, 165, 130)
// Button
button-hover-color = link-hover-color
forum-tag-hover-color = rgb(46, 85, 160)
// Forum
forum-width = 830px
@ -21,9 +30,10 @@ forum-width = 830px
avatar-size = 50px
// Navigation
nav-color = rgb(60, 60, 60)
nav-link-color = rgb(160, 160, 160)
nav-link-hover-color = rgb(255, 255, 255)
nav-color = text-color
nav-link-color = rgba(255, 255, 255, 0.5)
nav-link-hover-color = white
nav-link-hover-slide-color = rgb(248, 165, 130)
// nav-color = rgb(245, 245, 245)
// nav-link-color = rgb(160, 160, 160)
// nav-link-hover-color = rgb(80, 80, 80)
@ -40,7 +50,7 @@ outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
// Distances
content-padding = 1.6rem
content-padding-top = 1.6rem
hover-line-size = 2px
hover-line-size = 3px
nav-height = 3.11rem
// Timings

13
styles/input.scarlet
View File

@ -1,7 +1,7 @@
mixin input-focus
:focus
color black
border 1px solid main-color
border 1px solid input-focus-border-color
// TODO: Replace with alpha(main-color, 20%) function
box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
@ -17,12 +17,16 @@ input, textarea
background white
box-shadow none
input-focus
:active
transform translateY(3px)
:disabled
ui-disabled
// We need this to have a selector with a higher priority than .widget-element:focus
input.widget-element
input.widget-element,
textarea.widget-element
input-focus
button, .button
@ -33,10 +37,11 @@ button, .button
padding 0.75rem 1rem
color link-color
:hover
:hover,
&.active
cursor pointer
color white
background-color link-hover-color
background-color button-hover-color
:active
transform translateY(3px)

11
styles/navigation.scarlet
View File

@ -12,8 +12,8 @@
:after
content ""
display block
height 3px
background-color main-color
height hover-line-size
background-color nav-link-hover-slide-color
transform scaleX(0)
opacity 0
default-transition
@ -45,13 +45,16 @@
#search
display none
border-radius 0
background text-color
background transparent
border none
color white
color nav-link-hover-color
font-size 1em
min-width 0
::placeholder
color nav-link-color
:focus
border none
box-shadow none

2
styles/table.scarlet
View File

@ -20,4 +20,4 @@ th
tbody
tr
:hover
background-color rgba(0, 0, 0, 0.03)
background-color rgba(0, 0, 0, 0.015)

2
styles/widgets.scarlet
View File

@ -12,7 +12,7 @@
.widget-element
vertical-wrap
ui-element
transition border transition-speed ease, background transition-speed ease, transform transition-speed ease
transition border transition-speed ease, background transition-speed ease, transform transition-speed ease, transform color ease
margin-bottom 1rem
padding 0.5rem 1rem
width 100%