Changeset 37587 for main

Timestamp:

2023-03-28T16:15:05+13:00 (13 months ago)

Author:

davidb

Message:

expansion and refinement of css around the audio diarization editor

File:

• main/trunk/greenstone3/web/interfaces/default/style/core.css (modified) (29 diffs)

main/trunk/greenstone3/web/interfaces/default/style/core.css

@@ -944 +944 @@
     float: right;
     top: 28px;
-    left: 128px;
+    left: 140px;
     padding: 5px;
 }
@@ -1407 +1407 @@
 
 #audioContainer {
+        position: relative;
     width: 100%;
         overflow: hidden;
@@ -1425 +1426 @@
     background-color: white;
         position: relative;
-}
-
-#toolbar {
-    background-color: rgb(20, 30, 32);
+        overflow-y: hidden;
+}
+
+#audio-toolbar {
+    background-color: rgb(16, 24, 26);
     position: relative;
     display: flex;
@@ -1440 +1442 @@
 }
 
-#toolbar button {
+#audio-toolbar button {
     cursor: pointer;
     height: 100%;
@@ -1449 +1451 @@
     filter: invert(1);
     cursor: pointer;
-    transition: 0.1s ease;
+    /* transition: 0.1s ease; */
 }
 
@@ -1470 +1472 @@
 } 
 
-.audio-scroll {
-    scroll-behavior: smooth;
+#chapters img {
+    height: 1rem !important;
+    width: 1rem !important;
+    padding: 0 !important;
+    pointer-events: all !important;
+}
+
+#chapters img.hide {
+    opacity: 0;
+    pointer-events: none !important;
+}
+
+@supports (-moz-appearance:none) { /* bad results in chrome, safari not tested */
+    .audio-scroll {
+        scroll-behavior: smooth;
+    }
+}
+
+.audio-scroll::-webkit-scrollbar {
+  height: 6px;
+}
+
+.audio-scroll::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0.1);
+}
+
+.audio-scroll::-webkit-scrollbar-thumb {
+  background: #BDBDBD;
+}
+
+.audio-scroll::-webkit-scrollbar-thumb:hover {
+  background: #6E6E6E;
 }
 
@@ -1478 +1510 @@
     border-style: solid;
     border-width: 1px 0 0 0;
-    /* border-top-right-radius: 5px; */
     border-top-left-radius: 5px;
     padding: 0.5rem;
@@ -1490 +1521 @@
 
 .chapter:hover {
-    background-color: rgb(101, 116, 116);
+    background-color: rgb(81, 90, 90);
 }
 
@@ -1506 +1537 @@
 }
 
+.speakerName {
+    flex: 1;
+    pointer-events: none;
+}
+
+.speakerLocked {
+    /* flex: 1; */
+}
+
 .speakerTime {
-    /* float: right; */
-    white-space: nowrap;
-}
-
-.speakerName {
-    /* white-space: normal; */
+    flex: 1;
+    text-align: right;
+    pointer-events: none;
 }
 
@@ -1539 +1576 @@
     z-index: 10;
     height: 8rem;
+    width: 1.5rem;
     margin-top: -8rem;
-    padding-left: 1rem; 
+    padding-left: 1rem;
     padding-right: 1rem;
     margin-left: -1rem;
-    box-shadow: 0 0 15px;
+    /* border-radius: 50%; */
+    -webkit-appearance: slider-vertical; /* chrome */
+    writing-mode: bt-lr; /* IE */
+    box-shadow: 0 0 10px 2px #000; /* bad results on chrome (and probably safari) */
 }
 
@@ -1556 +1597 @@
 }
 
-/* Limit scope of the following to only canvases within a audioContainer div */
-#audioContainer canvas {
-    /* transition: width 0.5s ease; */
+#audioContainer canvas { /* Limit scope of the following to only canvases within a audioContainer div */
     /* z-index: 4 !important; */
     pointer-events: none;
@@ -1576 +1615 @@
 
 #wave-timeline {
-    background-color: rgb(40, 54, 58);
+    background-color: var(--audio-bg-colour);
     /* background-color: rgb(24, 36, 39); */
 }
@@ -1583 +1622 @@
     color: white;
     padding: 0.2rem;
+    position: absolute;
 }
 
@@ -1625 +1665 @@
 
 .word:hover {
-    background-color: rgb(101, 116, 116);
+    background-color: rgb(81, 90, 90);
 }
 
@@ -1644 +1684 @@
 
 #tapeDetails tr:nth-of-type(odd) {
-    background-color: darkseagreen;
+    /* background-color: darkseagreen; */
+    background-color: #76bb58ab;
 }
 
