chore: add demo .less & .js

Author: magicdawn

demo/clock/index.js

@@ -0,0 +1,48 @@
+async function whenReady() {
+  return new Promise((resolve) => {
+    if (document.readyState !== 'loading') {
+      resolve()
+    } else {
+      document.addEventListener('DOMContentLoaded', resolve)
+    }
+  })
+}
+
+;(async () => {
+  await whenReady()
+
+  const getView = () => {
+    return document.querySelector(`.split-view-view:has(> [id='workbench.parts.auxiliarybar'])`)
+  }
+
+  let view = null
+  const start = Date.now()
+  while (!view && Date.now() - start < 3 * 60 * 1000) {
+    view = getView()
+    await new Promise((resolve) => {
+      setTimeout(resolve, 1000)
+    })
+  }
+  if (!view) {
+    console.log('[custom-css] view not found after 3 minutes ~')
+    return
+  }
+
+  const action = () => {
+    const right = window.getComputedStyle(view).width
+    document.documentElement.style.setProperty('--clock-right', right)
+    console.log('[custom-css] set --clock-right to %s', right)
+  }
+
+  // first call
+  action()
+
+  // observe later
+  const observer = new MutationObserver((mutations) => {
+    action()
+  })
+  observer.observe(view, { attributes: true, attributeFilter: ['style'] })
+  window.addEventListener('unload', () => {
+    observer.disconnect()
+  })
+})()

demo/clock/index.less

@@ -0,0 +1,44 @@
+#rid9\.datetime {
+  position: fixed;
+  top: 85px;
+  right: calc(var(--clock-right, 0px) + 130px);
+
+  // color
+  color: tomato;
+  color: red;
+  color: slateblue;
+  color: seagreen;
+  color: deeppink;
+
+  // https://www.bilibili.com/video/BV1g3411u7Lg?t=67.6
+  color: #0545b2; // 理想之蓝
+  color: #ef2729; // 石榴红
+  color: #f89c00; // 鹿箭
+  color: #233728; // 黛绿 rational blue
+  color: #f3cc91; // cheese yellow
+  color: #6b4c68; // grape purple
+  color: #6b4c68; // grape purple
+  color: #004d62; // 碧海天 ocean sky
+  color: #425a17; // 箬叶青 leaves green
+  color: #f4cd00; // 柠檬黄
+  color: #ff7227; // sunset orange
+
+  line-height: 1.4 !important;
+  height: unset !important;
+
+  // digital-7 mono
+  font-family: 'Digital-7 Mono';
+  font-size: 75px * 1.2;
+
+  font-family: 'M+ 1m', 'ubuntu mono', 'mplus 1 code', 'Hack';
+  font-size: 75px * 1.2;
+
+  // 防止影响搜索模块
+  pointer-events: none;
+  z-index: 34;
+}
+
+#rid9\.datetime a:hover,
+#rid9\.datetime a:focus {
+  background-color: transparent !important;
+}