Changeset 36166


Ignore:
Timestamp:
2022-05-09T14:47:12+12:00 (5 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/style/core.css

    r36145 r36166  
    13061306    text-decoration: none;
    13071307    border-bottom: 2px solid transparent;
    1308     transition: 0.2s ease;
     1308    transition: 0.1s ease;
    13091309}
    13101310
     
    13121312    color: black;   
    13131313    border-color: black;
    1314     /* text-decoration: underline; */
    13151314}
    13161315
     
    13351334    cursor: pointer;
    13361335    opacity: 0.8;
    1337     transition: 0.2s ease;
     1336    transition: 0.1s ease;
    13381337}
    13391338
     
    13651364    }
    13661365}
     1366
     1367/* Styling for enriched audio player */
     1368
     1369.flex-leftalign {
     1370    display: flex;
     1371    flex-wrap: wrap;
     1372    flex-direction: row;
     1373    justify-content: left;
     1374    align-items: left;
     1375}
     1376
     1377#audioContainer {
     1378    width: 35vw;
     1379    background-color: rgb(24, 36, 39);
     1380}
     1381
     1382#waveform {
     1383    background-color: white;
     1384}
     1385
     1386#toolbar {
     1387    position: relative;
     1388    display: flex;
     1389    flex-wrap: wrap;
     1390    flex-direction: row;
     1391    justify-content: center;
     1392    align-items: center;
     1393    color: white;
     1394    width: 100%;
     1395    height: 2em;
     1396}
     1397
     1398#audioContainer img {
     1399    width: 1.8em;
     1400    filter: invert(1);
     1401    cursor: pointer;
     1402    transition: 0.1s ease;
     1403}
     1404
     1405#audioContainer img:hover {
     1406    filter: invert(0.6);
     1407}
     1408
     1409#audioContainer img:active {
     1410    filter: invert(0.5);
     1411}
     1412
     1413#chapters {
     1414    width: 100%;
     1415    height: 0;
     1416    max-height: 60vh;
     1417    font-size: 14px;
     1418    background-color: rgb(54, 73, 78);
     1419    color: white;
     1420    overflow-y: scroll;
     1421    transition: height 0.7s ease;
     1422}
     1423
     1424.chapter {
     1425    border-color: grey;
     1426    border-style: solid;
     1427    border-width: 1px 0 0 0;
     1428    border-top-right-radius: 5px;
     1429    border-top-left-radius: 5px;
     1430    padding: 0.5em;
     1431    transition: 0.1s ease;
     1432}
     1433
     1434.chapter:hover {
     1435    background-color: rgb(101, 116, 116);
     1436    cursor: pointer;
     1437}
     1438
     1439#playPauseButton {
     1440    padding-left: 1em;
     1441    padding-right: 1em;
     1442}
     1443
     1444#chapterButton {
     1445    padding-left: 0.5em;
     1446}
     1447
     1448#muteButton {
     1449    position: absolute;
     1450    right: 0.5em;
     1451}
     1452
     1453#toolbar button {
     1454    cursor: pointer;
     1455    height: 100%;
     1456}
     1457
     1458.wavesurfer-region {
     1459    cursor: pointer !important;
     1460    /* border: 1px solid white !important; */
     1461    transition: 0.1s ease;
     1462}
     1463
     1464.speakerTime {
     1465    float: right;
     1466}
     1467
     1468#slider {
     1469    accent-color: #F8C537;
     1470    background-image: url("icons/zoom-in.svg");
     1471    background-size: contain;
     1472    background-position: center center;
     1473    background-repeat: no-repeat;
     1474    width: 60%;
     1475    margin-left: 0.5em;
     1476    margin-right: 0.5em;
     1477}
     1478
     1479#zoomIcon {
     1480    width: 1.2em !important;
     1481}
     1482
     1483#wave-timeline {
     1484    background-color: rgb(54, 73, 78);
     1485}
     1486
     1487#zoom-section {
     1488    position: absolute;
     1489    left: 0.5em;
     1490}
     1491
     1492.noHover{
     1493    pointer-events: none;
     1494}
     1495
     1496#word-container {
     1497    display: flex;
     1498    flex-direction: row;
     1499    flex-wrap: wrap;
     1500    justify-content: space-evenly;
     1501    padding: 0.5em;
     1502}
     1503
     1504.word {
     1505    margin-right: 0.5em;
     1506    cursor: pointer;
     1507}
     1508
     1509.word:hover {
     1510    background-color: rgb(101, 116, 116);
     1511}
     1512
     1513/* Audio Table */
     1514
     1515#tapeDetails {
     1516    border: 1px solid olive;
     1517}
     1518
     1519#tapeDetails td {
     1520    padding: 0.2em;
     1521
     1522}
     1523
     1524#tapeDetails tr:nth-of-type(odd) {
     1525    background-color: darkseagreen;
     1526}
     1527
     1528#fCol {
     1529    padding-right: 5em;
     1530}
Note: See TracChangeset for help on using the changeset viewer.