dashboard.css

/*
    CSS naming convention:

    - Dashboard core script maps all telemetry data properties to respective class names,
      so truck's speed will be .truck-speed and current gear is .truck-gear
      (see complete reference in Telemetry.md markdown file).
    - All boolean telemetry properties will have a special ".yes" class added
      when the value is true (will be removed if value is false).
    - When dashboard core script updates DOM it will always add
      data-value attribute containing current value, so you
      can use it to have custom css selectors based on the actual data
      (for example, this skin uses .truck-gear[data-value="N"] to define
      different style for neutral or reverse gear, see below).

    For more information go to home page: https://github.com/Funbit/ets2-telemetry-server

*/
body {
    cursor: pointer;
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.dashboard {

}

@font-face {
    font-family: din-pro;
    src: url("fonts/din_pro.otf") format("opentype");
}

@font-face {
    font-family: Helvetica;
    src: url("fonts/helvetica_neue.otf") format("opentype");
}

@keyframes asi-test {
    0% {
        rotate: -85deg;
        background-position: 50% 99%;
    }
    25% {
        rotate: 0deg;
        background-position: 50% 50%;
    }
    50% {
        rotate: 0deg;
        background-position: 50% 50%;
    }
    62% {
        rotate: -45deg;
        background-position: 50% 50%;
    }
    87% {
        rotate: 45deg;
        background-position: 50% 50%;
    }
    100% {
        rotate: 0deg;
        background-position: 50% 50%;
    }
}

@keyframes speed-scale-test {
    0% {
        background-position: 50% -1080px
    }
    25% {
        background-position: 50% -200px
    }
    75% {
        background-position: 50% -1280px
    }
    100% {
        background-position: 50% -1080px
    }
}

@keyframes sti-test {
    0% {
        height: 0
    }
    25% {
        height: 100%
    }
    100% {
        height: 0
    }
}

/*layout styles*/
.dashboard.game-connected {
    background-image: url("images/neomorphic.png");

    .info-strip {
        font: 30pt Helvetica, Arial, sans-serif;
        color: #bfbfbf;

        .mission-route {
            display: flex;
            flex-direction: row;
            position: absolute;
            top: 44px;
            left: 17px;
        }

        .mission-deadline {
            display: flex;
            flex-direction: row;
            position: absolute;
            top: 44px;
            left: 655px;
        }

        .truck-info {
            display: flex;
            flex-direction: row;
            position: absolute;
            top: 44px;
            left: 979px;
        }

        .mission-distance {
            display: flex;
            flex-direction: row;
            position: absolute;
            top: 44px;
            left: 1349px;
        }

        .distance-subtext {
            display: flex;
            flex-direction: row;
            color: #ff3333;
            font-size: 15pt;
            position: relative;
            top: 17px;

            .km {
                color: #bfbfbf;
            }
        }

        .clock {
            font-size: 67px;
            font-family: din-pro, Helvetica, serif;
            position: absolute;
            left: 1695px;
            top: 10px;
            width: 160px;
            height: 57px;
            color: #bfbfbf;
        }
    }

    .fuelBar {
        background-image: url("images/fuel-bar.png");
        position: absolute;
        left: 1409px;
        top: 225px;
        width: 452px;
        height: 8px;
        background-repeat: no-repeat;
    }

    .prediction {
        font-family: Helvetica, Arial, sans-serif;
        position: absolute;
        left: 0;
        top: -139px;

        .gameSpeed {
            font-size: 50px;
            color: rgb(223, 114, 4);
            position: absolute;
            left: 714.55px;
            top: 980.784px;
            width: 80px;
            height: 37px;
        }

        .eta {
            font-size: 50px;
            color: rgb(223, 114, 4);
            text-align: start;
            position: absolute;
            left: 1077px;
            top: 980.784px;
            width: 122px;
            height: 37px;
        }

        .ete {
            font-size: 125px;
            color: rgb(70, 135, 199);
            position: absolute;
            left: 718.844px;
            top: 1048.571px;
            width: 476px;
            height: 91px;
        }
    }

    .fuel-container {
        font-family: Helvetica, sans-serif;
        color: rgb(191, 191, 191);
        position: absolute;
        left: 0;
        top: -139px;

        .fuelPercentage {
            font-size: 25px;
            position: absolute;
            left: 1402.536px;
            top: 327.271px;
            width: 63px;
            height: 19px;
        }

        .fob {
            font-size: 42px;
            position: absolute;
            text-align: end;
            left: 1670.138px;
            top: 433.784px;
            width: 106px;
            height: 36px;
        }

        .fuelCapacity {
            font-size: 42px;
            position: absolute;
            text-align: end;
            left: 1670.138px;
            top: 493.784px;
            width: 106px;
            height: 36px;
        }

        .fuelConsump {
            font-size: 42px;
            position: absolute;
            left: 1656.488px;
            top: 557.784px;
            width: 122px;
            height: 36px;
            text-align: end;
        }

        .fuelRange {
            font-size: 75px;
            position: absolute;
            left: 1444.437px;
            top: 664.421px;
            width: 357px;
            height: 55px;
        }

        .range-km {
            font-size: 42px;
            position: absolute;
            left: 1730px;
            top: 695px;
            color: #787878;
        }
    }

    .wear-container {
        position: absolute;
        left: 0;
        top: -139px;
        font: 25px Helvetica, Arial, sans-serif;
        text-align: center;
        text-align: -webkit-center;
        color: rgb(191, 191, 191);

        .trailer-wear {
            position: absolute;
            left: 62px;
            top: 375px;
            width: 63px;
            height: 20px;
        }

        .truck-wearCabin {
            position: absolute;
            left: 355px;
            top: 375px;
            width: 63px;
            height: 20px;
        }

        .truck-wearEngine {
            position: absolute;
            left: 437.536px;
            top: 473.271px;
            width: 63px;
            height: 20px;
        }

        .truck-wearTransmission {
            position: absolute;
            left: 437.536px;
            top: 567.271px;
            width: 63px;
            height: 20px;
        }

        .truck-wearSum {
            position: absolute;
            left: 437.536px;
            top: 667.271px;
            width: 63px;
            height: 20px;
        }

        .truck-wearChassis {
            position: absolute;
            left: 208.536px;
            top: 667.271px;
            width: 63px;
            height: 20px;
        }

        .truck-wearWheels {
            position: absolute;
            left: 61.536px;
            top: 667.271px;
            width: 63px;
            height: 20px;
        }
    }

    .odometer-container {
        position: absolute;
        left: 79px;
        top: 877px;
        width: 414px;
        height: 81px;
        border-radius: 10px;
        overflow: hidden;
        background-repeat: no-repeat;
        background-image: url("images/odometer.png");
        mask-image: url("images/odometer-cover.png");
        mask-mode: alpha;

        .odometer-digit0 {
            position: absolute;
            width: 55px;
            top: 4px;
            height: 100%;
            background-image: url("images/wheel-black.png");
            left: 4px;
            border-radius: 0;
            background-position: 50% 0%;
        }

        .odometer-digit1 {
            position: absolute;
            width: 55px;
            top: 4px;
            height: 100%;
            background-image: url("images/wheel-black.png");
            left: 54px;
            border-radius: 0;
            background-position: 50% 0%;
        }

        .odometer-digit2 {
            position: absolute;
            width: 55px;
            top: 4px;
            height: 100%;
            background-image: url("images/wheel-black.png");
            left: 106px;
            border-radius: 0;
            background-position: 50% 0%;
        }

        .odometer-digit3 {
            position: absolute;
            width: 55px;
            top: 4px;
            height: 100%;
            background-image: url("images/wheel-black.png");
            left: 182px;
            border-radius: 0;
            background-position: 50% 0%;
        }

        .odometer-digit4 {
            position: absolute;
            width: 55px;
            top: 4px;
            height: 100%;
            background-image: url("images/wheel-black.png");
            left: 234px;
            border-radius: 0;
            background-position: 50% 0%;
        }

        .odometer-digit5 {
            position: absolute;
            width: 55px;
            top: 4px;
            height: 100%;
            background-image: url("images/wheel-black.png");
            left: 286px;
            border-radius: 0;
            background-position: 50% 0%;
        }

        .odometer-decimal {
            position: absolute;
            width: 55px;
            top: 4px;
            height: 100%;
            background-image: url("images/wheel-red.png");
            left: 360px;
            border-radius: 0;
            background-position: 50% 0%;
        }
    }

    .attitude-indicator-container {
        position: absolute;
        left: 779px;
        top: 140px;
        width: 365px;
        height: 388px;
        border-radius: 40px;
        overflow: hidden;
        background-image: url("images/attitude-indicator-background.png");
        mask-image: url("images/attitude-indicator-cover.png");
        mask-mode: alpha;

        .attitude-indicator {
            position: absolute;
            left: -25%;
            top: -25%;
            width: 150%;
            height: 150%;
            background-image: url("images/attitude-content.png");
            background-position: 50% 50%;
            background-repeat: no-repeat;

            transition: background-position 250ms linear;
        }
    }

    .speed-indicator-container {
        position: absolute;
        left: 601px;
        top: 139px;
        width: 115px;
        height: 491px;
        border-radius: 40px;
        overflow: hidden;
        mask-image: url("images/vertical-scale-cover.png");
        mask-mode: alpha;
        @layer {
            .speed-indicator {
                position: absolute;
                width: 100%;
                height: 100%;
                background-image: url("images/speed-scale.png");
                background-position: 50% -1080px;
                background-repeat: no-repeat;
                transition: background-position 200ms linear;
            }
        }
        @layer {
            .scale-needle {
                position: absolute;
                top: 192px;
                width: 115px;
                height: 8px;
                background-repeat: no-repeat;
                background-image: url("images/scale-needle.png");
            }
        }
    }

    .sti-up-container {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        position: absolute;
        left: 567px;
        top: 162px;
        width: 10px;
        height: 170px;

        .sti-up-content {
            width: 100%;
            height: 100%;
            margin-top: auto;
            rotate: 180deg;
            background-image: url("images/sti-up.png");
        }
    }

    .sti-dn-container {
        position: absolute;
        left: 567px;
        top: 338px;
        width: 10px;
        height: 274px;

        .sti-dn-content {
            width: 100%;
            height: 100%;
            background-image: url("images/sti-down.png");
        }
    }

    .compass-container {
        position: absolute;
        left: 779px;
        top: 555px;
        width: 365px;
        height: 85px;
        border-radius: 5px;
        overflow: hidden;
        mask-image: url("images/horizontal-scale-cover.png");
        mask-mode: alpha;
        @layer {
            .compass {
                position: absolute;
                width: 100%;
                height: 100%;
                background-image: url("images/compass.png");
                background-position: 50% 50%;
            }
        }
        @layer {
            .scale-needle {
                position: absolute;
                left: 50%;
                width: 8px;
                height: 85px;
                background-repeat: no-repeat;
                background-image: url("images/scale-needle-vertical.png");
            }
        }
    }

    .altimeter-container {
        position: absolute;
        left: 1209px;
        top: 139px;
        width: 115px;
        height: 491px;
        border-radius: 40px;
        overflow: hidden;
        mask-image: url("images/vertical-scale-cover.png");
        mask-mode: alpha;
        @layer {
            .altimeter {
                position: absolute;
                width: 100%;
                height: 100%;
                background-image: url("images/altimeter-scale.png");
                background-position: 50% -1080px;
                background-repeat: no-repeat;
                transition: background-position 2s linear;
            }
        }
        @layer {
            .scale-needle {
                position: absolute;
                top: 192px;
                width: 115px;
                height: 8px;
                background-repeat: no-repeat;
                background-image: url("images/scale-needle.png");
            }
        }
    }
}

/*

.truck-speed[data-type="meter"] {
  visibility: visible;
  position: absolute;
  left: 571px;
  top: 121px;
  width: 10px;
  height: 110px;
  background-color: #cd0000;
  -webkit-transform: rotate(-114deg);
  -moz-transform: rotate(-114deg);
  -ms-transform: rotate(-114deg);
  -o-transform: rotate(-114deg);
  transform: rotate(-114deg);
  -webkit-transform-origin: 50% 440px;
  -moz-transform-origin: 50% 440px;
  -ms-transform-origin: 50% 440px;
  -o-transform-origin: 50% 440px;
  transform-origin: 50% 440px;
}
.truck-engineRpm {
  position: absolute;
  left: 1580px;
  top: 105px;
  width: 10px;
  height: 110px;
  background-color: #cd0000;
  -webkit-transform: rotate(-97deg);
  -moz-transform: rotate(-97deg);
  -ms-transform: rotate(-97deg);
  -o-transform: rotate(-97deg);
  transform: rotate(-97deg);
  -webkit-transform-origin: 50% 336px;
  -moz-transform-origin: 50% 336px;
  -ms-transform-origin: 50% 336px;
  -o-transform-origin: 50% 336px;
  transform-origin: 50% 336px;
}
.truck-fuel {
  position: absolute;
  left: 1452px;
  top: 546px;
  width: 10px;
  height: 60px;
  background-color: #cd0000;
  -webkit-transform: rotate(-96deg);
  -moz-transform: rotate(-96deg);
  -ms-transform: rotate(-96deg);
  -o-transform: rotate(-96deg);
  transform: rotate(-96deg);
  -webkit-transform-origin: 50% 198px;
  -moz-transform-origin: 50% 198px;
  -ms-transform-origin: 50% 198px;
  -o-transform-origin: 50% 198px;
  transform-origin: 50% 198px;
}
.truck-waterTemperature {
  position: absolute;
  left: 1788px;
  top: 546px;
  width: 10px;
  height: 60px;
  background-color: #cd0000;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 50% 198px;
  -moz-transform-origin: 50% 198px;
  -ms-transform-origin: 50% 198px;
  -o-transform-origin: 50% 198px;
  transform-origin: 50% 198px;
}
.truck-speedRounded,
.truck-cruiseControlSpeedRounded {
  color: #2491b9;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 70px;
  position: absolute;
  left: 460px;
  top: 273px;
  width: 190px;
  height: 66px;
  text-align: right;
}
.truck-gear {
  color: #35b32e;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 70px;
  position: absolute;
  left: 516px;
  top: 692px;
  width: 134px;
  height: 100px;
  text-align: center;
}
.truck-gear[data-value="N"] {
  color: #2c8a26;
}
.truck-gear[data-value="R"] {
  color: #ddff00;
}
.truck-odometer {
  color: #1a6783;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 70px;
  position: absolute;
  left: 376px;
  top: 563px;
  width: 368px;
  height: 70px;
  text-align: right;
}
.truck-blinkerLeftOn {
  background-image: url("images/blinker-left-off.png");
  position: absolute;
  left: 98px;
  top: 78px;
  width: 102px;
  height: 92px;
}
.truck-blinkerLeftOn.yes {
  background-image: url("images/blinker-left-on.png");
}
.truck-blinkerRightOn {
  background-image: url("images/blinker-right-off.png");
  position: absolute;
  left: 950px;
  top: 78px;
  width: 102px;
  height: 92px;
}
.truck-blinkerRightOn.yes {
  background-image: url("images/blinker-right-on.png");
}
.truck-cruiseControlOn {
  background-image: url("images/cruise-off.png");
  position: absolute;
  left: 687px;
  top: 434px;
  width: 82px;
  height: 72px;
}
.truck-cruiseControlOn.yes {
  background-image: url("images/cruise-on.png");
}
.truck-cruiseControlSpeedRounded {
  color: #24b999;
  top: 431px;
}
.truck-lightsBeamHighOn {
  background-image: url("images/highbeam-off.png");
  position: absolute;
  left: 1358px;
  top: 860px;
  width: 123px;
  height: 90px;
}
.truck-lightsBeamHighOn.yes {
  background-image: url("images/highbeam-on.png");
}
.truck-lightsBeamLowOn {
  background-image: url("images/lowbeam-off.png");
  position: absolute;
  left: 1358px;
  top: 954px;
  width: 123px;
  height: 90px;
}
.truck-lightsBeamLowOn.yes {
  background-image: url("images/lowbeam-on.png");
}
.truck-lightsParkingOn {
  background-image: url("images/parklights-off.png");
  position: absolute;
  left: 1484px;
  top: 904px;
  width: 104px;
  height: 98px;
}
.truck-lightsParkingOn.yes {
  background-image: url("images/parklights-on.png");
}
.trailer-attached {
  background-image: url("images/trailer-off.png");
  position: absolute;
  left: 1726px;
  top: 890px;
  width: 278px;
  height: 152px;
}
.trailer-attached.yes {
  background-image: url("images/trailer-on.png");
}
.trailer-mass {
  color: #3e3b60;
  font-family: Courier New, Courier, monospace;
  font-weight: bold;
  font-size: 40px;
  position: absolute;
  left: 1770px;
  top: 906px;
  width: 200px;
  height: 80px;
  text-align: center;
}
.trailer-name {
  color: #222;
  font-family: Arial, Tahoma;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  left: 1742px;
  top: 952px;
  width: 242px;
  height: 80px;
  text-align: center;
  overflow: hidden;
}
.game-time {
  color: #C2D8ED;
}
.job-remainingTime {
  color: #54d9a8;
}
._jobIncome {
  color: #5dd954;
}
.truck-gear,
.truck-blinkerLeftOn,
.truck-blinkerRightOn,
.truck-cruiseControlOn,
.truck-lightsBeamHighOn,
.truck-lightsBeamLowOn,
.truck-lightsParkingOn,
.truck-odometer,
.truck-speedRounded,
.truck-cruiseControlSpeedRounded[data-value="0"],
.trailer-mass,
.trailer-name,
._truckWearInfo,
._trailerWearInfo,
.job-remainingTime,
._jobIncome,
._jobSource,
._jobDestionation {
  visibility: hidden;
}
.dashboard.game-connected.yes .truck-blinkerLeftOn,
.dashboard.game-connected.yes .truck-blinkerRightOn,
.dashboard.game-connected.yes .truck-cruiseControlOn,
.dashboard.game-connected.yes .truck-lightsBeamHighOn,
.dashboard.game-connected.yes .truck-lightsBeamLowOn,
.dashboard.game-connected.yes .truck-lightsParkingOn,
.dashboard.game-connected.yes .truck-gear,
.dashboard.game-connected.yes ._truckWearInfo,
.dashboard.game-connected.yes ._trailerWearInfo,
.dashboard.game-connected.yes .truck-odometer,
.dashboard.game-connected.yes .truck-speedRounded,
.dashboard.game-connected.yes .truck-cruiseControlSpeedRounded:not([data-value="0"]) {
  visibility: visible;
}
.hasJob.yes .trailer-mass,
.hasJob.yes .trailer-name,
.hasJob.yes .job-remainingTime,
.hasJob.yes ._jobIncome,
.hasJob.yes ._jobSource,
.hasJob.yes ._jobDestionation {
  visibility: visible;
}
table._job {
  border-collapse: collapse;
  font-family: Courier New, Courier, monospace;
  font-size: 40px;
  position: absolute;
  left: 40px;
  top: 850px;
  width: 1300px;
  height: 280px;
}
table._job th {
  color: #aaa;
  width: 260px;
  text-align: right;
}
table._job td {
  padding-left: 20px;
  text-align: left;
}
._jobSource,
._jobDestionation {
  color: #efbd3a;
}
.statusMessage {
  color: coral;
}
._truckWearInfo,
._trailerWearInfo {
  font-family: Courier New, Courier, monospace;
  font-size: 26px;
  position: absolute;
  left: 1600px;
  top: 1066px;
  width: 330px;
  height: 30px;
  text-align: left;
  color: #aaa;
  line-height: 90%;
}
._trailerWearInfo {
  left: 1810px;
}
.truck-wearSum,
.trailer-wear {
  font-size: 44px;
  color: orangered;
}
*/