@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/components/kup-card/kup-card.css

@@ -1,200 +1,492 @@
-@keyframes mdc-ripple-fg-radius-in {
-  from {
-    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
-  }
-  to {
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-  }
+.builtin-layout-1 {
+  padding: 0.5em;
 }
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
-  to {
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
+.builtin-layout-1 .section-1 {
+  box-sizing: border-box;
+  height: 5em;
+  overflow: auto;
+  padding-bottom: 1em;
+  width: 100%;
 }
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-  to {
-    opacity: 0;
-  }
+.builtin-layout-1 .section-1 .sub-1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
-.mdc-ripple-surface {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-  position: relative;
-  outline: none;
-  overflow: hidden;
+.builtin-layout-1 .section-2 {
+  height: calc(100% - 60px);
+  overflow: auto;
+  width: 100%;
+}
+.builtin-layout-1 .prev-page {
+  margin-left: auto;
+}
+.builtin-layout-1 .change-view-button {
+  margin: auto;
+  width: 12em;
+  text-align: center;
+}
+.builtin-layout-1 #change-view-button button {
+  text-transform: capitalize;
+}
+.builtin-layout-1 .next-page {
+  margin-right: auto;
+}
+.builtin-layout-1 .calendar {
+  border-collapse: collapse;
+  width: 100%;
+}
+.builtin-layout-1 thead {
+  border-bottom: 1px solid var(--kup-border-color);
+}
+.builtin-layout-1 .item-text {
+  color: rgba(var(--kup-text-color-rgb), 0.5);
+}
+.builtin-layout-1 .item {
+  text-align: center;
+}
+.builtin-layout-1 .item:not(.selected) .item-number:hover {
+  background-color: var(--kup-hover-background-color);
+}
+.builtin-layout-1 .item.selected .item-number, .builtin-layout-1 .item.selected .item-number:hover {
+  background-color: rgba(var(--kup-primary-color-rgb), 0.175);
+}
+.builtin-layout-1 .item-number {
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  line-height: 2.5em;
+  margin: auto;
+  width: 2.5em;
+  transition: background-color 0.25s;
+  text-transform: capitalize;
 }
 
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
+.builtin-layout-2 .clock {
+  box-shadow: var(--kup-box-shadow);
+  width: 300px;
+  height: 450px;
+  background-color: var(--kup-background-color);
+  position: relative;
+  font-family: var(--kup-font-family);
+}
+.builtin-layout-2 .top {
+  background-color: var(--kup-primary-color);
+  color: var(--kup-text-on-primary-color);
+  height: 100px;
+  line-height: 100px;
+  font-size: 50px;
+  text-align: center;
+}
+.builtin-layout-2 .top span {
+  cursor: pointer;
+  opacity: 0.75;
+  transition: 0.25s ease-in-out;
+}
+.builtin-layout-2 .top .visible {
+  opacity: 1;
+}
+.builtin-layout-2 .circle {
+  user-select: none;
+  background-color: rgba(var(--kup-text-color-rgb), 0.1);
+  width: 250px;
+  height: 250px;
+  border-radius: 1000px;
+  position: relative;
+  top: 25px;
+  left: 25px;
+  box-sizing: border-box;
+  display: none;
+}
+.builtin-layout-2 .circle.visible {
+  display: block;
+}
+.builtin-layout-2 .mid {
   position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
+  left: calc(50% - 0px);
+  top: calc(50% - 0px);
+  width: 2px;
+  height: 2px;
+  border-radius: 10px;
+  background-color: var(--kup-text-color);
+}
+.builtin-layout-2 .hour {
+  position: absolute;
+  height: 40px;
+  line-height: 40px;
+  width: 40px;
+  border-radius: 40px;
+  text-align: center;
+}
+.builtin-layout-2 .hour.selected {
+  z-index: 2;
+}
+.builtin-layout-2 .hour.selected::after {
   content: "";
+  z-index: -1;
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 101px;
+  right: 50%;
+}
+.builtin-layout-2 .hour2 {
+  z-index: 2;
+  position: absolute;
+  height: 30px;
+  line-height: 30px;
+  width: 30px;
+  border-radius: 40px;
+  text-align: center;
+  font-size: 14px;
 }
-
-.mdc-ripple-surface::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
+.builtin-layout-2 .hour2.selected::after {
+  content: "";
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 64px;
+  right: 50%;
+  z-index: -1;
+}
+.builtin-layout-2 .unit {
+  position: absolute;
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+  border-radius: 40px;
+  text-align: center;
+  font-size: 12px;
 }
-
-.mdc-ripple-surface::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
+.builtin-layout-2 .unit.selected::after {
+  content: "";
+  background-color: rgba(var(--kup-primary-color-rgb), 0.5);
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 100% 0%;
+  top: 50%;
+  width: 101px;
+  right: 50%;
+}
+.builtin-layout-2 .hour,
+.builtin-layout-2 .hour2,
+.builtin-layout-2 .unit {
+  cursor: pointer;
+  transition: background-color 0.25s;
 }
-
-.mdc-ripple-surface.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
+.builtin-layout-2 .hour:hover,
+.builtin-layout-2 .hour2:hover,
+.builtin-layout-2 .unit:hover {
+  background-color: rgba(var(--kup-primary-color-rgb), 0.275);
 }
-
-.mdc-ripple-surface.mdc-ripple-upgraded::after {
-  top: 0;
-  /* @noflip */
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
+.builtin-layout-2 .hour.selected,
+.builtin-layout-2 .hour2.selected,
+.builtin-layout-2 .unit.selected {
+  background-color: var(--kup-primary-color);
+  color: var(--kup-text-on-primary-color);
 }
-
-.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  left: var(--mdc-ripple-left, 0);
+.builtin-layout-2 .actions {
+  color: var(--kup-primary-color);
+  font-weight: bold;
+  font-size: 20px;
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  width: 100%;
+  box-sizing: border-box;
+  bottom: 10px;
 }
-
-.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+.builtin-layout-2 .action {
+  display: inline-block;
+  width: 100px;
+  text-align: center;
+  height: 37.5px;
+  line-height: 37.5px;
+  margin-right: 10px;
+  cursor: pointer;
+  border-radius: 2px;
 }
-
-.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+.builtin-layout-2 .clock .actions .action:hover {
+  background-color: rgba(0, 0, 0, 0.1);
 }
-
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #000);
+.builtin-layout-2 .clock .actions .action:visible {
+  background-color: rgba(0, 0, 0, 0.3);
 }
-
-.mdc-ripple-surface:hover::before, .mdc-ripple-surface.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
+.builtin-layout-2 .hour:nth-child(12):after {
+  transform: rotate(330deg);
 }
-
-.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
+.builtin-layout-2 .hour:nth-child(11):after {
+  transform: rotate(300deg);
 }
-
-.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
+.builtin-layout-2 .hour:nth-child(10):after {
+  transform: rotate(270deg);
 }
-
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
+.builtin-layout-2 .hour:nth-child(9):after {
+  transform: rotate(240deg);
 }
-
-.mdc-ripple-surface.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
+.builtin-layout-2 .hour:nth-child(8):after {
+  transform: rotate(210deg);
 }
-
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  top: calc(50% - 100%);
-  /* @noflip */
-  left: calc(50% - 100%);
-  width: 200%;
-  height: 200%;
+.builtin-layout-2 .hour:nth-child(7):after {
+  transform: rotate(180deg);
 }
-
-.mdc-ripple-surface.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
+.builtin-layout-2 .hour:nth-child(6):after {
+  transform: rotate(150deg);
 }
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded],
-.mdc-ripple-upgraded--unbounded {
-  overflow: visible;
+.builtin-layout-2 .hour:nth-child(5):after {
+  transform: rotate(120deg);
 }
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,
-.mdc-ripple-upgraded--unbounded::before,
-.mdc-ripple-upgraded--unbounded::after {
-  top: calc(50% - 50%);
-  /* @noflip */
-  left: calc(50% - 50%);
-  width: 100%;
-  height: 100%;
+.builtin-layout-2 .hour:nth-child(4):after {
+  transform: rotate(90deg);
 }
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
-  top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */
-  left: var(--mdc-ripple-left, calc(50% - 50%));
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
+.builtin-layout-2 .hour:nth-child(3):after {
+  transform: rotate(60deg);
 }
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
+.builtin-layout-2 .hour:nth-child(2):after {
+  transform: rotate(30deg);
 }
-
-.f-image--wrapper {
-  display: block;
-  margin: auto;
-  position: relative;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
+.builtin-layout-2 .hour:nth-child(1):after {
+  transform: rotate(0deg);
 }
-.f-image--wrapper.kup-fit img {
-  max-width: max-content;
-  object-fit: contain;
+.builtin-layout-2 .hour2:nth-child(24):after {
+  transform: rotate(690deg);
 }
-.f-image--wrapper img {
-  display: block;
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
+.builtin-layout-2 .hour2:nth-child(23):after {
+  transform: rotate(660deg);
 }
-.f-image--wrapper .f-image__css {
-  overflow: hidden;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
+.builtin-layout-2 .hour2:nth-child(22):after {
+  transform: rotate(630deg);
 }
-.f-image--wrapper .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
+.builtin-layout-2 .hour2:nth-child(21):after {
+  transform: rotate(600deg);
 }
-.f-image--wrapper .css-step.bottom-aligned {
-  bottom: 0;
-  position: absolute;
+.builtin-layout-2 .hour2:nth-child(20):after {
+  transform: rotate(570deg);
+}
+.builtin-layout-2 .hour2:nth-child(19):after {
+  transform: rotate(540deg);
+}
+.builtin-layout-2 .hour2:nth-child(18):after {
+  transform: rotate(510deg);
+}
+.builtin-layout-2 .hour2:nth-child(17):after {
+  transform: rotate(480deg);
+}
+.builtin-layout-2 .hour2:nth-child(16):after {
+  transform: rotate(450deg);
+}
+.builtin-layout-2 .hour2:nth-child(15):after {
+  transform: rotate(420deg);
+}
+.builtin-layout-2 .hour2:nth-child(14):after {
+  transform: rotate(390deg);
+}
+.builtin-layout-2 .hour2:nth-child(13):after {
+  transform: rotate(360deg);
+}
+.builtin-layout-2 .unit:nth-child(60):after {
+  transform: rotate(354deg);
+}
+.builtin-layout-2 .unit:nth-child(59):after {
+  transform: rotate(348deg);
+}
+.builtin-layout-2 .unit:nth-child(58):after {
+  transform: rotate(342deg);
+}
+.builtin-layout-2 .unit:nth-child(57):after {
+  transform: rotate(336deg);
+}
+.builtin-layout-2 .unit:nth-child(56):after {
+  transform: rotate(330deg);
+}
+.builtin-layout-2 .unit:nth-child(55):after {
+  transform: rotate(324deg);
+}
+.builtin-layout-2 .unit:nth-child(54):after {
+  transform: rotate(318deg);
+}
+.builtin-layout-2 .unit:nth-child(53):after {
+  transform: rotate(312deg);
+}
+.builtin-layout-2 .unit:nth-child(52):after {
+  transform: rotate(306deg);
+}
+.builtin-layout-2 .unit:nth-child(51):after {
+  transform: rotate(300deg);
+}
+.builtin-layout-2 .unit:nth-child(50):after {
+  transform: rotate(294deg);
+}
+.builtin-layout-2 .unit:nth-child(49):after {
+  transform: rotate(288deg);
+}
+.builtin-layout-2 .unit:nth-child(48):after {
+  transform: rotate(282deg);
+}
+.builtin-layout-2 .unit:nth-child(47):after {
+  transform: rotate(276deg);
+}
+.builtin-layout-2 .unit:nth-child(46):after {
+  transform: rotate(270deg);
+}
+.builtin-layout-2 .unit:nth-child(45):after {
+  transform: rotate(264deg);
+}
+.builtin-layout-2 .unit:nth-child(44):after {
+  transform: rotate(258deg);
+}
+.builtin-layout-2 .unit:nth-child(43):after {
+  transform: rotate(252deg);
+}
+.builtin-layout-2 .unit:nth-child(42):after {
+  transform: rotate(246deg);
+}
+.builtin-layout-2 .unit:nth-child(41):after {
+  transform: rotate(240deg);
+}
+.builtin-layout-2 .unit:nth-child(40):after {
+  transform: rotate(234deg);
+}
+.builtin-layout-2 .unit:nth-child(39):after {
+  transform: rotate(228deg);
+}
+.builtin-layout-2 .unit:nth-child(38):after {
+  transform: rotate(222deg);
+}
+.builtin-layout-2 .unit:nth-child(37):after {
+  transform: rotate(216deg);
+}
+.builtin-layout-2 .unit:nth-child(36):after {
+  transform: rotate(210deg);
+}
+.builtin-layout-2 .unit:nth-child(35):after {
+  transform: rotate(204deg);
+}
+.builtin-layout-2 .unit:nth-child(34):after {
+  transform: rotate(198deg);
+}
+.builtin-layout-2 .unit:nth-child(33):after {
+  transform: rotate(192deg);
+}
+.builtin-layout-2 .unit:nth-child(32):after {
+  transform: rotate(186deg);
+}
+.builtin-layout-2 .unit:nth-child(31):after {
+  transform: rotate(180deg);
+}
+.builtin-layout-2 .unit:nth-child(30):after {
+  transform: rotate(174deg);
+}
+.builtin-layout-2 .unit:nth-child(29):after {
+  transform: rotate(168deg);
+}
+.builtin-layout-2 .unit:nth-child(28):after {
+  transform: rotate(162deg);
+}
+.builtin-layout-2 .unit:nth-child(27):after {
+  transform: rotate(156deg);
+}
+.builtin-layout-2 .unit:nth-child(26):after {
+  transform: rotate(150deg);
+}
+.builtin-layout-2 .unit:nth-child(25):after {
+  transform: rotate(144deg);
+}
+.builtin-layout-2 .unit:nth-child(24):after {
+  transform: rotate(138deg);
+}
+.builtin-layout-2 .unit:nth-child(23):after {
+  transform: rotate(132deg);
+}
+.builtin-layout-2 .unit:nth-child(22):after {
+  transform: rotate(126deg);
+}
+.builtin-layout-2 .unit:nth-child(21):after {
+  transform: rotate(120deg);
+}
+.builtin-layout-2 .unit:nth-child(20):after {
+  transform: rotate(114deg);
+}
+.builtin-layout-2 .unit:nth-child(19):after {
+  transform: rotate(108deg);
+}
+.builtin-layout-2 .unit:nth-child(18):after {
+  transform: rotate(102deg);
+}
+.builtin-layout-2 .unit:nth-child(17):after {
+  transform: rotate(96deg);
+}
+.builtin-layout-2 .unit:nth-child(16):after {
+  transform: rotate(90deg);
+}
+.builtin-layout-2 .unit:nth-child(15):after {
+  transform: rotate(84deg);
+}
+.builtin-layout-2 .unit:nth-child(14):after {
+  transform: rotate(78deg);
+}
+.builtin-layout-2 .unit:nth-child(13):after {
+  transform: rotate(72deg);
+}
+.builtin-layout-2 .unit:nth-child(12):after {
+  transform: rotate(66deg);
+}
+.builtin-layout-2 .unit:nth-child(11):after {
+  transform: rotate(60deg);
+}
+.builtin-layout-2 .unit:nth-child(10):after {
+  transform: rotate(54deg);
+}
+.builtin-layout-2 .unit:nth-child(9):after {
+  transform: rotate(48deg);
+}
+.builtin-layout-2 .unit:nth-child(8):after {
+  transform: rotate(42deg);
+}
+.builtin-layout-2 .unit:nth-child(7):after {
+  transform: rotate(36deg);
+}
+.builtin-layout-2 .unit:nth-child(6):after {
+  transform: rotate(30deg);
+}
+.builtin-layout-2 .unit:nth-child(5):after {
+  transform: rotate(24deg);
+}
+.builtin-layout-2 .unit:nth-child(4):after {
+  transform: rotate(18deg);
+}
+.builtin-layout-2 .unit:nth-child(3):after {
+  transform: rotate(12deg);
+}
+.builtin-layout-2 .unit:nth-child(2):after {
+  transform: rotate(6deg);
+}
+.builtin-layout-2 .unit:nth-child(1):after {
+  transform: rotate(0deg);
+}
+
+.builtin-card {
+  background-color: var(--kup-background-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: auto;
 }
 
 .collapsible-layout-1 {
@@ -340,6 +632,7 @@
   height: 100%;
   padding: 0.5em;
   overflow: auto;
+  touch-action: none;
 }
 .dialog-layout-1 .section-1 .text {
   min-width: max-content;
@@ -358,6 +651,7 @@
 }
 .dialog-layout-2 .section-1 {
   text-align: center;
+  touch-action: none;
   padding-bottom: 1em;
 }
 .dialog-layout-2 .section-1 .text {
@@ -375,6 +669,7 @@
   height: 100%;
   padding: 0.5em;
   overflow: auto;
+  touch-action: none;
 }
 .dialog-layout-2 .section-2 .text {
   min-width: max-content;
@@ -389,7 +684,7 @@
   box-sizing: border-box;
   box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
   display: flex;
-  overflow: auto;
+  overflow: visible;
   flex-direction: column;
   height: 100%;
   position: relative;
@@ -408,6 +703,7 @@
   height: 52px;
   width: 100%;
   text-align: right;
+  touch-action: none;
 }
 .dialog-layout-3 .section-1 kup-button {
   margin-right: 0.25em;
@@ -441,6 +737,8 @@
 .dialog-layout-4 .section-2 {
   height: 100%;
   overflow: auto;
+  padding: 0.25em;
+  touch-action: none;
 }
 
 .dialog-layout-5 {
@@ -460,6 +758,37 @@
   overflow: auto;
 }
 
+.dialog-layout-6 {
+  background-color: var(--kup-background-color);
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 95vh;
+  max-width: 95vw;
+  width: 100%;
+}
+.dialog-layout-6 .section-1 {
+  display: flex;
+  height: 100%;
+  justify-content: space-evenly;
+  overflow: auto;
+}
+.dialog-layout-6 kup-data-table {
+  width: 100%;
+}
+
+#drag-handle {
+  -ms-touch-action: none;
+  touch-action: none;
+}
+#drag-handle:not(.header-bar) {
+  display: flex;
+  height: 100%;
+}
+#drag-handle:not(.header-bar) .f-image {
+  margin: auto;
+}
 #drag-handle.header-bar {
   background-color: var(--kup-title-background-color);
   color: var(--kup-title-color);
@@ -490,6 +819,14 @@
   opacity: 0.5;
 }
 
+.free-layout-1 {
+  background: var(--kup-background-color);
+  box-shadow: var(--kup-box-shadow);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 1em;
+}
+
 .scalable-layout-1 .descr {
   font-size: 70%;
   width: 100%;
@@ -1547,6 +1884,7 @@
   margin-bottom: 0.5em;
 }
 .standard-layout-12 .section-3 {
+  backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   max-height: 20vh;
@@ -1622,7 +1960,7 @@
   width: 88px;
   margin: 0 10px;
 }
-.standard-layout-14 .section-1 .f-image--wrapper {
+.standard-layout-14 .section-1 .f-image {
   margin: 0 0.5em 0 0;
 }
 .standard-layout-14 .section-1 .title {
@@ -1659,6 +1997,7 @@
   margin: 0;
 }
 .standard-layout-14 .sub-checkbox {
+  backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   max-height: 20vh;
@@ -1718,6 +2057,110 @@
   display: inline-flex;
 }
 
+.standard-layout-15 {
+  outline: none;
+  display: block;
+  font-size: var(--kup-font-size);
+  background: var(--kup-background-color);
+  color: var(--kup-text-color);
+  box-shadow: var(--kup-box-shadow);
+  border-radius: 3px;
+  min-width: 350px;
+  max-width: 700px;
+}
+.standard-layout-15 .section-1 {
+  box-sizing: border-box;
+  display: flex;
+  padding: 1em;
+}
+.standard-layout-15 .section-1 .sub-1 {
+  width: 100%;
+}
+.standard-layout-15 .section-1 .sub-spinner {
+  height: 88px;
+  width: 88px;
+  margin: 0 10px;
+}
+.standard-layout-15 .section-1 .f-image {
+  margin: 0 0.5em 0 0;
+}
+.standard-layout-15 .section-1 .title {
+  font-size: 1.25em;
+  padding: 0 0.25em 0.25em;
+  text-align: left;
+}
+.standard-layout-15 .section-1 .title .label {
+  cursor: pointer;
+  padding-right: 0.25em;
+}
+.standard-layout-15 .section-1 .title .label:hover {
+  text-decoration: underline;
+}
+.standard-layout-15 .section-1 .info {
+  display: flex;
+  padding: 0 0.25em 0.25em;
+  width: 100%;
+}
+.standard-layout-15 .section-1 .info .label {
+  color: rgba(var(--kup-text-color-rgb), 0.75);
+  margin-right: 0.75em;
+  min-width: max-content;
+  width: auto;
+}
+.standard-layout-15 .section-1 .info .value {
+  width: 100%;
+}
+.standard-layout-15 .section-2 {
+  border-top: 1px solid var(--kup-border-color);
+  box-sizing: border-box;
+  height: 180px;
+  opacity: 1;
+  overflow: auto;
+  transition: height 250ms ease-out, opacity 250ms ease-out;
+}
+.standard-layout-15 .section-2 .info {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 1.25em;
+}
+.standard-layout-15 .section-2 .detail-row {
+  display: flex;
+  justify-content: space-between;
+}
+.standard-layout-15 .section-2 .detail-row:not(:last-child) {
+  margin-bottom: 6px;
+}
+.standard-layout-15 .section-2 .detail-row__label {
+  color: rgba(var(--kup-text-color-rgb), 0.5);
+  margin-top: 0.175em;
+  max-width: 320px;
+}
+.standard-layout-15 .section-2 .detail-row__value {
+  color: var(--kup-text-color);
+  font-size: 120%;
+  max-width: 320px;
+}
+.standard-layout-15 .section-2 kup-tree {
+  text-align: left;
+}
+.standard-layout-15 .section-3 {
+  border-top: 1px solid var(--kup-border-color);
+  display: flex;
+  justify-content: flex-end;
+  padding: 6px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.standard-layout-15 .section-3 kup-button {
+  margin: auto 0;
+}
+.standard-layout-15 #open-in-new,
+.standard-layout-15 #search,
+.standard-layout-15 #new {
+  margin: 0;
+  display: inline-flex;
+}
+
 /**
 * @prop --kup-card-ripple-color: Sets color of ripple effect (for Material layouts).
 */
@@ -1736,12 +2179,12 @@
   width: var(--kup_card_width);
 }
 
-:host([is-menu]) #kup-component {
-  animation: fade-in 0.25s ease-out;
+:host([is-menu]) {
   display: none;
+  animation: fade-in 0.25s ease-out;
 }
 
-:host([menu-visible]) #kup-component {
+:host([menu-visible]) {
   display: block;
 }
 
@@ -1764,22 +2207,9 @@
 .card-view {
   animation: fade-in 0.25s ease-out;
   display: none;
+  height: 100%;
+  width: 100%;
 }
 .card-view.visible {
   display: block;
-}
-
-@keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: block;
-    opacity: 0;
-  }
-  100% {
-    display: block;
-    opacity: 1;
-  }
 }