buner 0.0.2 → 1.0.0

package/xpack/styles/_breakpoint.scss

@@ -0,0 +1,117 @@
+$xxs: 0;
+$xs: 360px;
+$xs2: 480px;
+$xs3: 500px;
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+$xxl: 1400px;
+
+@mixin xs {
+  @media (min-width: $xs) {
+    @content;
+  }
+}
+
+@mixin xs-down {
+  @media (max-width: #{$xs - 0.01px}) {
+    @content;
+  }
+}
+
+@mixin xs2 {
+  @media (min-width: $xs2) {
+    @content;
+  }
+}
+
+@mixin xs2-down {
+  @media (max-width: #{$xs2 - 0.01px}) {
+    @content;
+  }
+}
+
+@mixin xs3 {
+  @media (min-width: $xs3) {
+    @content;
+  }
+}
+
+@mixin xs3-down {
+  @media (max-width: #{$xs3 - 0.01px}) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media (min-width: $sm) {
+    @content;
+  }
+}
+
+@mixin sm-down {
+  @media (max-width: #{$sm - 0.01px}) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (min-width: $md) {
+    @content;
+  }
+}
+
+@mixin md-down {
+  @media (max-width: #{$md - 0.01px}) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (min-width: $lg) {
+    @content;
+  }
+}
+
+@mixin lg-down {
+  @media (max-width: #{$lg - 0.01px}) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (min-width: $xl) {
+    @content;
+  }
+}
+
+@mixin xl-down {
+  @media (max-width: #{$xl - 0.01px}) {
+    @content;
+  }
+}
+
+@mixin xxl {
+  @media (min-width: $xxl) {
+    @content;
+  }
+}
+
+@mixin xxl-down {
+  @media (max-width: #{$xxl - 0.01px}) {
+    @content;
+  }
+}
+
+@mixin breakpoint($min, $max) {
+  @media (min-width: $min) and (max-width: #{$max - 0.1px}) {
+    @content;
+  }
+}
+
+@mixin print {
+  @media print {
+    @content;
+  }
+}

package/xpack/styles/_form.scss

@@ -0,0 +1,23 @@
+@use 'px2rem' as *;
+@use 'theme' as *;
+
+@mixin input {
+  border: px2rem(1px) solid #bbb;
+  background-color: #eee;
+  color: $body-color;
+  border-radius: px2rem(4px);
+
+  &:focus-visible {
+    border-color: $black;
+    background-color: $body-bg;
+  }
+
+  @include dark {
+    background-color: #1b1f22;
+    border-color: #555;
+
+    &:focus-visible {
+      border-color: $body-color;
+    }
+  }
+}

package/xpack/styles/_px2rem.scss

@@ -0,0 +1,5 @@
+@use 'sass:math';
+
+@function px2rem($pxValue: 16px) {
+  @return math.div($pxValue, 16px) * 1rem;
+}

package/xpack/styles/_reset.scss

@@ -0,0 +1,134 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+div,
+span,
+// applet,
+// object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+// pre,
+a,
+abbr,
+acronym,
+// address,
+big,
+// cite,
+// code,
+del,
+// dfn,
+em,
+img,
+// ins,
+// kbd,
+// q,
+// s,
+// samp,
+small,
+strike,
+strong,
+sub,
+sup,
+// tt,
+// var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+// ol,
+// ul,
+// li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+// aside,
+// canvas,
+// details,
+// embed,
+figure,
+figcaption,
+footer,
+header,
+// hgroup,
+menu,
+nav,
+// output,
+// ruby,
+section,
+// summary,
+// time,
+// mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  // vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+// aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+// hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/xpack/styles/_state-toggle.scss

