2016-11-29 01:06:00 +09:00
|
|
|
// Colors
|
2018-04-18 14:34:33 +02:00
|
|
|
text-color-h = 0
|
|
|
|
|
text-color-s = 0%
|
|
|
|
|
text-color-l = 23.5%
|
|
|
|
|
text-color = hsl(text-color-h, text-color-s, text-color-l)
|
2018-04-23 16:51:11 +02:00
|
|
|
|
|
|
|
|
bg-color-h = 0
|
|
|
|
|
bg-color-s = 0%
|
|
|
|
|
bg-color-l = 96%
|
|
|
|
|
bg-color = hsl(bg-color-h, bg-color-s, bg-color-l)
|
|
|
|
|
|
|
|
|
|
link-color-h = 7
|
|
|
|
|
link-color-s = 87%
|
|
|
|
|
link-color-l = 45%
|
|
|
|
|
link-color = hsl(link-color-h, link-color-s, link-color-l)
|
|
|
|
|
|
2018-07-19 14:10:43 +09:00
|
|
|
link-hover-color-l = calc(link-color-l + 8%)
|
2018-04-23 16:51:11 +02:00
|
|
|
link-hover-color = hsl(link-color-h, link-color-s, link-hover-color-l)
|
|
|
|
|
|
2017-06-25 23:07:14 +02:00
|
|
|
link-active-color = link-hover-color
|
2017-10-07 10:01:55 +02:00
|
|
|
pro-color = hsla(0, 100%, 73%, 0.87)
|
2017-11-04 08:45:39 +01:00
|
|
|
anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
|
2017-11-30 17:57:31 +01:00
|
|
|
reverse-light-color = rgba(0, 0, 0, 0.05)
|
|
|
|
|
reverse-light-hover-color = rgba(0, 0, 0, 0.1)
|
2018-03-08 17:36:55 +01:00
|
|
|
reverse-light-lite-color = rgba(0, 0, 0, 0.02)
|
2016-11-29 01:06:00 +09:00
|
|
|
|
2017-11-03 18:10:31 +01:00
|
|
|
theme-white = bg-color
|
|
|
|
|
theme-black = text-color
|
|
|
|
|
link-hover-text-shadow = none
|
2017-11-04 17:11:47 +01:00
|
|
|
tab-active-text-shadow = none
|
2017-11-03 18:10:31 +01:00
|
|
|
|
2016-11-30 00:50:50 +09:00
|
|
|
// UI
|
2017-06-26 15:17:53 +02:00
|
|
|
ui-border-color = rgba(0, 0, 0, 0.1)
|
2017-06-26 20:37:04 +02:00
|
|
|
ui-border = 1px solid ui-border-color
|
2017-06-26 15:17:53 +02:00
|
|
|
ui-hover-border-color = rgba(0, 0, 0, 0.15)
|
2017-10-20 02:43:02 +02:00
|
|
|
ui-hover-border = 1px solid ui-hover-border-color
|
2018-04-23 16:51:11 +02:00
|
|
|
|
|
|
|
|
ui-background-l = 99.5%
|
|
|
|
|
ui-background = hsl(bg-color-h, bg-color-s, ui-background-l)
|
|
|
|
|
|
2017-06-26 15:17:53 +02:00
|
|
|
// ui-hover-background = rgb(254, 254, 254)
|
2017-06-25 23:07:14 +02:00
|
|
|
// 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%)
|
2016-12-02 00:27:53 +09:00
|
|
|
ui-disabled-color = rgb(224, 224, 224)
|
2018-03-27 21:08:26 +02:00
|
|
|
const ui-element-border-radius = 3px
|
2016-12-02 00:27:53 +09:00
|
|
|
|
2017-06-25 23:07:14 +02:00
|
|
|
// Input
|
2018-04-20 00:06:13 +02:00
|
|
|
input-height = 2.5rem
|
2017-06-25 23:07:14 +02:00
|
|
|
input-focus-border-color = rgb(248, 165, 130)
|
|
|
|
|
|
|
|
|
|
// Button
|
2018-04-23 16:51:11 +02:00
|
|
|
button-color = link-color
|
2017-11-03 09:34:21 +01:00
|
|
|
button-hover-color = white
|
|
|
|
|
button-hover-background = link-hover-color
|
2018-04-23 16:51:11 +02:00
|
|
|
|
|
|
|
|
// Tab
|
2017-11-04 17:11:47 +01:00
|
|
|
tab-background = rgba(0, 0, 0, 0.02)
|
|
|
|
|
tab-hover-background = bg-color
|
2017-11-04 08:45:39 +01:00
|
|
|
tab-active-color = white
|
|
|
|
|
tab-active-background = hsl(216, 68%, 42%)
|
|
|
|
|
// tab-active-background = rgb(46, 85, 160)
|
2017-06-25 23:07:14 +02:00
|
|
|
|
2017-11-05 06:56:09 +01:00
|
|
|
sidebar-background = rgba(0, 0, 0, 0.03)
|
|
|
|
|
sidebar-opaque-background = ui-background
|
|
|
|
|
|
2017-06-20 15:46:49 +02:00
|
|
|
// Forum
|
2017-06-27 00:35:46 +02:00
|
|
|
post-highlight-color = rgba(248, 165, 130, 0.7)
|
2018-11-23 11:14:12 +09:00
|
|
|
const forum-width = 830px
|
|
|
|
|
const forum-thread-width = forum-width
|
2018-11-23 11:32:47 +09:00
|
|
|
const comment-width = 600px
|
2018-11-23 11:14:12 +09:00
|
|
|
const activity-width = comment-width
|
|
|
|
|
const group-post-width = comment-width
|
|
|
|
|
const post-avatar-text-margin = 0.5rem
|
2017-06-20 15:46:49 +02:00
|
|
|
|
2017-06-08 01:14:45 +02:00
|
|
|
// Avatar
|
|
|
|
|
avatar-size = 50px
|
|
|
|
|
|
2018-02-28 16:26:49 +01:00
|
|
|
// Badge
|
|
|
|
|
badge-important-bg-color = rgb(215, 38, 15)
|
2018-02-28 23:26:06 +01:00
|
|
|
badge-important-hover-bg-color = rgb(242, 60, 30)
|
2018-02-28 16:26:49 +01:00
|
|
|
badge-important-text-color = white
|
|
|
|
|
|
2018-01-17 23:30:55 +01:00
|
|
|
// Quote
|
|
|
|
|
quote-color = hsl(0, 0%, 45%)
|
|
|
|
|
quote-side-border-color = quote-color
|
|
|
|
|
|
2017-11-04 22:50:05 +01:00
|
|
|
// Forum
|
2018-11-15 12:42:10 +09:00
|
|
|
like-color = green
|
|
|
|
|
unlike-color = rgb(255, 32, 12)
|
|
|
|
|
delete-color = unlike-color
|
|
|
|
|
permalink-color = blue
|
2017-11-05 06:56:09 +01:00
|
|
|
|
|
|
|
|
table-row-hover-background = hsla(0, 0%, 0%, 0.01)
|
|
|
|
|
anime-list-item-name-color = link-color
|
2017-11-04 22:50:05 +01:00
|
|
|
|
2018-03-08 17:36:55 +01:00
|
|
|
// Calendar
|
|
|
|
|
calendar-hover-color = rgba(255, 255, 255, 0.4)
|
|
|
|
|
calendar-entry-seen-background = ui-background
|
|
|
|
|
calendar-entry-seen-hover-background = ui-background
|
|
|
|
|
|
2017-07-04 16:13:20 +02:00
|
|
|
// Tables
|
2018-04-17 18:20:53 +02:00
|
|
|
table-width-normal = 1100px
|
2017-07-04 16:13:20 +02:00
|
|
|
|
2018-03-04 16:53:42 +01:00
|
|
|
// Feature cards
|
2018-04-07 16:32:37 +02:00
|
|
|
const feature-card-saturation = 83%
|
|
|
|
|
const feature-card-lightness = 47%
|
|
|
|
|
|
|
|
|
|
feature-card-color = hsl(348, feature-card-saturation, feature-card-lightness)
|
|
|
|
|
feature-card-alternative-color = hsl(203, feature-card-saturation, feature-card-lightness)
|
2018-03-04 16:53:42 +01:00
|
|
|
feature-card-icon-color = white
|
|
|
|
|
|
2018-04-21 13:00:57 +02:00
|
|
|
// Tooltips
|
|
|
|
|
tip-bg-color = white
|
|
|
|
|
|
2017-06-26 23:41:16 +02:00
|
|
|
// Loading animation
|
2018-04-23 16:51:11 +02:00
|
|
|
loading-anim-color = hsl(18, 89%, 74%)
|
2017-06-26 23:41:16 +02:00
|
|
|
|
2016-11-30 21:33:11 +09:00
|
|
|
// Shadow
|
|
|
|
|
shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)
|
2016-12-01 00:29:36 +09:00
|
|
|
shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.13)
|
2016-11-30 21:33:11 +09:00
|
|
|
|
2016-11-30 00:50:50 +09:00
|
|
|
// Outline shadow
|
2016-12-01 00:29:36 +09:00
|
|
|
outline-shadow-light = 0 0 6px rgba(0, 0, 0, 0.05)
|
|
|
|
|
outline-shadow-medium = 0 0 6px rgba(0, 0, 0, 0.13)
|
|
|
|
|
outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
|
2016-11-30 00:50:50 +09:00
|
|
|
|
2016-11-29 01:06:00 +09:00
|
|
|
// Distances
|
2018-03-20 04:05:54 +01:00
|
|
|
const content-padding = 1.6rem
|
2018-11-21 16:43:41 +09:00
|
|
|
const content-padding-half = calc(content-padding / 2)
|
2018-11-22 16:52:29 +09:00
|
|
|
const content-padding-negative = calc(content-padding * -1)
|
2018-03-20 04:05:54 +01:00
|
|
|
const content-line-height = 1.7em
|
|
|
|
|
const typography-margin = 0.4rem
|
2018-04-20 10:55:58 +02:00
|
|
|
const media-bottom-margin = 2rem
|
2018-03-20 04:05:54 +01:00
|
|
|
|
|
|
|
|
// Sizes
|
2018-03-22 20:15:21 +01:00
|
|
|
const anime-image-tiny-width = 39px
|
|
|
|
|
const anime-image-tiny-height = 39px
|
|
|
|
|
|
|
|
|
|
const anime-image-small-width = 55px
|
|
|
|
|
const anime-image-small-height = 78px
|
|
|
|
|
|
|
|
|
|
const anime-image-medium-width = 142px
|
|
|
|
|
const anime-image-medium-height = 200px
|
|
|
|
|
|
2018-03-20 04:05:54 +01:00
|
|
|
const anime-image-large-width = 250px
|
2018-03-20 05:46:28 +01:00
|
|
|
const anime-image-large-height = 350px
|
2016-11-29 01:06:00 +09:00
|
|
|
|
2018-07-08 00:40:21 +09:00
|
|
|
const character-image-small-width = 56px
|
|
|
|
|
const character-image-small-height = 56px
|
|
|
|
|
|
|
|
|
|
const grid-cell-margin = 0.5rem
|
|
|
|
|
|
2018-07-08 14:01:54 +09:00
|
|
|
const user-pro-icon-size = 1.1rem
|
|
|
|
|
|
2018-12-10 13:42:29 +09:00
|
|
|
const amv-large-width = 854px
|
|
|
|
|
|
2016-11-29 01:06:00 +09:00
|
|
|
// Timings
|
2018-03-07 00:36:04 +01:00
|
|
|
fade-speed = 150ms
|
2017-11-03 18:10:31 +01:00
|
|
|
transition-speed = 150ms
|
2018-10-31 14:35:30 +09:00
|
|
|
mountable-transition-speed = 150ms
|
