ui: init windows 98 theme

package.json

@@ -9,6 +9,7 @@
         "build": "node build/build.js",
         "build:watch": "node build/build.js --watch",
         "build:ui": "node packages/ui-default/build",
+        "build:ui:dev": "node packages/ui-default/build --dev",
         "build:ui:watch": "node packages/ui-default/build --watch",
         "build:ui:production": "node packages/ui-default/build --production",
         "lint": "eslint packages --ext ts --fix",

packages/ui-default/build/config/webpack.js

@@ -68,6 +68,7 @@ export default function (env = {}) {
     entry: {
       hydro: './entry.js',
       'theme.default': './theme/default.js',
+      'theme.98': './theme/98.js',
     },
     output: {
       path: root('public'),
@@ -75,8 +76,8 @@ export default function (env = {}) {
       hashFunction: 'sha1',
       hashDigest: 'hex',
       hashDigestLength: 10,
-      filename: '[name].js?[chunkhash]',
+      filename: '[name].js?[hash]',
-      chunkFilename: '[name].chunk.js?[chunkhash]',
+      chunkFilename: '[name].chunk.js?[hash]',
     },
     resolve: {
       modules: [root('node_modules'), root('../../node_modules')],
@@ -119,7 +120,7 @@ export default function (env = {}) {
         React: 'react',
       }),
       new ExtractCssPlugin({
-        filename: '[name].css?[contenthash:10]',
+        filename: '[name].css?[hash:10]',
       }),
       new webpack.LoaderOptionsPlugin({
         test: /\.styl$/,
@@ -136,7 +137,7 @@ export default function (env = {}) {
       new CopyWebpackPlugin({
         patterns: [
           { from: root('static') },
-          { from: root(dirname(require.resolve('emojify.js/package.json')) + '/dist/images/basic'), to: 'img/emoji/' },
+          { from: root(`${dirname(require.resolve('emojify.js/package.json'))}/dist/images/basic`), to: 'img/emoji/' },
         ],
       }),
       new webpack.DefinePlugin({

packages/ui-default/build/index.js

@@ -1,6 +1,7 @@
 require('@babel/register')({
-    "plugins": ["@babel/plugin-transform-runtime"],
+    plugins: ['@babel/plugin-transform-runtime'],
-    "presets": [["@babel/preset-env", { "loose": true }]]
+    presets: [['@babel/preset-env', { loose: true }]],
 });
 const main = require('./main.js');
+
 if (!module.parent) main();

packages/ui-default/build/main.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { argv } from 'yargs';
 import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
 import gulp from 'gulp';
 import log from 'fancy-log';
 import chalk from 'chalk';
@@ -8,8 +9,23 @@ import root from './utils/root';
 import gulpConfig from './config/gulp';
 import webpackConfig from './config/webpack';
 
-function runWebpack({ watch, production, measure }) {
+function runWebpack({
+  watch, production, measure, dev,
+}) {
   const compiler = webpack(webpackConfig({ watch, production, measure }));
+  if (dev) {
+    const server = new WebpackDevServer(compiler, {
+      compress: true,
+      hot: true,
+      stats: 'errors-warnings',
+      index: '',
+      proxy: {
+        context: () => true,
+        target: 'http://localhost:2333',
+      },
+    });
+    return server.listen(8000);
+  }
   return new Promise((resolve, reject) => {
     function compilerCallback(err, stats) {
       if (err) {

packages/ui-default/components/form/button.page.98.styl

@@ -0,0 +1,32 @@
+@import './var.inc.styl'
+
+.button
+  box-sizing: border-box
+  border: none
+  background: #c0c0c0
+  border-radius: 0
+  min-width: 75px;
+  min-height: 23px;
+  padding: 0 12px;
+
+  &:not(:disabled)
+    &:active
+      box-shadow: --border-sunken-outer, --border-sunken-inner
+      padding: 2px 11px 0 13px;
+
+.button.inverse
+  line-height: rem($form-control-height - 4)
+  border: 2px solid #FFF
+  background: none
+
+  &, &:visited
+    &, .typo &
+      color: #FFF
+
+  &:not(.disabled)
+    &:hover, &:focus
+      border-color: $immersive-primary-color
+      background: none
+      box-shadow: none
+      &, .typo &
+        color: $immersive-primary-color

packages/ui-default/components/form/button.page.default.styl

@@ -0,0 +1,58 @@
+@import './var.inc.styl'
+
+.button
+  background-color: lighten($default-color, 50%)
+  border: 1px solid $default-color
+  transition: background-color .2s, box-shadow .5s
+  transition-timing-function: ease-out-sine
+
+  &, &:visited, &:hover
+    &, .typo &
+      color: $text-1-color
+
+  &:not(.disabled)
+    &:hover, &:focus
+      background-color: darken($default-color, 5%)
+      border-color: darken($default-color, 5%)
+      box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
+
+    &:focus
+      border-color: $input-focus-color
+
+  &.rounded
+    border-radius: rem($form-control-height / 2)
+
+  &.primary
+    border-color: $primary-color
+    background-color: $primary-color
+
+    &, &:visited, &:hover
+      &, .typo &
+        color: #FFF
+
+    &:not(.disabled)
+      &:hover
+        background-color: lighten(saturate($primary-color, 30%), 10%)
+        border-color: saturate($primary-color, 70%)
+        box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
+
+  &.disabled
+    cursor: default
+    opacity: 0.5
+
+.button.inverse
+  line-height: rem($form-control-height - 4)
+  border: 2px solid #FFF
+  background: none
+
+  &, &:visited
+    &, .typo &
+      color: #FFF
+
+  &:not(.disabled)
+    &:hover, &:focus
+      border-color: $immersive-primary-color
+      background: none
+      box-shadow: none
+      &, .typo &
+        color: $immersive-primary-color

packages/ui-default/components/form/button.page.styl

@@ -3,61 +3,22 @@
 .button
   font-size: rem($font-size-secondary)
   line-height: rem($form-control-height - 2)
-  background-color: lighten($default-color, 50%)
-  border: 1px solid $default-color
   height: rem($form-control-height)
   padding: rem(0 25px)
   display: inline-block
   outline: 0
   margin: 0 0 1rem
-  transition: background-color .2s, box-shadow .5s
-  transition-timing-function: ease-out-sine
   cursor: pointer
   user-select: none
 
-  &, &:visited, &:hover
-    &, .typo &
-      color: $text-1-color
-
   &:hover, &:focus
     text-decoration: none
-
-  &:not(.disabled)
-    &:hover, &:focus
-      background-color: darken($default-color, 5%)
-      border-color: darken($default-color, 5%)
-      box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
-
-    &:focus
-      border-color: $input-focus-color
-
   &.expanded
     padding-left: 0
     padding-right: 0
     text-align: center
     width: 100%
 
-  &.rounded
-    border-radius: rem($form-control-height / 2)
-
-  &.primary
-    border-color: $primary-color
-    background-color: $primary-color
-
-    &, &:visited, &:hover
-      &, .typo &
-        color: #FFF
-
-    &:not(.disabled)
-      &:hover
-        background-color: lighten(saturate($primary-color, 30%), 10%)
-        border-color: saturate($primary-color, 70%)
-        box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
-
-  &.disabled
-    cursor: default
-    opacity: 0.5
-
   &.compact
     margin-bottom: 0
     height: rem($compact-control-height)
@@ -72,11 +33,3 @@
   &, &:visited
     &, .typo &
       color: #FFF
-
-  &:not(.disabled)
-    &:hover, &:focus
-      border-color: $immersive-primary-color
-      background: none
-      box-shadow: none
-      &, .typo &
-        color: $immersive-primary-color

packages/ui-default/misc/section.98.styl

@@ -0,0 +1,29 @@
+.section
+  background: $section-bg-color
+  box-shadow: $section-shadow
+  transition: transform .5s, opacity .5s
+  transition-timing-function: ease-out-cubic
+
+  +mobile()
+    box-shadow: none
+    margin-left: - rem($grid-padding)
+    margin-right: - rem($grid-padding)
+
+  .section__header
+    background: linear-gradient(90deg, #000080, #1084d0);
+    padding: 3px 2px 3px 3px;
+    justify-content: space-between;
+    align-items: center;
+    font-family: "Pixelated MS Sans Serif", Arial;
+    -webkit-font-smoothing: none;
+    font-size: 11px;
+
+    .section__title
+      margin-left: rem(10px);
+      font-weight: bold;
+      color: white;
+      letter-spacing: 0;
+      margin-right: rem(24px);
+
+    .inactive
+      background: linear-gradient(90deg, #808080, #b5b5b5);

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.5.5",
+  "version": "4.5.6",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",
@@ -99,9 +99,11 @@
     "vinyl-buffer": "^1.0.1",
     "vj-simplemde": "0.0.8",
     "webpack": "^4.44.2",
-    "webpack-bundle-analyzer": "^4.4.0"
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "98.css": "^0.1.16",
     "js-yaml": "^4.0.0",
     "katex": "^0.13.0",
     "lodash": "^4.17.21",
@@ -118,4 +120,4 @@
     "xss": "^1.0.8",
     "yargs": "^16.2.0"
   }
-}
+}

packages/ui-default/theme/98.js

@@ -0,0 +1,31 @@
+import 'normalize.css/normalize.css';
+import 'codemirror/lib/codemirror.css';
+import 'vj-simplemde/src/css/simplemde.css';
+import 'pickadate/lib/themes/classic.css';
+import 'pickadate/lib/themes/classic.date.css';
+import 'pickadate/lib/themes/classic.time.css';
+import 'katex/dist/katex.min.css';
+
+import 'vj/misc/float.styl';
+import 'vj/misc/typography.styl';
+import 'vj/misc/textalign.styl';
+import 'vj/misc/grid.styl';
+import 'vj/misc/slideout.styl';
+
+import 'vj/misc/.iconfont/webicon.styl';
+import 'vj/misc/immersive.styl';
+import 'vj/misc/structure.styl';
+import 'vj/misc/section.98.styl';
+import 'vj/misc/nothing.styl';
+
+import 'vj/components/cmeditor/cmeditor.styl';
+import 'vj/components/datepicker/datepicker.styl';
+import 'vj/components/katex/katex.styl';
+
+// load all page stylesheets
+const pageStyleReq = require.context('../', true, /\.page\.styl$/i);
+pageStyleReq.keys().map((key) => pageStyleReq(key));
+const pageStyleReq98 = require.context('../', true, /\.page\.98\.styl$/i);
+pageStyleReq98.keys().map((key) => pageStyleReq(key));
+
+import './98.styl';

packages/ui-default/theme/98.styl

@@ -0,0 +1,547 @@
+$color-1 = #222
+$color-2 = #c0c0c0
+$color-3 = #000
+$color-4 = #fff
+$color-5 = #808080
+
+$surface=#c0c0c0;
+$button-highlight=#ffffff;
+$button-face=#dfdfdf;
+$button-shadow=#808080;
+$window-frame=#0a0a0a;
+$dialog-blue=#000080;
+$dialog-blue-light=#1084d0;
+$dialog-gray=#808080;
+$dialog-gray-light=#b5b5b5;
+$link-blue=#0000ff;
+
+/* Spacing */
+$element-spacing=8px;
+$grouped-button-spacing=4px;
+$grouped-element-spacing=6px;
+$radio-width=12px;
+$checkbox-width=13px;
+$radio-label-spacing=6px;
+$range-track-height=4px;
+$range-spacing=10px;
+
+/* Some detailed computations for radio buttons and checkboxes */
+$radio-total-width-precalc=$radio-width + $radio-label-spacing;
+$radio-total-width=calc($radio-total-width-precalc);
+$radio-left=calc(-1 * $radio-total-width-precalc);
+$radio-dot-width=4px;
+$radio-dot-top=calc($radio-width / 2 - $radio-dot-width / 2);
+$radio-dot-left=calc(-1 * ($radio-total-width-precalc) + $radio-width / 2 - $radio-dot-width / 2);
+$checkbox-total-width-precalc=$checkbox-width +$radio-label-spacing;
+$checkbox-total-width=calc($checkbox-total-width-precalc);
+$checkbox-left=calc(-1 * $checkbox-total-width-precalc);
+$checkmark-width=7px;
+$checkmark-top=3px;
+$checkmark-left=3px;
+
+/* Borders */
+$border-width=1px;
+$border-raised-outer=inset -1px -1px $window-frame, inset 1px 1px $button-highlight;
+$border-raised-inner=inset -2px -2px $button-shadow, inset 2px 2px $button-face;
+$border-sunken-outer=inset -1px -1px $button-highlight, inset 1px 1px $window-frame;
+$border-sunken-inner=inset -2px -2px $button-face, inset 2px 2px $button-shadow;
+
+/* Window borders flip button-face and button-highlight */
+$border-window-outer=inset -1px -1px $window-frame, inset 1px 1px $button-face;
+$border-window-inner=inset -2px -2px $button-shadow, inset 2px 2px $button-highlight;
+
+/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
+$border-field=inset -1px -1px $button-highlight, inset 1px 1px $button-shadow, inset -2px -2px $button-face, inset 2px 2px $window-frame;
+
+input[type="radio"],
+input[type="checkbox"]
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  border: none
+  margin: 0
+  background: 0
+  opacity: 0
+  position: fixed
+
+@font-face
+    font-family "Pixelated MS Sans Serif"
+    src url("98.css/fonts/converted/ms_sans_serif.woff") format("woff")
+    src url("98.css/fonts/converted/ms_sans_serif.woff2") format("woff2")
+    font-weight normal
+    font-style normal
+
+@font-face
+    font-family "Pixelated MS Sans Serif"
+    src url("98.css/fonts/converted/ms_sans_serif_bold.woff") format("woff")
+    src url("98.css/fonts/converted/ms_sans_serif_bold.woff2") format("woff2")
+    font-weight bold
+    font-style normal
+
+body
+    font-family Arial
+    color $color-1
+
+button
+label
+input
+textarea
+select
+option
+ul.tree-view
+.window
+.help-text
+    font-family "Pixelated MS Sans Serif", Arial
+    font-smoothing none
+
+u
+    text-decoration none
+    border-bottom 0.5px solid $color-1
+
+.vertical-bar
+    width 4px
+    height 20px
+    background $color-2
+    box-shadow var($border-raised-outer), var($border-raised-inner)
+
+button
+    &:not(:disabled)
+        &:hover
+            box-shadow var($border-sunken-outer), var($border-sunken-inner)
+
+button
+    &:focus
+        outline 1px dotted #000000
+        outline-offset -4px
+
+button::-moz-focus-inner
+    border 0
+
+:disabled
+:disabled+label
+    color var($button-shadow)
+    text-shadow 1px 1px 0 var($button-highlight)
+
+.window
+    box-shadow var($border-window-outer), var($border-window-inner)
+    background var($surface)
+    padding 3px
+
+.title-bar-controls
+    display flex
+
+    button
+        padding 0
+        display block
+        min-width 16px
+        min-height 14px
+
+        &:active
+            padding 0
+
+        &:focus
+            outline none
+
+    button[aria-label="Minimize"]
+        background-image svg-load("98.css/icon/minimize.svg")
+        background-repeat no-repeat
+        background-position bottom 3px left 4px
+
+    button[aria-label="Maximize"]
+        background-image svg-load("98.css/icon/maximize.svg")
+        background-repeat no-repeat
+        background-position top 2px left 3px
+
+    button[aria-label="Restore"]
+        background-image svg-load("98.css/icon/restore.svg")
+        background-repeat no-repeat
+        background-position top 2px left 3px
+
+    button[aria-label="Help"]
+        background-image svg-load("98.css/icon/help.svg")
+        background-repeat no-repeat
+        background-position top 2px left 5px
+
+    button[aria-label="Close"]
+        margin-left 2px
+        background-image svg-load("98.css/icon/close.svg")
+        background-repeat no-repeat
+        background-position top 3px left 4px
+
+.window-body
+    margin var($element-spacing)
+
+fieldset
+    border none
+    box-shadow var($border-sunken-outer), var($border-raised-inner)
+    padding calc(2 * var($border-width) + var($element-spacing))
+    padding-block-start var($element-spacing)
+    margin 0
+
+legend
+    background var($surface)
+
+.field-row
+    display flex
+    align-items center
+
+    >*
+        +*
+            margin-left var($grouped-element-spacing)
+
+[class^="field-row"]
+    +[class^="field-row"]
+        margin-top var($grouped-element-spacing)
+
+.field-row-stacked
+    display flex
+    flex-direction column
+
+    *
+        +*
+            margin-top var($grouped-element-spacing)
+
+input[type="radio"]+label
+input[type="checkbox"]+label
+    line-height 13px
+
+input[type="radio"]
+    +label
+        position relative
+        margin-left var($radio-total-width)
+
+    +label::before
+        content ""
+        position absolute
+        top 0
+        left calc(-1 * (var($radio-total-width-precalc)))
+        display inline-block
+        width var($radio-width)
+        height var($radio-width)
+        margin-right var($radio-label-spacing)
+        background svg-load("98.css/icon/radio-border.svg")
+
+input[type="radio"]:active
+    +label::before
+        background svg-load("98.css/icon/radio-border-disabled.svg")
+
+input[type="radio"]:checked
+    +label::after
+        content ""
+        display block
+        width var($radio-dot-width)
+        height var($radio-dot-width)
+        top var($radio-dot-top)
+        left var($radio-dot-left)
+        position absolute
+        background svg-load("98.css/icon/radio-dot.svg")
+
+input[type="radio"]:focus+label
+input[type="checkbox"]:focus+label
+    outline 1px dotted #000000
+
+input[type="radio"][disabled]
+    +label::before
+        background svg-load("98.css/icon/radio-border-disabled.svg")
+
+input[type="radio"][disabled]:checked
+    +label::after
+        background svg-load("98.css/icon/radio-dot-disabled.svg")
+
+input[type="checkbox"]
+    +label
+        position relative
+        margin-left var($checkbox-total-width)
+
+    +label::before
+        content ""
+        position absolute
+        left calc(-1 * (var($checkbox-total-width-precalc)))
+        display inline-block
+        width var($checkbox-width)
+        height var($checkbox-width)
+        background var($button-highlight)
+        box-shadow var($border-field)
+        margin-right var($radio-label-spacing)
+
+input[type="checkbox"]:active
+    +label::before
+        background var($surface)
+
+input[type="checkbox"]:checked
+    +label::after
+        content ""
+        display block
+        width var($checkmark-width)
+        height var($checkmark-width)
+        position absolute
+        top var($checkmark-top)
+        left calc(-1 * (var($checkbox-total-width-precalc)) + var($checkmark-left))
+        background svg-load("98.css/icon/checkmark.svg")
+
+input[type="checkbox"][disabled]
+    +label::before
+        background var($surface)
+
+input[type="checkbox"][disabled]:checked
+    +label::after
+        background svg-load("98.css/icon/checkmark-disabled.svg")
+
+input[type="text"]
+input[type="password"]
+input[type="email"]
+select
+textarea
+    padding 3px 4px
+    border none
+    box-shadow var($border-field)
+    background-color var($button-highlight)
+    box-sizing border-box
+    appearance none
+    border-radius 0
+
+select
+    appearance none
+    position relative
+    padding-right 32px
+    background-image svg-load("98.css/icon/button-down.svg")
+    background-position top 2px right 2px
+    background-repeat no-repeat
+    border-radius 0
+
+    &:focus
+        color var($button-highlight)
+        background-color var($dialog-blue)
+
+        option
+            color $color-3
+            background-color $color-4
+
+    &:active
+        background-image svg-load("98.css/icon/button-down-active.svg")
+
+select:focus
+input[type="text"]:focus
+input[type="password"]:focus
+input[type="email"]:focus
+textarea:focus
+    outline none
+
+input[type="range"]
+    appearance none
+    width 100%
+    background transparent
+
+input[type="range"]:focus
+    outline none
+
+input[type="range"]::-webkit-slider-thumb
+    appearance none
+    height 21px
+    width 11px
+    background svg-load("98.css/icon/indicator-horizontal.svg")
+    transform translateY(-8px)
+
+input[type="range"].has-box-indicator::-webkit-slider-thumb
+    background svg-load("98.css/icon/indicator-rectangle-horizontal.svg")
+    transform translateY(-10px)
+
+input[type="range"]::-moz-range-thumb
+    height 21px
+    width 11px
+    border 0
+    border-radius 0
+    background svg-load("98.css/icon/indicator-horizontal.svg")
+    transform translateY(2px)
+
+input[type="range"].has-box-indicator::-moz-range-thumb
+    background svg-load("98.css/icon/indicator-rectangle-horizontal.svg")
+    transform translateY(0px)
+
+input[type="range"]::-webkit-slider-runnable-track
+    width 100%
+    background black
+    border-right 1px solid grey
+    border-bottom 1px solid grey
+    box-shadow 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
+        -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
+
+input[type="range"]::-moz-range-track
+    width 100%
+    background black
+    border-right 1px solid grey
+    border-bottom 1px solid grey
+    box-shadow 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
+        -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey
+
+.is-vertical
+    display inline-block
+    width 4px
+    height 150px
+    transform translateY(50%)
+
+    >input[type="range"]
+        width 150px
+        height 4px
+        margin 0 calc(var($grouped-element-spacing) + var($range-spacing)) 0 var($range-spacing)
+        transform-origin left
+        transform rotate(270deg) translateX(calc(-50% + var($element-spacing)))
+
+    >input[type="range"]::-webkit-slider-runnable-track
+        border-left 1px solid grey
+        border-right 0
+        border-bottom 1px solid grey
+        box-shadow -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
+        1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey
+
+    >input[type="range"]::-moz-range-track
+        border-left 1px solid grey
+        border-right 0
+        border-bottom 1px solid grey
+        box-shadow -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
+        1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey
+
+    >input[type="range"]::-webkit-slider-thumb
+        transform translateY(-8px) scaleX(-1)
+
+    >input[type="range"].has-box-indicator::-webkit-slider-thumb
+        transform translateY(-10px) scaleX(-1)
+
+    >input[type="range"]::-moz-range-thumb
+        transform translateY(2px) scaleX(-1)
+
+    >input[type="range"].has-box-indicator::-moz-range-thumb
+        transform translateY(0px) scaleX(-1)
+
+a
+    &:focus
+        outline 1px dotted var($link-blue)
+
+ul
+    &.tree-view
+        display block
+        background var($button-highlight)
+        box-shadow var($border-field)
+        padding 6px
+        margin 0
+
+        li
+            list-style-type none
+
+        a
+            text-decoration none
+            color $color-3
+
+            &:focus
+                background-color var($dialog-blue)
+                color var($button-highlight)
+
+        ul
+            margin-left 16px
+            padding-left 16px
+            border-left 1px dotted $color-5
+
+            >li
+                position relative
+
+            >li::before
+                content ""
+                display block
+                position absolute
+                left -16px
+                top 6px
+                width 12px
+                border-bottom 1px dotted $color-5
+
+            >li::after
+                &:last-child
+                    content ""
+                    display block
+                    position absolute
+                    left -20px
+                    top 7px
+                    bottom 0px
+                    width 8px
+                    background var($button-highlight)
+
+            details
+                >summary
+                    &:before
+                        margin-left -22px
+                        position relative
+                        z-index 1
+
+        details
+            margin-top 0
+
+            >summary
+                &:before
+                    text-align center
+                    display block
+                    float left
+                    content "+"
+                    border 1px solid $color-5
+                    width 8px
+                    height 9px
+                    line-height 8px
+                    margin-right 5px
+                    padding-left 1px
+                    background-color $color-4
+
+        details[open]
+            summary
+                margin-bottom 0
+
+            >summary
+                &:before
+                    content "-"
+
+ul.tree-view ul
+ul.tree-view li
+    margin-top 3px
+
+pre
+    background var($button-highlight)
+    box-shadow var($border-field)
+
+summary
+    &:focus
+        outline 1px dotted #000000
+
+::-webkit-scrollbar
+    width 16px
+
+::-webkit-scrollbar:horizontal
+    height 17px
+
+::-webkit-scrollbar-corner
+    background var($button-face)
+
+::-webkit-scrollbar-track
+    background-image svg-load("98.css/icon/scrollbar-background.svg")
+
+::-webkit-scrollbar-thumb
+    background-color var($button-face)
+    box-shadow var($border-raised-outer), var($border-raised-inner)
+
+::-webkit-scrollbar-button:horizontal:start:decrement
+::-webkit-scrollbar-button:horizontal:end:increment
+::-webkit-scrollbar-button:vertical:start:decrement
+::-webkit-scrollbar-button:vertical:end:increment
+    display block
+
+::-webkit-scrollbar-button:vertical:start
+    height 17px
+    background-image svg-load("98.css/icon/button-up.svg")
+
+::-webkit-scrollbar-button:vertical:end
+    height 17px
+    background-image svg-load("98.css/icon/button-down.svg")
+
+::-webkit-scrollbar-button:horizontal:start
+    width 16px
+    background-image svg-load("98.css/icon/button-left.svg")
+
+::-webkit-scrollbar-button:horizontal:end
+    width 16px
+    background-image svg-load("98.css/icon/button-right.svg")

packages/ui-default/theme/default.js

@@ -24,4 +24,6 @@ import 'vj/components/katex/katex.styl';
 
 // load all page stylesheets
 const pageStyleReq = require.context('../', true, /\.page\.styl$/i);
-pageStyleReq.keys().map((key) => pageStyleReq(key).default);
+pageStyleReq.keys().map((key) => pageStyleReq(key));
+const pageStyleReqDefault = require.context('../', true, /\.page\.default\.styl$/i);
+pageStyleReqDefault.keys().map((key) => pageStyleReq(key));