@@ -0,0 +1,121 @@
+$-time-ratio: 0.5;
+$-size-ratio: 0.5;
+$-begin-offset: -200px;
+$-end-offset: -500px;
+$-pl-state-bubble-bg: #f30;
+
+.pl-state-toggle {
+  position: relative;
+
+  &__circles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &__circle {
+    position: absolute;
+    display: block;
+    width: calc(20px * #{$-size-ratio});
+    height: calc(20px * #{$-size-ratio});
+    background: $-pl-state-bubble-bg;
+    animation: bubbleAnimate calc(25s * #{$-time-ratio}) linear infinite;
+    bottom: $-begin-offset;
+
+    &.no-animation {
+      animation-play-state: paused;
+    }
+
+    &:nth-child(1) {
+      left: 25%;
+      width: calc(80px * #{$-size-ratio});
+      height: calc(80px * #{$-size-ratio});
+      animation-delay: calc(0s * #{$-time-ratio});
+    }
+
+    &:nth-child(2) {
+      left: 10%;
+      width: calc(20px * #{$-size-ratio});
+      height: calc(20px * #{$-size-ratio});
+      animation-delay: calc(2s * #{$-time-ratio});
+      animation-duration: calc(12s * #{$-time-ratio});
+    }
+
+    &:nth-child(3) {
+      left: 70%;
+      width: calc(20px * #{$-size-ratio});
+      height: calc(20px * #{$-size-ratio});
+      animation-delay: calc(4s * #{$-time-ratio});
+    }
+
+    &:nth-child(4) {
+      left: 40%;
+      width: calc(60px * #{$-size-ratio});
+      height: calc(60px * #{$-size-ratio});
+      animation-delay: calc(0s * #{$-time-ratio});
+      animation-duration: calc(18s * #{$-time-ratio});
+    }
+
+    &:nth-child(5) {
+      left: 65%;
+      width: calc(20px * #{$-size-ratio});
+      height: calc(20px * #{$-size-ratio});
+      animation-delay: calc(0s * #{$-time-ratio});
+    }
+
+    &:nth-child(6) {
+      left: 75%;
+      width: calc(110px * #{$-size-ratio});
+      height: calc(110px * #{$-size-ratio});
+      animation-delay: calc(3s * #{$-time-ratio});
+    }
+
+    &:nth-child(7) {
+      left: 35%;
+      width: calc(150px * #{$-size-ratio});
+      height: calc(150px * #{$-size-ratio});
+      animation-delay: calc(7s * #{$-time-ratio});
+    }
+
+    &:nth-child(8) {
+      left: 50%;
+      width: calc(25px * #{$-size-ratio});
+      height: calc(25px * #{$-size-ratio});
+      animation-delay: calc(15s * #{$-time-ratio});
+      animation-duration: calc(45s * #{$-time-ratio});
+    }
+
+    &:nth-child(9) {
+      left: 20%;
+      width: calc(15px * #{$-size-ratio});
+      height: calc(15px * #{$-size-ratio});
+      animation-delay: calc(2s * #{$-time-ratio});
+      animation-duration: calc(35s * #{$-time-ratio});
+    }
+
+    &:nth-child(10) {
+      left: 85%;
+      width: calc(150px * #{$-size-ratio});
+      height: calc(150px * #{$-size-ratio});
+      animation-delay: calc(0s * #{$-time-ratio});
+      animation-duration: calc(11s * #{$-time-ratio});
+    }
+  }
+}
+
+@keyframes bubbleAnimate {
+  0% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 1;
+    border-radius: 0;
+  }
+
+  100% {
+    transform: translateY($-end-offset) rotate(720deg);
+    opacity: 0;
+    border-radius: 50%;
+  }
+}

package/xpack/styles/_theme.scss

@@ -0,0 +1,68 @@
+$body-color: var(--body-color);
+$body-strong-color: var(--body-strong-color);
+$body-color-rgb: var(--body-color-rgb);
+$body-bg: var(--body-bg);
+$body-bg-rgb: var(--body-bg-rgb);
+$link-color: var(--link-color);
+$link-hover-color: var(--link-hover-color);
+$border-color: var(--border-color);
+$black: var(--black);
+
+// scrollbar
+$scrollbar-track-bg: var(--scrollbar-track-bg);
+$scrollbar-thumb-bg: var(--scrollbar-thumb-bg);
+$scrollbar-thumb-hover-bg: var(--scrollbar-thumb-hover-bg);
+
+@mixin light {
+  [data-theme='dark'] & {
+    @content;
+  }
+}
+
+@mixin dark {
+  [data-theme='dark'] & {
+    @content;
+  }
+}
+
+:root,
+[data-theme='dark'] {
+  --body-color: #212529;
+  --body-strong-color: #121416;
+  --body-color-rgb: 33, 37, 41;
+  --body-bg: #fff;
+  --body-bg-rgb: 255, 255, 255;
+  --link-color: #0d6efd;
+  --link-color-rgb: 13, 110, 253;
+  --link-decoration: none;
+  --link-hover-color: #0a58ca;
+  --link-hover-color-rgb: 10, 88, 202;
+  --border-color: #dee2e6;
+  --black: #000;
+
+  // scrollbar
+  --scrollbar-track-bg: #e8e8e8;
+  --scrollbar-thumb-bg: #b9b9b9;
+  --scrollbar-thumb-hover-bg: #8b8b8b;
+}
+
+[data-theme='dark'] {
+  @media not print {
+    --body-color: #adb5bd;
+    --body-strong-color: #d1d5da;
+    --body-color-rgb: 173, 181, 189;
+    --body-bg: #212529;
+    --body-bg-rgb: 33, 37, 41;
+    --link-color: #6ea8fe;
+    --link-hover-color: #8bb9fe;
+    --link-color-rgb: 110, 168, 254;
+    --link-hover-color-rgb: 139, 185, 254;
+    --border-color: #495057;
+    --black: #000;
+
+    // scrollbar
+    --scrollbar-track-bg: #35393c;
+    --scrollbar-thumb-bg: #5e6063;
+    --scrollbar-thumb-hover-bg: #86888a;
+  }
+}

package/xpack/styles/_top-panel.scss

@@ -0,0 +1,87 @@
+@use 'border' as *;
+@use 'breakpoint' as *;
+@use 'px2rem' as *;
+
+.top-panel {
+  &.xpack-o-root {
+    border: none;
+    @include border-bottom;
+
+    @include lg {
+      --navbar-max-width: px2rem(240px);
+      width: 100%;
+      flex-direction: row;
+      height: min-content;
+      position: relative;
+    }
+  }
+
+  .xpack-o-root {
+    &__nav-items {
+      height: calc(100vh - px2rem(35px));
+
+      @include lg {
+        position: fixed;
+        top: px2rem(35px);
+        display: block;
+        padding-bottom: px2rem(8px);
+        transform: translateX(-100%);
+      }
+
+      &.show {
+        display: block;
+        box-shadow: 0 px2rem(2px) px2rem(4px) #a6a6a6;
+        transform: translateX(0);
+        transition: transform 0.2s ease-out;
+      }
+    }
+
+    &__title {
+      display: flex;
+    }
+
+    &__button-close,
+    &__button-setting {
+      @include lg {
+        display: flex;
+      }
+    }
+
+    &__frame-control {
+      @include lg {
+        margin-left: auto;
+        margin-right: auto;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &__active-item-options {
+      @include lg {
+        display: block;
+        position: fixed;
+        transform: translateX(100%);
+        top: px2rem(31px);
+      }
+
+      &.show {
+        display: block;
+        box-shadow: 0 px2rem(2px) px2rem(4px) #a6a6a6;
+        transform: translateX(0);
+        transition: transform 0.2s ease-out;
+      }
+    }
+
+    &__actual-width {
+      @include lg {
+        margin-top: px2rem(4px);
+      }
+    }
+
+    &__controls {
+      @include lg {
+        display: block;
+      }
+    }
+  }
+}