@@ -1671 +1712 @@
     color: white;
     overflow-y: hidden;
-    transition: height 0.4s ease, padding 0.4s ease;
+    transition: height 0.2s ease, padding 0.2s ease;
     box-sizing: border-box; /* ensures padding doesn't modify width */
     font-family: 'Courier New', monospace;
@@ -1693 +1734 @@
     font-size: 15px;
     font-family: 'Courier New', monospace;
+    font-weight: normal;
 }
 
@@ -1711 +1753 @@
 
 #edit-panel input[type='text'] {
-    width: 50%;
+    /* width: 35%; */
   /* border: 1px solid white; */
   outline: none;
@@ -1719 +1761 @@
     transition: 0.25s ease-in;
     background-color: white;
+    flex-grow: 1; /* size increases when div is enlarged */
 }
 
@@ -1770 +1813 @@
 #audio-dropdowns {
     width: 100%;
-    background-color: rgb(40, 54, 58);
+    background-color: var(--audio-bg-colour);
     display: flex;
     flex-direction: row;
@@ -1804 +1847 @@
     -webkit-appearance: textfield;
     appearance: textfield;
+}
+
+.no-arrows::-webkit-inner-spin-button {
+    display: none;
 }
 
@@ -1829 +1876 @@
     transition: background-color 0.1s ease;
         z-index: 1 !important;
-        height: 70% !important;
-        top: 15% !important;
+        height: 60% !important;
+        top: 20% !important;
+        /* border: 1px solid #000; */
         /* transition: width 2s ease; */
+}
+
+/* .wavesurfer-region:hover {
+    background-color: rgba(200, 200, 200, 0.4) !important;
+} */
+
+.region-padlock {
+    position: absolute;
+    right: 0;
+    width: 1rem !important;
+    height: 1rem;
+    padding-top: 0.2rem;
+    padding-right: 0.2rem;
+    /* pointer-events: none; */
+}
+
+.region-menu {
+    position: absolute;
+    left: 0;
+    width: 1rem !important;
+    height: 1rem;
+    padding: 0.2rem 0.1rem;
 }
 
@@ -1850 +1920 @@
 }
 
+.region-bottom img {
+    bottom: 0.2rem; /* padlock img shows bottom of region on secondary */
+}
+
 #caret-container {
     position: absolute;
     /* background-color: #090; */
-    height: 128px; /* match waveform */
+    height: 140px; /* match waveform */
     width: 20px; /* match gs_content padding */
     flex-direction: column;
-    justify-content: space-around;
-    left: -4px; /* padding */
+    justify-content: space-evenly;
+    left: 0; /* padding */
+    padding-top: 2rem;
+    display: none;
+}
+
+#caret-container img {
     cursor: pointer;
-    display: none;
-}
-
-#caret-container img {
     filter: none;
     opacity: 0.85;
+    width: 1.5rem;
 }
 
@@ -1884 +1960 @@
     background: rgb(20, 30, 32);
     box-shadow: 1px 1px 15px -5px black;
-    border-radius: 5px;
+    /* border-radius: 5px; */
     display: none;
-}
-
-#context-menu.visible {
-    display: block;
-    transition: display 200ms ease-in-out;
+    border: 1px solid #eee;
 }
 
@@ -1906 +1978 @@
 }
 
-.context-menu-item.faded {
+/* .context-menu-item.faded {
     color: rgb(94, 94, 94);
 }
@@ -1912 +1984 @@
 .context-menu-item.faded:hover {
     background-color: rgb(20, 30, 32);
-}
-
-#dual-mode-menu-button {
+} */
+
+#timeline-menu-button {
     position: absolute;
     right: 0;
     padding: 0.2rem;
-    width: 0.8rem !important;
+    width: 1rem !important;
     z-index: 1;
-    display: none;
-}
-
-#dual-mode-menu-button.visible {
-    display: block;
-}
-
-#dual-mode-menu {
+    /* display: none; */
+    transition: transform 0.2s ease-in-out;
+}
+
+#timeline-menu {
     position: absolute;
     right: 1.5rem;
-    width: 150px;
+    width: 200px;
     background: rgb(20, 30, 32);
     box-shadow: 1px 1px 15px -5px black;
-    border-radius: 5px;
-    z-index: 10;
+    /* border-radius: 5px; */
+    z-index: 12;
     display: none;
