You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
262 lines
6.2 KiB
Stylus
262 lines
6.2 KiB
Stylus
// layout
|
|
$grid-padding = 15px // half gutter
|
|
|
|
// fonts
|
|
$primary-font-family = var(--font-family)
|
|
$header-font-family = var(--font-family)
|
|
$code-font-family = var(--code-font-family)
|
|
|
|
// primary palette
|
|
$default-color = #ddd
|
|
$primary-color = #5f9fd6
|
|
$secondary-color = #ed5f82
|
|
$highlight-color = #df6589
|
|
$code-color = #c92a2a
|
|
$text-1-color = #555
|
|
$text-2-color = lighten($text-1-color, 15%)
|
|
$text-3-color = lighten($text-1-color, 30%)
|
|
$header-1-color = #3d3d3d
|
|
$header-2-color = lighten($header-1-color, 20%)
|
|
$blockquote-color = #999
|
|
$page-bg-color = #edf0f2
|
|
$content-bg-color = #fff
|
|
$border-1-color = $default-color
|
|
$border-2-color = lighten($default-color, 20%)
|
|
|
|
$immersive-primary-color = #ffef87
|
|
$immersive-text-color = #ffffff
|
|
$immersive-header-color = #ffffff
|
|
|
|
$success-color = #25ad40
|
|
$fail-color = #fb5555
|
|
$progress-color = #f39800
|
|
$invalid-color = #9fa0a0
|
|
|
|
// sizes
|
|
$font-size = 16px // main content
|
|
$font-size-secondary = 14px // secondary content
|
|
$font-size-small = 13px // additional informations, usually gray colored
|
|
$font-size-icon = 16px
|
|
$font-size-title = 20px
|
|
|
|
// components
|
|
$section-gap-v = 15px
|
|
$section-gap-h = $grid-padding
|
|
$section-list-v = 25px
|
|
$section-margin = 30px
|
|
$section-shadow = rem(0 6px 22px) rgba(#AFC2C9, 0.5)
|
|
$section-bg-color = $content-bg-color
|
|
$section-title-color = $header-2-color
|
|
$section-toolbtn-color = #AAA
|
|
$section-toolbtn-color-hover = #444
|
|
|
|
$autocomplete-empty-row-color = #AAA
|
|
$userselect-uid-color = #BBB
|
|
|
|
$editor-border-color = $border-1-color
|
|
|
|
$datepicker-shadow = rem(0 2px 7px) rgba(#000, 0.3)
|
|
$datapicker-list-item-bg-color-hover = #F0F0F0
|
|
|
|
$dialog-layer-bg-color = rgba(#F0F0F0, 0.6)
|
|
$dialog-bg-color = $content-bg-color
|
|
$dialog-border-color = $border-1-color
|
|
$dialog-shadow = rem(0 2px 10px) rgba(#000, 0.2)
|
|
$dialog-title-color = $header-2-color
|
|
|
|
$comment-placeholder-color = #AAA
|
|
$comment-op-color = lighten($text-1-color, 30%)
|
|
$comment-op-link-color = lighten($text-1-color, 50%)
|
|
|
|
$menu-item-bg-color-hover = #F4F4F4
|
|
$menu-drop-shadow = rem(0 2px 7px) rgba(#000, 0.3)
|
|
$menu-drop-bg-color = $content-bg-color
|
|
$menu-drop-triangle-size = 4px
|
|
$menu-drop-triangle-shadow = rem(-2px -2px 2px) rgba(#000, 0.15)
|
|
|
|
$nav-item-height = 45px
|
|
$nav-item-hover-color = $primary-color
|
|
$nav-item-active-color = $secondary-color
|
|
$nav-item-active-immersive-color = #9AE3F3
|
|
$nav-item-round-height = 32px
|
|
$nav-item-round-color = $primary-color
|
|
$nav-item-round-border = 2px
|
|
$nav-logo-height = 32px
|
|
$nav-logo-height-mobile = 23px
|
|
|
|
$header-layer-height = 100px
|
|
$header-bg-width = 1920px
|
|
$header-bg-height = 320px
|
|
$header-bg-height-mini = $header-bg-height - $header-layer-height
|
|
//$header-logo-width = 280px
|
|
//$header-logo-height = 150px
|
|
//$header-logo-width-real = 280px
|
|
//$header-logo-height-real = 150px
|
|
$header-logo-width = 252px
|
|
$header-logo-height = 150px
|
|
$header-logo-width-real = 381px
|
|
$header-logo-height-real = 201px
|
|
$header-logo-domain-lh = 60px
|
|
$header-logo-system-lh = 30px
|
|
|
|
$footer-bg-color = $content-bg-color
|
|
|
|
$input-focus-color = #C1E0FF
|
|
$form-control-height = 35px
|
|
$compact-control-height = 28px
|
|
$input-margin = 0 0 1rem
|
|
$input-multi-line-margin = 0 0.3rem 0.15rem 0
|
|
$input-image-radio-margin = 0 0.3rem 0.3rem 0
|
|
$input-background-color = $content-bg-color
|
|
$input-border = 1px solid $border-1-color
|
|
$input-outline = 2px solid transparent
|
|
$input-focus-border-color = $primary-color
|
|
$input-focus-outline = 2px solid $input-focus-color
|
|
$label-color = lighten($text-1-color, 10%)
|
|
$help-text-color = lighten($text-1-color, 30%)
|
|
|
|
$table-border-color = $border-2-color
|
|
$table-alternate-bg-color = #F4F4F4
|
|
$table-header-bg-color = rgba(#FFF, 0.95)
|
|
$table-header-shadow = rem(0 3px 2px) rgba(#000, 0.03)
|
|
$table-header-shadow-floating = rem(0 2px 5px) rgba(#000, 0.2)
|
|
$table-padding-h = 10px
|
|
$table-lh = 26px
|
|
|
|
$toolbar-bg = #f2f6f7
|
|
$toolbar-fore = #8395a1
|
|
$toolbar-fore-hover = #5a6b75
|
|
$toolbar-bg-hover = #e3e7e8
|
|
$toolbar-fore-selected = #FFF
|
|
$toolbar-bg-selected = $secondary-color
|
|
$toolbar-disabled-opacity = 0.3
|
|
|
|
$supplementary-color = lighten($text-1-color, 50%)
|
|
$supplementary-border-color = lighten($supplementary-color, 62%)
|
|
$supplementary-link-color = lighten($text-1-color, 40%)
|
|
|
|
$pager-border-color = $table-border-color
|
|
|
|
$nprogress-color = $primary-color
|
|
|
|
$syntax-hl-bg-color = #F8F8F8
|
|
|
|
// Calendar
|
|
$calendar-banner-color = {
|
|
'0': #FA6582,
|
|
'1': #EEA9C5,
|
|
'2': #FDB24D,
|
|
'3': #98CA86,
|
|
'4': #7DCBBF,
|
|
'5': #20BDE8,
|
|
'6': #6BCDDB,
|
|
'7': #6598FF,
|
|
'8': #8EB0F5,
|
|
'9': #928FE3,
|
|
'10': #676E7E,
|
|
'11': #A1A5AB,
|
|
}
|
|
|
|
// Notification
|
|
$notification-color = {
|
|
'success': #9BDB7B,
|
|
'info': #78D6F4,
|
|
'warn': #FCD279,
|
|
'error': #FD848D,
|
|
}
|
|
|
|
$notification-icon = {
|
|
'success': $icon-check--circle,
|
|
'info': $icon-info--circle,
|
|
'warn': $icon-info--circle,
|
|
'error': $icon-close--circle,
|
|
}
|
|
|
|
// Badge
|
|
$badge-text-color = {
|
|
'mod': #FFF,
|
|
'su': #FFF,
|
|
'lv0': #727171,
|
|
'lv1': #FFF,
|
|
'lv2': #FFF,
|
|
'lv3': #FFF,
|
|
'lv4': #FFF,
|
|
'lv5': #FFF,
|
|
'lv6': #FFF,
|
|
'lv7': #FFF,
|
|
'lv8': #FFF,
|
|
'lv9': #FFF,
|
|
'lv10': #FFF,
|
|
}
|
|
$badge-bg-color = {
|
|
'mod': #cf70ab,
|
|
'su': #ff0000,
|
|
'lv0': #efefef,
|
|
'lv1': #9db4bd,
|
|
'lv2': #9db4bd,
|
|
'lv3': #73c3bc,
|
|
'lv4': #73c3bc,
|
|
'lv5': #81ba6c,
|
|
'lv6': #81ba6c,
|
|
'lv7': #f7b200,
|
|
'lv8': #ff9251,
|
|
'lv9': #eb6363,
|
|
'lv10': #575757,
|
|
}
|
|
|
|
// Record Status
|
|
$record-status-color = {
|
|
'pass': $success-color,
|
|
'fail': $fail-color,
|
|
'progress': $progress-color,
|
|
'ignored': $invalid-color,
|
|
'pending': $invalid-color,
|
|
}
|
|
|
|
$record-status-icon = {
|
|
'pass': $icon-check,
|
|
'fail': $icon-close,
|
|
'progress': $icon-hourglass,
|
|
'ignored': $icon-close,
|
|
'pending': $icon-schedule,
|
|
}
|
|
|
|
// Training Status
|
|
$training-status-color = {
|
|
'outside': $supplementary-color,
|
|
'progress': #e64c72,
|
|
'done': #25ad40,
|
|
}
|
|
|
|
$training-status-icon = {
|
|
'outside': $icon-help2,
|
|
'progress': $icon-schedule,
|
|
'done': $icon-check,
|
|
}
|
|
|
|
// Training Section Status
|
|
$training-section-status-color = {
|
|
'done': #25ad40,
|
|
'open': #e64c72,
|
|
'progress': #e64c72,
|
|
'invalid': $supplementary-color,
|
|
}
|
|
|
|
$training-section-status-icon = {
|
|
'done': $icon-check,
|
|
'open': $icon-help2,
|
|
'progress': $icon-schedule,
|
|
'invalid': $icon-close,
|
|
}
|
|
|
|
// Contest type
|
|
// #6EA2C7, #48AAB7, #6BB67A, #F5C735, #DC7D86
|
|
$contest-color = {
|
|
'acm': #6BB67A,
|
|
'oi': #F5C735,
|
|
'ioi': #2E9AFE,
|
|
'ledo': #8076A3,
|
|
'homework': #FFCDCD,
|
|
'strictioi': #6EA2C7,
|
|
}
|