mirror of
https://gitcode.com/gh_mirrors/hy/Hydro.git
synced 2026-10-20 01:38:19 +08:00
add ui
This commit is contained in:
masnn committed
1 parent
777a4bc927
commit
9c45527522
396 files changed
+13772
No files matched your search
@@ -0,0 +1,17 @@
|
||||
aqua = #7FDBFF
|
||||
blue = #0074D9
|
||||
navy = #001F3F
|
||||
teal = #39CCCC
|
||||
green = #2ECC40
|
||||
olive = #3D9970
|
||||
lime = #01FF70
|
||||
yellow = #FFDC00
|
||||
orange = #FF851B
|
||||
red = #FF4136
|
||||
fuchsia = #F012BE
|
||||
purple = #B10DC9
|
||||
maroon = #85144B
|
||||
white = #ffffff
|
||||
silver = #dddddd
|
||||
gray = #aaaaaa
|
||||
black = #111111
|
||||
@@ -0,0 +1,12 @@
|
||||
// This file is imported in all stylus source code
|
||||
breakpoints = json('../breakpoints.json', { hash: true })
|
||||
rupture.mobile-cutoff = unit(breakpoints.mobile, 'px')
|
||||
rupture.desktop-cutoff = unit(breakpoints.desktop, 'px')
|
||||
rupture.hd-cutoff = unit(breakpoints.hd, 'px')
|
||||
|
||||
@import '~vj/misc/.iconfont/webicon.inc.styl'
|
||||
@import 'color.inc.styl'
|
||||
@import 'variables.inc.styl'
|
||||
@import 'easing.inc.styl'
|
||||
@import 'rem.inc.styl'
|
||||
@import 'functions.inc.styl'
|
||||
@@ -0,0 +1,39 @@
|
||||
// Cubic
|
||||
ease-in-cubic = cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
ease-out-cubic = cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
ease-in-out-cubic = cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
|
||||
// Circ
|
||||
ease-in-circ = cubic-bezier(0.600, 0.040, 0.980, 0.335);
|
||||
ease-out-circ = cubic-bezier(0.075, 0.820, 0.165, 1.000);
|
||||
ease-in-out-circ = cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||
|
||||
// Expo
|
||||
ease-in-expo = cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
||||
ease-out-expo = cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
||||
ease-in-out-expo = cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
||||
|
||||
// Quad
|
||||
ease-in-quad = cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
||||
ease-out-quad = cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
ease-in-out-quad = cubic-bezier(0.455, 0.030, 0.515, 0.955);
|
||||
|
||||
// Quart
|
||||
ease-in-quart = cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
||||
ease-out-quart = cubic-bezier(0.165, 0.840, 0.440, 1.000);
|
||||
ease-in-out-quart = cubic-bezier(0.770, 0.000, 0.175, 1.000);
|
||||
|
||||
// Quint
|
||||
ease-in-quint = cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
ease-out-quint = cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
||||
ease-in-out-quint = cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||
|
||||
// Sine
|
||||
ease-in-sine = cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||
ease-out-sine = cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||
ease-in-out-sine = cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
||||
|
||||
// Back
|
||||
ease-in-back = cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
ease-out-back = cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
ease-in-out-back = cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
||||
@@ -0,0 +1,9 @@
|
||||
word-wrap()
|
||||
overflow-wrap: break-word
|
||||
word-wrap: break-word
|
||||
-ms-word-break: break-all
|
||||
word-break: break-word
|
||||
-ms-hyphens: auto
|
||||
-moz-hyphens: auto
|
||||
-webkit-hyphens: auto
|
||||
hyphens: auto
|
||||
@@ -0,0 +1,7 @@
|
||||
rem() {
|
||||
ret = ();
|
||||
for arg in arguments {
|
||||
push(ret, unit(arg / $font-size, 'rem'));
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
// 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,
|
||||
}
|
||||
Reference in new issue
Block a user