@brightspot/ui 3.0.1 → 5.0.1

package/src/legacy/tool-ui/src/main/webapp/v4/TimedContent.less

@@ -0,0 +1,202 @@
+@import (reference) './Icon';
+@import (reference) url('./Reset.less');
+
+/* ********************** */
+
+/* TimedContentPlayerNote */
+
+/* ********************** */
+
+.TimedContentPlayerNote {
+  --TimedContent-player-maxWidth: 500px;
+  --TimedContent-player-maxHeight: 300px;
+
+  padding-top: var(--gap-m);
+  position: relative;
+}
+
+.inputContainer-TimedContentPlayerNote-player-visible .TimedContentPlayerNote {
+  margin-bottom: calc(-1 * var(--gap-m));
+  top: calc(-1 * var(--gap-xl));
+}
+
+.inputContainer-TimedContentPlayerNote-player-visible .Sortable,
+.CIG-row[data-field='timedCompanions'] .Sortable {
+  box-shadow: var(--shadow-1);
+}
+
+.inputContainer-TimedContentPlayerNote-player-visible ol > li,
+.CIG-row[data-field='timedCompanions'] ol > li {
+  border: none;
+}
+
+.TimedContentPlayerNote-player-close {
+  color: var(--color-black);
+  cursor: pointer;
+  margin-bottom: var(--gap-m);
+  text-align: right;
+}
+
+.TimedContentPlayerNote-player-close::after {
+  .Icon;
+
+  content: 'clear';
+}
+
+/* thumbnail */
+.TimedContentPlayerNote-thumbnail-link {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+}
+
+.TimedContentPlayerNote-thumbnail-link::before {
+  .Icon;
+
+  color: var(--color-white);
+  content: 'play_circle';
+  font-size: calc(var(--fontSize-xxl) * 2);
+  left: 50%;
+  opacity: 0.8;
+  position: absolute;
+  text-shadow: 0 0 var(--gap-s) var(--color-black);
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.TimedContentPlayerNote-thumbnail-link:hover::before {
+  color: var(--color-gray2);
+}
+
+.TimedContentPlayerNote-thumbnail img {
+  max-height: var(--TimedContent-player-maxHeight);
+  max-width: var(--TimedContent-player-maxWidth);
+}
+
+.TimedContentPlayerNote-thumbnail-noimage {
+  background-color: var(--color-black);
+  display: block;
+  height: var(--TimedContent-player-maxHeight);
+  max-width: calc(100vw - var(--CIG-padding) * 2);
+  width: var(--TimedContent-player-maxWidth);
+}
+
+/* player */
+.TimedContentPlayerNote-player {
+  display: none;
+}
+
+.TimedContentPlayerNote-player-close {
+  display: block;
+}
+
+.TimedContentPlayerNote-player-frame {
+  border: 1px solid var(--color-gray4);
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+}
+
+.TimedContentPlayerNote-player-frame > .frame {
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+}
+
+/* player-control */
+.TimedContentPlayerNote-player-control {
+  display: none;
+}
+
+.inputContainer-TimedContentPlayerNote-player-visible
+  .TimedContentPlayerNote-player-control {
+  display: inherit;
+}
+
+/* TimedPreview */
+
+.TimedContentPreview .TimedContentPlayerNote-player-frame {
+  background-color: var(--color-black);
+}
+
+/* TimedCompanion */
+
+.TimedCompanionSelector {
+  display: inline-block;
+}
+
+.TimedCompanionSelector-player {
+  background-color: var(--color-black);
+}
+
+.TimedCompanionSelector-controls {
+  margin-top: var(--gap-m);
+}
+
+.TimedCompanionSelector-controls-timestamp {
+  margin-left: var(--gap-m);
+}
+
+.TimedCompanionSelector .TimedContentPlayerNote-player-frame {
+  background-color: transparent;
+}
+
+.TimedCompanionSelector .addButtonContainer {
+  padding-top: var(--gap-m);
+}
+
+.TimedCompanionSelector .addButtonContainer .addButton {
+  font-size: initial;
+}
+
+.Page-content.is-previewing .TimedContent-companions {
+  display: block;
+}
+
+@media (@mq-xl) {
+  .TimedContentPlayerNote {
+    --TimedContent-player-maxWidth: 350px;
+    --TimedContent-player-maxHeight: 250px;
+  }
+
+  .TimedContent-companions {
+    display: grid;
+    grid-template:
+      'label label label' auto
+      'note . companions' auto ~'/'
+      minmax(0, 1fr) var(--gap-s) minmax(0, 1fr);
+
+    & > .CIG-label {
+      grid-area: label;
+    }
+
+    & > .CIG-note {
+      grid-area: note;
+    }
+
+    & > .CIG-large {
+      grid-area: companions;
+      padding-top: var(--gap-m);
+    }
+  }
+}
+
+/* IframeToolPlayerServlet */
+
+.TimedContentIframeToolPlayer {
+  height: var(--TimedContent-player-maxHeight);
+  position: relative;
+}
+
+.TimedContentIframeToolPlayer iframe {
+  border-style: none;
+  height: 100%;
+  left: 0;
+  max-width: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}

package/src/legacy/tool-ui/src/main/webapp/v4/TreeList.less

@@ -0,0 +1,93 @@
+.TreeList {
+  margin: calc(var(--gap-l) - var(--gap-s)) 0 var(--gap-l) 0;
+  position: relative;
+
+  .TreeList {
+    margin: 0;
+    padding-left: var(--gap-l);
+
+    &:not(:empty)::before {
+      border-color: var(--color-gray4);
+      border-style: solid;
+      border-width: 0 0 1px 1px;
+      bottom: calc(var(--Text-height) / 2);
+      content: '';
+      left: var(--gap-s);
+      position: absolute;
+      top: var(--gap-s);
+      width: calc(var(--gap-l) - var(--gap-s) * 2);
+    }
+
+    &.is-insertable {
+      padding-left: calc(var(--gap-m) * 1.25);
+      padding-top: calc(var(--gap-xs) * 1.5);
+
+      &:not(:empty)::before {
+        bottom: 0;
+      }
+
+      > li {
+        &:not(.TreeList-radio) {
+          margin-left: calc(var(--gap-l) * 1.25);
+          padding-top: calc(var(--gap-xs) * 1.25);
+        }
+
+        &.TreeList-group + li:not(.TreeList-group) {
+          padding-top: calc(var(--gap-xs) * 1.5);
+        }
+      }
+    }
+  }
+
+  li {
+    padding-top: var(--gap-s);
+
+    &.TreeList-group {
+      padding-top: var(--Text-height);
+
+      + li:not(.TreeList-group) {
+        padding-top: var(--Text-height);
+      }
+
+      &.is-insertable {
+        padding-bottom: calc(var(--gap-l) * 1.08);
+        padding-top: 0;
+
+        + li:not(.TreeList-group) {
+          padding-top: calc(var(--gap-xs) * 1.25);
+        }
+      }
+    }
+  }
+
+  & .TreeList-radio {
+    align-items: center;
+    display: flex;
+
+    input[type='radio'] {
+      margin-right: var(--gap-s);
+    }
+
+    &.is-insertable {
+      align-items: center;
+      border-top: 1px solid var(--color-gray4);
+      display: block;
+      left: calc(var(--gap-l) * 1.2);
+      margin-right: calc(var(--gap-l) * 1.3);
+      position: relative;
+      top: 6px;
+
+      input[type='radio'] {
+        left: calc(-1 * (var(--gap-xl) / 1.05));
+        margin-left: var(--gap-s);
+        margin-right: var(--gap-s);
+        position: absolute;
+        top: calc(-1 * (var(--gap-m) / 1.08));
+      }
+
+      & + :not(&) {
+        margin-left: calc(var(--gap-l) * 1.25);
+      }
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Utils.css

@@ -0,0 +1,14 @@
+/* Hides content visually while still allowing assistive tech to announce it. */
+.screen-reader-only {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.visible-if-focused:not(:focus, :hover) {
+  opacity: 0;
+  transform: translateY(-100vh);
+}