vj4/ui/common/variables.inc.styl
// layout
$grid-padding = 15px // half gutter
// fonts
$primary-font-family = "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Hiragino Sans GB", "Lantinghei SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans"
$header-font-family = "Open Sans", "Seravek", "Segoe UI", "Verdana", "PingFang SC", "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", "sans-serif"
$code-font-family = "monaco", "Source Code Pro", "Consolas", "Lucida Console", "monospace"
// 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 = #f8f8f8
$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 = 25px
$section-gap-h = $grid-padding
$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-width = 45px
$nav-logo-height = 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 = #FFF
$nprogress-color-floating = $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,
'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,
'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,
}
// Homework Status
$homework-status-color = {
'not_started': $text-2-color,
'ongoing': $success-color,
}