ui-default: init

将ui-default合并至主存储库便于维护
2026-10-20 01:38:19 +08:00 · 2021-04-03 01:44:22 +08:00
1 parent 6317c9057f
commit 5faa54c7ca
@@ -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,257 @@
+// 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,
+  'ioi': #2E9AFE,
+  'homework': #FFCDCD,
+}