Changeset 36166 for main/trunk/greenstone3/web/interfaces/default/style/core.css

Timestamp:

2022-05-09T14:47:12+12:00 (2 years ago)

Author:

davidb

Message:

Tweaked TK Label transition; CSS that supports enriched audio player using wavesurfer; CSS for table of metadata related to audio tapes

File:

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

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

@@ -1306 +1306 @@
     text-decoration: none;
     border-bottom: 2px solid transparent;
-    transition: 0.2s ease;
+    transition: 0.1s ease;
 }
 
@@ -1312 +1312 @@
     color: black;   
     border-color: black;
-    /* text-decoration: underline; */
 }
 
@@ -1335 +1334 @@
     cursor: pointer; 
     opacity: 0.8; 
-    transition: 0.2s ease;
+    transition: 0.1s ease;
 }
 
@@ -1365 +1364 @@
     }
 }
+
+/* Styling for enriched audio player */
+
+.flex-leftalign {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: left;
+    align-items: left;
+}
+
+#audioContainer {
+    width: 35vw;
+    background-color: rgb(24, 36, 39);
+}
+
+#waveform {
+    background-color: white;
+}
+
+#toolbar {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    width: 100%;
+    height: 2em;
+}
+
+#audioContainer img {
+    width: 1.8em;
+    filter: invert(1);
+    cursor: pointer;
+    transition: 0.1s ease;
+}
+
+#audioContainer img:hover {
+    filter: invert(0.6);
+}
+
+#audioContainer img:active {
+    filter: invert(0.5);
+}
+
+#chapters {
+    width: 100%;
+    height: 0;
+    max-height: 60vh;
+    font-size: 14px;
+    background-color: rgb(54, 73, 78);
+    color: white;
+    overflow-y: scroll;
+    transition: height 0.7s ease;
+} 
+
+.chapter {
+    border-color: grey;
+    border-style: solid;
+    border-width: 1px 0 0 0;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    padding: 0.5em;
+    transition: 0.1s ease;
+}
+
+.chapter:hover {
+    background-color: rgb(101, 116, 116);
+    cursor: pointer;
+}
+
+#playPauseButton {
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+#chapterButton {
+    padding-left: 0.5em;
+}
+
+#muteButton {
+    position: absolute;
+    right: 0.5em;
+}
+
+#toolbar button {
+    cursor: pointer;
+    height: 100%;
+}
+
+.wavesurfer-region {
+    cursor: pointer !important;
+    /* border: 1px solid white !important; */
+    transition: 0.1s ease;
+}
+
+.speakerTime {
+    float: right;
+}
+
+#slider {
+    accent-color: #F8C537;
+    background-image: url("icons/zoom-in.svg");
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+    width: 60%;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+}
+
+#zoomIcon {
+    width: 1.2em !important;
+}
+
+#wave-timeline {
+    background-color: rgb(54, 73, 78);
+}
+
+#zoom-section {
+    position: absolute;
+    left: 0.5em;
+}
+
+.noHover{
+    pointer-events: none;
+}
+
+#word-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    padding: 0.5em;
+}
+
+.word {
+    margin-right: 0.5em;
+    cursor: pointer;
+}
+
+.word:hover {
+    background-color: rgb(101, 116, 116);
+}
+
+/* Audio Table */
+
+#tapeDetails {
+    border: 1px solid olive;
+}
+
+#tapeDetails td {
+    padding: 0.2em;
+
+}
+
+#tapeDetails tr:nth-of-type(odd) {
+    background-color: darkseagreen;
+}
+
+#fCol {
+    padding-right: 5em;
+}