-}
-
-#dual-mode-menu.visible {
-    display: block;
-    transition: display 200ms ease-in-out;
-}
-
-.dual-mode-menu-item {
-    padding: 8px 10px;
+    margin: 2.2rem 0;
+    border: 1px solid #eee;
+}
+
+#timeline-menu input {
+    pointer-events: none;
+}
+
+#timeline-menu hr {
+    height: 1px;
+    border: 0;
+    background: #333;
+    margin-top: 0;
+}
+
+.timeline-menu-item {
+    padding: 0.4rem 0.8rem;
     font-size: 14px;
     user-select: none;
@@ -1950 +2027 @@
     cursor: pointer;
     border-radius: inherit;
-}
-
-.dual-mode-menu-item:hover {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+}
+
+.timeline-menu-item:hover {
     background: #343434;
 }
 
-#prim-set-label {
-    position: absolute;
-    top: 0px;
-    left: 0.2rem;
-    color: #eee;
-    font-size: 12px;
-}
-
-#sec-set-label {
-    position: absolute;
-    bottom: 0px;
-    left: 0.2rem;
-    color: #eee;
-    font-size: 12px;
+.timeline-menu-subtext {
+    padding: 0.1rem 0.4rem;
+    font-size: 14px;
+    color: #999;
+    font-weight: bold;
+    pointer-events: none;
 }
 
@@ -2009 +2081 @@
     font-size: 14px;
     color: white;
-    transition: background-color 0.3s ease, height 0.3s ease;
+    transition: background-color 0.2s ease, height 0.2s ease;
     user-select: none;
     resize: horizontal;
-    overflow:auto;
+    overflow: auto;
 }
 
@@ -2021 +2093 @@
 }
 
+#new-canvas {
+    position: absolute;
+    background-color: var(--audio-bg-colour);
+    background-size: cover;
+    top: 0px;
+    left: 0px;
+    overflow-y: scroll;
+}
+
+#waveform-spinner {
+    position: absolute;
+    inset: 0; /* top, bottom, left, right shorthand */
+  margin: auto; /* center horizontally and vertically */
+  border: 5px solid white; 
+  border-top: 5px solid var(--audio-accent-colour);
+  border-radius: 50%;
+    background-color: var(--audio-bg-colour);
+  width: 3rem;
+  height: 3rem;
+  animation: spin 1.3s ease-in-out infinite;
+    z-index: 10;
+    transition: 0.5s ease-in-out;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(720deg); }
+}
+
+#waveform-blocker {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: var(--audio-bg-colour);
+    z-index: 9;
+}
+
+.track-set-label {
+    position: absolute;
+    max-width: 150px;
+    left: 0.2rem;
+    color: #eee;
+    font-size: 14px;
+    user-select: none;
+}
+
+#track-set-label-bottom {
+    bottom: 0px;
+}
+
+.track-arrow {
+    position: relative;
+    width: 1.5em !important;
+    transform: rotate(90deg);
+    vertical-align: text-bottom;
+    z-index: 20;
+    /* transition: transform 0.2s ease-in-out; */
+}
+
+#version-select-menu {
+    position: absolute;
+    display: none;
+    z-index: 21;
+    background: rgb(20, 30, 32);
+    box-shadow: 1px 1px 15px -5px black;
+    /* border-radius: 5px; */
+    border: 1px solid #eee;
+    overflow-y: auto;
+    margin: 2px;
+}
+
+#version-select-menu.visible {
+    display: inline;
+}
+
+.version-select-menu-item {
+    padding: 8px 10px;
+    font-size: 14px;
+    user-select: none;
+    color: #eee;
+    cursor: pointer;
+    border-radius: inherit;
+}
+
+.version-select-menu-item:hover {
+    background: #343434;
+}
+
+#save-popup {
+    display: none;
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 25vw;
+    height: 9vh;
+    background: rgb(20, 30, 32);
+    border: 1px solid #ffffff70;
+    /* border-radius: 5px; */
+    box-shadow: 1px 1px 15px -5px black;
+    z-index: 1000;
+    padding: 0.5rem 0.5rem 2rem 0.5rem;
+    color: #eee;
+    font-weight: bold;
+}
+
+#commit-message {
+    width: 22vw;
+    resize: none;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0.5rem;
+    margin-bottom: 0.1rem;
+}
+
+#save-popup button {
+    width: 11vw;
+    margin: 0.2rem;
+}
+
+#save-popup-bg {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    backdrop-filter: blur(1px);
+    background-color: rgba(20, 34, 38, 0.1);
+    z-index: 999;
+    user-select: none;
+}
+
+.visible {
+    display: block !important;
+}
+
 #favouritesFullViewLink {
     color: black;
 }
 
+:root { /* css vars */
+    --audio-accent-colour: #66d640;
+    /* --audio-bg-colour: rgb(40, 54, 58); */
+    --audio-bg-colour: rgb(29, 43, 47);
+}