fcr-ui-scene 3.8.0-alpha → 3.8.1-alpha

package/lib/modules/whiteboard/components/toolbar/style.css

@@ -1,591 +1,591 @@
-.fcr-board-toolbar {
-  position: absolute;
-  width: 50px;
-  min-height: 70px;
-  z-index: 10;
-  border-radius: 8px;
-  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
-  box-shadow: var(--fcr_web_light_dropup);
-  min-height: 70px;
-  cursor: pointer;
-}
-
-.fcr-board-toolbar .fcr-divider-vertical::before {
-  background: linear-gradient(
-    to left,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(0, 0, 0, 0.25) 50%,
-    rgba(255, 255, 255, 0) 97.92%
-  );
-}
-
-.fcr-board-toolbar-main {
-  padding: 6px 0;
-  border-radius: 8px;
-  width: 50px;
-  border: 1px solid var(--fcr_ui_scene_black1);
-}
-
-.fcr-board-toolbar-horizontal.fcr-board-toolbar-main {
-}
-
-.fcr-board-toolbar-horizontal {
-  position: absolute;
-  width: 836px;
-  height: 70px;
-  z-index: 10;
-  border: 1px solid var(--fcr_ui_scene_black1);
-}
-
-.fcr-board-toolbar-horizontal .fcr-board-toolbar-list {
-  flex-direction: row;
-  display: flex;
-  padding: 0 10px;
-  align-items: center;
-}
-
-.fcr-board-toolbar-horizontal .fcr-board-toolbar-list-title {
-  display: block;
-  width: 50px;
-  margin-left: -2px;
-}
-
-.fcr-board-toolbar-horizontal .fcr-board-toolbar-list li {
-  width: 46px;
-  height: 36px;
-  margin-right: 16px;
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--fcr_ui_scene_black6);
-  text-align: center;
-}
-
-.fcr-board-toolbar-horizontal .fcr-board-toolbar-item-surrounding {
-  width: 46px;
-  height: 36px;
-}
-
-.fcr-board-toolbar-panel .fcr-popover-trigger-opened {
-  background-color: unset;
-}
-
-.fcr-board-toolbar--left {
-  margin-left: 10px;
-}
-
-.fcr-board-toolbar--right {
-  margin-left: -10px;
-}
-
-.fcr-board-toolbar-list {
-  margin: 0;
-}
-
-.fcr-board-toolbar-list .fcr-popover-trigger-opened {
-  background-color: unset;
-}
-
-.fcr-board-toolbar-list li {
-  padding: 2px 0;
-  display: flex;
-  justify-content: center;
-}
-
-.fcr-board-toolbar-list li .fcr-divider-vertical,
-.fcr-board-toolbar__picker__overlay .fcr-divider-vertical {
-  width: 32px;
-  height: 0;
-  margin: 0 auto;
-}
-
-.fcr-board-toolbar-list li .fcr-divider-marign-top {
-  margin-top: 5px;
-}
-
-.fcr-board-toolbar-list li .fcr-divider-marign-bottom,
-.fcr-board-toolbar__picker__overlay .fcr-divider-marign-bottom {
-  margin-bottom: 5px;
-}
-
-.fcr-board-toolbar-list
-  .fcr-board-toolbar-item-surrounding:hover:not(.fcr-board-toolbar-item-surrounding--disabled) {
-  background: var(--fcr_ui_scene_ramp_brand1);
-}
-
-.fcr-board-toolbar-item-surrounding--active {
-  background: var(--fcr_ui_scene_ramp_brand0);
-}
-
-.fcr-board-toolbar-item-surrounding--disabled {
-  opacity: 0.3;
-}
-
-.fcr-board-toolbar-item-surrounding {
-  border-radius: 6px;
-  position: relative;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  margin: 0 auto;
-}
-
-.fcr-board-toolbar-expansion-icon {
-  position: absolute;
-  right: 2px;
-  bottom: 4px;
-}
-
-.fcr-board-toolbar-expansion-icon path {
-  fill: var(--fcr_ui_scene_black6);
-}
-
-.fcr-board-toolbar__color-items {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 42px;
-  margin: 0 auto;
-}
-
-.fcr-board-toolbar__color-item {
-  border-radius: 50%;
-  position: relative;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  margin: 5px;
-}
-
-.fcr-board-toolbar__color-item-inner {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 4px solid #fff;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 2px;
-}
-.fcr-board-toolbar__color-item-inner svg {
-  width: 14px;
-  height: 14px;
-}
-
-.fcr-board-toolbar__color-item--active::after {
-  border-radius: 50%;
-  content: '';
-  width: 14px;
-  height: 14px;
-  border: 4px solid #fff;
-}
-
-.fcr-board-toolbar__color-item--picker {
-  background-image: conic-gradient(
-    from 180deg at 50% 50%,
-    #ff7171 0deg,
-    #ffa471 30deg,
-    #ffe37f 63.75deg,
-    #e3ff75 91.88deg,
-    #a9ff75 125.63deg,
-    #79ff8f 163.12deg,
-    #72ffe6 189.38deg,
-    #70cff8 210deg,
-    #6880ff 232.5deg,
-    #7856ff 260.62deg,
-    #dd56ff 277.5deg,
-    #ff56da 303.75deg,
-    #ff3797 327.96deg,
-    #ff6464 340.25deg,
-    #ff5656 359.93deg,
-    #ff7171 360deg
-  );
-}
-
-.fcr-board-toolbar__color-item--disabled {
-  background: var(--fcr_ui_scene_black1);
-  background-image: unset;
-  cursor: not-allowed;
-}
-
-.fcr-board-toolbar__picker-color--border::before {
-  border: 1px solid var(--fcr_ui_scene_line1);
-  position: absolute;
-  content: '';
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  left: 0;
-  top: 0;
-}
-
-.fcr-board-toolbar__picker-color--active.fcr-board-toolbar__picker-color--border::after {
-  box-shadow:
-    0 0 0 1px var(--fcr_ui_scene_black1),
-    inset 0 0 0 1px var(--fcr_ui_scene_black1);
-}
-
-.fcr-board-toolbar-panel--color > div {
-  position: relative;
-  width: 18px;
-  height: 18px;
-  margin: 12px 8px;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.fcr-board-toolbar-panel--color > div::after {
-  border-radius: 50%;
-  content: '';
-  width: 28px;
-  height: 28px;
-  position: absolute;
-  left: -5px;
-  top: -5px;
-  border: 3px solid transparent;
-}
-
-.fcr-board-toolbar-panel--color > div:hover::after {
-  border-color: var(--color-brand-6);
-}
-
-.fcr-board-toolbar-panel--color > div.fcr-board-toolbar__picker-color--active::after {
-  border-color: currentColor;
-}
-
-.fcr-board-toolbar-panel--color {
-  display: flex;
-  flex-wrap: wrap;
-  width: 148px;
-  justify-content: space-around;
-}
-
-.fcr-board-toolbar-main,
-.fcr-board-toolbar-extra {
-  background-color: var(--fcr_ui_scene_white10);
-}
-
-.fcr-board-toolbar-extra {
-  padding: 10px 0;
-  border-radius: 0 0 8px 8px;
-}
-
-.fcr-board-toolbar-panel {
-  background: var(--fcr_ui_scene_white10) !important;
-  min-width: 48px;
-}
-
-.fcr-board-toolbar-panel .fcr-board-toolbar-panel--footer {
-  font-size: 12px;
-  color: var(--fcr_ui_scene_black3);
-  height: 24px;
-  text-align: center;
-  line-height: 24px;
-  border-top: 1px solid var(--fcr_ui_scene_black1);
-  width: 100%;
-}
-
-.fcr-board-toolbar-panel--pen,
-.fcr-board-toolbar-panel--shape,
-.fcr-board-toolbar-panel--eraser,
-.fcr-board-toolbar-panel--capture,
-.fcr-board-toolbar-panel--extra {
-  padding: 6px;
-}
-
-.fcr-board-toolbar-handle {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  cursor: move;
-}
-
-.fcr-board-toolbar-handle:hover circle {
-  fill: var(--fcr_ui_scene_ramp_brand6);
-  fill-opacity: 0.4;
-}
-
-.fcr-board-toolbar__picker__overlay .fcr-tooltip-inner {
-  width: unset !important;
-  overflow: unset !important;
-}
-
-.fcr-board-toolbar__set-common__overlay .fcr-button-gray {
-  background: none;
-  border: none;
-}
-
-.fcr-board-toolbar-panel__pen-type {
-  display: flex;
-  justify-content: space-between;
-}
-
-.fcr-board-toolbar-panel__divider {
-  border-style: var(--color-block-2);
-  margin-top: 15px;
-  margin-bottom: 10px;
-}
-
-.fcr-board-toolbar-panel--pen > div,
-.fcr-board-toolbar-panel--shape > div,
-.fcr-board-toolbar-panel--eraser > div,
-.fcr-board-toolbar-panel--capture > div,
-.fcr-board-toolbar-panel--extra > div {
-  border-radius: 6px;
-  width: 34px;
-  height: 34px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.fcr-board-toolbar-panel--pen > div:not(:last-child),
-.fcr-board-toolbar-panel--shape > div:not(:last-child),
-.fcr-board-toolbar-panel--eraser > div:not(:last-child),
-.fcr-board-toolbar-panel--capture > div:not(:last-child),
-.fcr-board-toolbar-panel--extra > div:not(:last-child) {
-  margin-bottom: 6px;
-}
-
-.fcr-board-toolbar-panel--pen > div:hover,
-.fcr-board-toolbar-panel--shape > div:hover,
-.fcr-board-toolbar-panel--eraser > div:hover,
-.fcr-board-toolbar-panel--capture > div:hover,
-.fcr-board-toolbar-panel--extra > div:hover {
-  background: var(--fcr_ui_scene_ramp_brand1);
-}
-
-.fcr-board-toolbar-panel--pen > div.fcr-board-toolbar-panel--active,
-.fcr-board-toolbar-panel--shape > div.fcr-board-toolbar-panel--active,
-.fcr-board-toolbar-panel--eraser > div.fcr-board-toolbar-panel--active,
-.fcr-board-toolbar-panel--capture > div.fcr-board-toolbar-panel--active,
-.fcr-board-toolbar-panel--extra > div.fcr-board-toolbar-panel--active {
-  background: var(--fcr_ui_scene_ramp_brand0);
-  border: 2px solid var(--color-brand-6);
-}
-
-.fcr-board-toolbar-panel--extra > .fcr-board-toolbar__color-items:hover {
-  background: unset;
-}
-
-.fcr-board-toolbar-fold {
-  position: absolute;
-  top: 50%;
-  cursor: pointer;
-  transition: all 0.2s;
-  filter: drop-shadow(2px 0px 1px rgba(0, 0, 0, 0.05));
-}
-
-.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold {
-  opacity: 0;
-}
-
-.fcr-board-toolbar--unfolded:hover .fcr-board-toolbar-fold {
-  opacity: 1;
-}
-
-.fcr-board-toolbar--left .fcr-board-toolbar-fold {
-  left: calc(100% - 1px);
-  transform: translateY(-50%);
-}
-
-.fcr-board-toolbar--right .fcr-board-toolbar-fold {
-  right: calc(100% - 1px);
-  transform: translateY(-50%) rotate(180deg);
-}
-
-.fcr-board-toolbar--folded .fcr-board-toolbar-fold {
-  transform: translateY(-50%) rotate(0deg);
-}
-
-.fcr-board-toolbar-fold path:nth-child(1) {
-  --fill-color: var(--fcr_ui_scene_white10);
-  fill: var(--fill-color);
-}
-
-.fcr-board-toolbar-fold path:nth-child(2) {
-  --fill-color: var(--fcr_ui_scene_black8);
-  fill: var(--fill-color);
-  transition: all 0.2s;
-}
-
-.fcr-board-toolbar-fold:hover path:nth-child(2) {
-  fill: var(--fcr_ui_scene_ramp_brand6);
-}
-
-/* toolbar at left side */
-.fcr-board-toolbar--left.fcr-board-toolbar--unfolded {
-  animation: 0.3s slide-in-to-right forwards;
-}
-
-.fcr-board-toolbar--left.fcr-board-toolbar--folded {
-  animation: 0.3s slide-out-to-left forwards;
-}
-
-.fcr-board-toolbar--left.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold path:nth-child(2) {
-  transform: rotate(0deg);
-  transform-origin: 8px;
-  transition: transform 0s linear 0.2s;
-}
-
-.fcr-board-toolbar--left.fcr-board-toolbar--folded .fcr-board-toolbar-fold path:nth-child(2) {
-  transform: rotate(180deg);
-  transform-origin: 8px;
-  transition: transform 0s linear 0.2s;
-}
-
-/* toolbar at right side */
-.fcr-board-toolbar--right.fcr-board-toolbar--unfolded {
-  animation: 0.3s slide-in-to-left forwards;
-}
-
-.fcr-board-toolbar--right.fcr-board-toolbar--folded {
-  animation: 0.3s slide-out-to-right forwards;
-}
-
-.fcr-board-toolbar--right.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold path:nth-child(2) {
-  transform: rotate(0deg);
-  transform-origin: 8px;
-  transition: transform 0s linear 0.2s;
-}
-
-.fcr-board-toolbar--right.fcr-board-toolbar--folded .fcr-board-toolbar-fold path:nth-child(2) {
-  transform: rotate(180deg);
-  transform-origin: 8px;
-  transition: transform 0s linear 0.2s;
-}
-
-.fcr-board-toolbar-panel--extra {
-  max-height: 266px;
-  overflow: auto;
-  overflow-y: overlay;
-}
-
-.fcr-board-toolbar-panel--extra::-webkit-scrollbar {
-  width: 3px;
-}
-
-.section::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.fcr-board-toolbar-panel--extra::-webkit-scrollbar-thumb {
-  width: 3px;
-  opacity: 0.8;
-  border-radius: 3px;
-}
-
-.fcr-board-toolbar__picker__overlay .fcr-tooltip-inner {
-  overflow: hidden !important;
-  border: 1px solid var(--fcr_ui_scene_black1) !important;
-  border-radius: 8px !important;
-  box-shadow: var(--fcr_web_light_dropup) !important;
-}
-
-.fcr-board-toobar-folded-button {
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--fcr_ui_scene_black2);
-  flex-direction: column;
-  background: var(--fcr_ui_scene_white10);
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.fcr-board-toobar-folded-button svg {
-  width: 28px;
-}
-
-.fcr-board-toobar-folded-button path {
-  fill: var(--fcr_ui_scene_black8) !important;
-}
-
-.fcr-board-toobar-folded-button:hover {
-  color: var(--fcr_ui_scene_ramp_brand6);
-}
-
-.fcr-board-toobar-folded-button:hover path {
-  fill: var(--fcr_ui_scene_ramp_brand6) !important;
-}
-
-.fcr-board-toolbar--folded .fcr-board-toolbar-main {
-  display: none;
-}
-
-.fcr-board-toolbar--unfolded .fcr-board-toolbar-main {
-  display: block;
-}
-
-.fcr-board-toolbar--folded .fcr-board-toobar-folded-button {
-  display: flex;
-}
-
-.fcr-board-toolbar--unfolded .fcr-board-toobar-folded-button {
-  display: none;
-}
-
-@keyframes slide-out-to-left {
-  0% {
-    transform: translateX(0px);
-  }
-
-  80% {
-    transform: translateX(-65px);
-  }
-
-  100% {
-    transform: translateX(-50px);
-  }
-}
-
-@keyframes slide-in-to-right {
-  0% {
-    transform: translateX(-50px);
-  }
-
-  20% {
-    transform: translateX(-65px);
-  }
-
-  100% {
-    transform: translateX(0px);
-  }
-}
-
-@keyframes slide-out-to-right {
-  0% {
-    transform: translateX(0px);
-  }
-
-  80% {
-    transform: translateX(65px);
-  }
-
-  100% {
-    transform: translateX(50px);
-  }
-}
-
-@keyframes slide-in-to-left {
-  0% {
-    transform: translateX(50px);
-  }
-
-  20% {
-    transform: translateX(65px);
-  }
-
-  100% {
-    transform: translateX(0px);
-  }
-}
+.fcr-board-toolbar {
+  position: absolute;
+  width: 50px;
+  min-height: 70px;
+  z-index: 10;
+  border-radius: 8px;
+  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
+  box-shadow: var(--fcr_web_light_dropup);
+  min-height: 70px;
+  cursor: pointer;
+}
+
+.fcr-board-toolbar .fcr-divider-vertical::before {
+  background: linear-gradient(
+    to left,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(0, 0, 0, 0.25) 50%,
+    rgba(255, 255, 255, 0) 97.92%
+  );
+}
+
+.fcr-board-toolbar-main {
+  padding: 6px 0;
+  border-radius: 8px;
+  width: 50px;
+  border: 1px solid var(--fcr_ui_scene_black1);
+}
+
+.fcr-board-toolbar-horizontal.fcr-board-toolbar-main {
+}
+
+.fcr-board-toolbar-horizontal {
+  position: absolute;
+  width: 836px;
+  height: 70px;
+  z-index: 10;
+  border: 1px solid var(--fcr_ui_scene_black1);
+}
+
+.fcr-board-toolbar-horizontal .fcr-board-toolbar-list {
+  flex-direction: row;
+  display: flex;
+  padding: 0 10px;
+  align-items: center;
+}
+
+.fcr-board-toolbar-horizontal .fcr-board-toolbar-list-title {
+  display: block;
+  width: 50px;
+  margin-left: -2px;
+}
+
+.fcr-board-toolbar-horizontal .fcr-board-toolbar-list li {
+  width: 46px;
+  height: 36px;
+  margin-right: 16px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--fcr_ui_scene_black6);
+  text-align: center;
+}
+
+.fcr-board-toolbar-horizontal .fcr-board-toolbar-item-surrounding {
+  width: 46px;
+  height: 36px;
+}
+
+.fcr-board-toolbar-panel .fcr-popover-trigger-opened {
+  background-color: unset;
+}
+
+.fcr-board-toolbar--left {
+  margin-left: 10px;
+}
+
+.fcr-board-toolbar--right {
+  margin-left: -10px;
+}
+
+.fcr-board-toolbar-list {
+  margin: 0;
+}
+
+.fcr-board-toolbar-list .fcr-popover-trigger-opened {
+  background-color: unset;
+}
+
+.fcr-board-toolbar-list li {
+  padding: 2px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.fcr-board-toolbar-list li .fcr-divider-vertical,
+.fcr-board-toolbar__picker__overlay .fcr-divider-vertical {
+  width: 32px;
+  height: 0;
+  margin: 0 auto;
+}
+
+.fcr-board-toolbar-list li .fcr-divider-marign-top {
+  margin-top: 5px;
+}
+
+.fcr-board-toolbar-list li .fcr-divider-marign-bottom,
+.fcr-board-toolbar__picker__overlay .fcr-divider-marign-bottom {
+  margin-bottom: 5px;
+}
+
+.fcr-board-toolbar-list
+  .fcr-board-toolbar-item-surrounding:hover:not(.fcr-board-toolbar-item-surrounding--disabled) {
+  background: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.fcr-board-toolbar-item-surrounding--active {
+  background: var(--fcr_ui_scene_ramp_brand0);
+}
+
+.fcr-board-toolbar-item-surrounding--disabled {
+  opacity: 0.3;
+}
+
+.fcr-board-toolbar-item-surrounding {
+  border-radius: 6px;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin: 0 auto;
+}
+
+.fcr-board-toolbar-expansion-icon {
+  position: absolute;
+  right: 2px;
+  bottom: 4px;
+}
+
+.fcr-board-toolbar-expansion-icon path {
+  fill: var(--fcr_ui_scene_black6);
+}
+
+.fcr-board-toolbar__color-items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 42px;
+  margin: 0 auto;
+}
+
+.fcr-board-toolbar__color-item {
+  border-radius: 50%;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 5px;
+}
+
+.fcr-board-toolbar__color-item-inner {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 4px solid #fff;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px;
+}
+.fcr-board-toolbar__color-item-inner svg {
+  width: 14px;
+  height: 14px;
+}
+
+.fcr-board-toolbar__color-item--active::after {
+  border-radius: 50%;
+  content: '';
+  width: 14px;
+  height: 14px;
+  border: 4px solid #fff;
+}
+
+.fcr-board-toolbar__color-item--picker {
+  background-image: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff7171 0deg,
+    #ffa471 30deg,
+    #ffe37f 63.75deg,
+    #e3ff75 91.88deg,
+    #a9ff75 125.63deg,
+    #79ff8f 163.12deg,
+    #72ffe6 189.38deg,
+    #70cff8 210deg,
+    #6880ff 232.5deg,
+    #7856ff 260.62deg,
+    #dd56ff 277.5deg,
+    #ff56da 303.75deg,
+    #ff3797 327.96deg,
+    #ff6464 340.25deg,
+    #ff5656 359.93deg,
+    #ff7171 360deg
+  );
+}
+
+.fcr-board-toolbar__color-item--disabled {
+  background: var(--fcr_ui_scene_black1);
+  background-image: unset;
+  cursor: not-allowed;
+}
+
+.fcr-board-toolbar__picker-color--border::before {
+  border: 1px solid var(--fcr_ui_scene_line1);
+  position: absolute;
+  content: '';
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  left: 0;
+  top: 0;
+}
+
+.fcr-board-toolbar__picker-color--active.fcr-board-toolbar__picker-color--border::after {
+  box-shadow:
+    0 0 0 1px var(--fcr_ui_scene_black1),
+    inset 0 0 0 1px var(--fcr_ui_scene_black1);
+}
+
+.fcr-board-toolbar-panel--color > div {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  margin: 12px 8px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.fcr-board-toolbar-panel--color > div::after {
+  border-radius: 50%;
+  content: '';
+  width: 28px;
+  height: 28px;
+  position: absolute;
+  left: -5px;
+  top: -5px;
+  border: 3px solid transparent;
+}
+
+.fcr-board-toolbar-panel--color > div:hover::after {
+  border-color: var(--color-brand-6);
+}
+
+.fcr-board-toolbar-panel--color > div.fcr-board-toolbar__picker-color--active::after {
+  border-color: currentColor;
+}
+
+.fcr-board-toolbar-panel--color {
+  display: flex;
+  flex-wrap: wrap;
+  width: 148px;
+  justify-content: space-around;
+}
+
+.fcr-board-toolbar-main,
+.fcr-board-toolbar-extra {
+  background-color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-board-toolbar-extra {
+  padding: 10px 0;
+  border-radius: 0 0 8px 8px;
+}
+
+.fcr-board-toolbar-panel {
+  background: var(--fcr_ui_scene_white10) !important;
+  min-width: 48px;
+}
+
+.fcr-board-toolbar-panel .fcr-board-toolbar-panel--footer {
+  font-size: 12px;
+  color: var(--fcr_ui_scene_black3);
+  height: 24px;
+  text-align: center;
+  line-height: 24px;
+  border-top: 1px solid var(--fcr_ui_scene_black1);
+  width: 100%;
+}
+
+.fcr-board-toolbar-panel--pen,
+.fcr-board-toolbar-panel--shape,
+.fcr-board-toolbar-panel--eraser,
+.fcr-board-toolbar-panel--capture,
+.fcr-board-toolbar-panel--extra {
+  padding: 6px;
+}
+
+.fcr-board-toolbar-handle {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  cursor: move;
+}
+
+.fcr-board-toolbar-handle:hover circle {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+  fill-opacity: 0.4;
+}
+
+.fcr-board-toolbar__picker__overlay .fcr-tooltip-inner {
+  width: unset !important;
+  overflow: unset !important;
+}
+
+.fcr-board-toolbar__set-common__overlay .fcr-button-gray {
+  background: none;
+  border: none;
+}
+
+.fcr-board-toolbar-panel__pen-type {
+  display: flex;
+  justify-content: space-between;
+}
+
+.fcr-board-toolbar-panel__divider {
+  border-style: var(--color-block-2);
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+.fcr-board-toolbar-panel--pen > div,
+.fcr-board-toolbar-panel--shape > div,
+.fcr-board-toolbar-panel--eraser > div,
+.fcr-board-toolbar-panel--capture > div,
+.fcr-board-toolbar-panel--extra > div {
+  border-radius: 6px;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.fcr-board-toolbar-panel--pen > div:not(:last-child),
+.fcr-board-toolbar-panel--shape > div:not(:last-child),
+.fcr-board-toolbar-panel--eraser > div:not(:last-child),
+.fcr-board-toolbar-panel--capture > div:not(:last-child),
+.fcr-board-toolbar-panel--extra > div:not(:last-child) {
+  margin-bottom: 6px;
+}
+
+.fcr-board-toolbar-panel--pen > div:hover,
+.fcr-board-toolbar-panel--shape > div:hover,
+.fcr-board-toolbar-panel--eraser > div:hover,
+.fcr-board-toolbar-panel--capture > div:hover,
+.fcr-board-toolbar-panel--extra > div:hover {
+  background: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.fcr-board-toolbar-panel--pen > div.fcr-board-toolbar-panel--active,
+.fcr-board-toolbar-panel--shape > div.fcr-board-toolbar-panel--active,
+.fcr-board-toolbar-panel--eraser > div.fcr-board-toolbar-panel--active,
+.fcr-board-toolbar-panel--capture > div.fcr-board-toolbar-panel--active,
+.fcr-board-toolbar-panel--extra > div.fcr-board-toolbar-panel--active {
+  background: var(--fcr_ui_scene_ramp_brand0);
+  border: 2px solid var(--color-brand-6);
+}
+
+.fcr-board-toolbar-panel--extra > .fcr-board-toolbar__color-items:hover {
+  background: unset;
+}
+
+.fcr-board-toolbar-fold {
+  position: absolute;
+  top: 50%;
+  cursor: pointer;
+  transition: all 0.2s;
+  filter: drop-shadow(2px 0px 1px rgba(0, 0, 0, 0.05));
+}
+
+.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold {
+  opacity: 0;
+}
+
+.fcr-board-toolbar--unfolded:hover .fcr-board-toolbar-fold {
+  opacity: 1;
+}
+
+.fcr-board-toolbar--left .fcr-board-toolbar-fold {
+  left: calc(100% - 1px);
+  transform: translateY(-50%);
+}
+
+.fcr-board-toolbar--right .fcr-board-toolbar-fold {
+  right: calc(100% - 1px);
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.fcr-board-toolbar--folded .fcr-board-toolbar-fold {
+  transform: translateY(-50%) rotate(0deg);
+}
+
+.fcr-board-toolbar-fold path:nth-child(1) {
+  --fill-color: var(--fcr_ui_scene_white10);
+  fill: var(--fill-color);
+}
+
+.fcr-board-toolbar-fold path:nth-child(2) {
+  --fill-color: var(--fcr_ui_scene_black8);
+  fill: var(--fill-color);
+  transition: all 0.2s;
+}
+
+.fcr-board-toolbar-fold:hover path:nth-child(2) {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+
+/* toolbar at left side */
+.fcr-board-toolbar--left.fcr-board-toolbar--unfolded {
+  animation: 0.3s slide-in-to-right forwards;
+}
+
+.fcr-board-toolbar--left.fcr-board-toolbar--folded {
+  animation: 0.3s slide-out-to-left forwards;
+}
+
+.fcr-board-toolbar--left.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold path:nth-child(2) {
+  transform: rotate(0deg);
+  transform-origin: 8px;
+  transition: transform 0s linear 0.2s;
+}
+
+.fcr-board-toolbar--left.fcr-board-toolbar--folded .fcr-board-toolbar-fold path:nth-child(2) {
+  transform: rotate(180deg);
+  transform-origin: 8px;
+  transition: transform 0s linear 0.2s;
+}
+
+/* toolbar at right side */
+.fcr-board-toolbar--right.fcr-board-toolbar--unfolded {
+  animation: 0.3s slide-in-to-left forwards;
+}
+
+.fcr-board-toolbar--right.fcr-board-toolbar--folded {
+  animation: 0.3s slide-out-to-right forwards;
+}
+
+.fcr-board-toolbar--right.fcr-board-toolbar--unfolded .fcr-board-toolbar-fold path:nth-child(2) {
+  transform: rotate(0deg);
+  transform-origin: 8px;
+  transition: transform 0s linear 0.2s;
+}
+
+.fcr-board-toolbar--right.fcr-board-toolbar--folded .fcr-board-toolbar-fold path:nth-child(2) {
+  transform: rotate(180deg);
+  transform-origin: 8px;
+  transition: transform 0s linear 0.2s;
+}
+
+.fcr-board-toolbar-panel--extra {
+  max-height: 266px;
+  overflow: auto;
+  overflow-y: overlay;
+}
+
+.fcr-board-toolbar-panel--extra::-webkit-scrollbar {
+  width: 3px;
+}
+
+.section::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.fcr-board-toolbar-panel--extra::-webkit-scrollbar-thumb {
+  width: 3px;
+  opacity: 0.8;
+  border-radius: 3px;
+}
+
+.fcr-board-toolbar__picker__overlay .fcr-tooltip-inner {
+  overflow: hidden !important;
+  border: 1px solid var(--fcr_ui_scene_black1) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--fcr_web_light_dropup) !important;
+}
+
+.fcr-board-toobar-folded-button {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--fcr_ui_scene_black2);
+  flex-direction: column;
+  background: var(--fcr_ui_scene_white10);
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.fcr-board-toobar-folded-button svg {
+  width: 28px;
+}
+
+.fcr-board-toobar-folded-button path {
+  fill: var(--fcr_ui_scene_black8) !important;
+}
+
+.fcr-board-toobar-folded-button:hover {
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-board-toobar-folded-button:hover path {
+  fill: var(--fcr_ui_scene_ramp_brand6) !important;
+}
+
+.fcr-board-toolbar--folded .fcr-board-toolbar-main {
+  display: none;
+}
+
+.fcr-board-toolbar--unfolded .fcr-board-toolbar-main {
+  display: block;
+}
+
+.fcr-board-toolbar--folded .fcr-board-toobar-folded-button {
+  display: flex;
+}
+
+.fcr-board-toolbar--unfolded .fcr-board-toobar-folded-button {
+  display: none;
+}
+
+@keyframes slide-out-to-left {
+  0% {
+    transform: translateX(0px);
+  }
+
+  80% {
+    transform: translateX(-65px);
+  }
+
+  100% {
+    transform: translateX(-50px);
+  }
+}
+
+@keyframes slide-in-to-right {
+  0% {
+    transform: translateX(-50px);
+  }
+
+  20% {
+    transform: translateX(-65px);
+  }
+
+  100% {
+    transform: translateX(0px);
+  }
+}
+
+@keyframes slide-out-to-right {
+  0% {
+    transform: translateX(0px);
+  }
+
+  80% {
+    transform: translateX(65px);
+  }
+
+  100% {
+    transform: translateX(50px);
+  }
+}
+
+@keyframes slide-in-to-left {
+  0% {
+    transform: translateX(50px);
+  }
+
+  20% {
+    transform: translateX(65px);
+  }
+
+  100% {
+    transform: translateX(0px);
+  }
+}