@rse/analogclock/analogclock.css

Analog Clock for OBS Studio or vMix

/*
**  AnalogClock ~ Analog Clock for OBS Studio or vMix
**  Copyright (c) 2021-2024 Dr. Ralf S. Engelschall <rse@engelschall.com>
**
**  Permission is hereby granted, free of charge, to any person obtaining
**  a copy of this software and associated documentation files (the
**  "Software"), to deal in the Software without restriction, including
**  without limitation the rights to use, copy, modify, merge, publish,
**  distribute, sublicense, and/or sell copies of the Software, and to
**  permit persons to whom the Software is furnished to do so, subject to
**  the following conditions:
**
**  The above copyright notice and this permission notice shall be included
**  in all copies or substantial portions of the Software.
**
**  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
**  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
**  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
**  IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
**  CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
**  TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
**  SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

body {
    background-color: transparent;
    width:  100vw;
    height: 100vh;
    border: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.analogclock-container {
}

@media screen and (max-aspect-ratio: 1/1),
@media screen and (aspect-ratio: 1/1) {
    .analogclock-container {
        width: 100vw;
        height: auto;
        aspect-ratio: 1/1;
    }
}

@media screen and (min-aspect-ratio: 1/1) {
    .analogclock-container {
        width: auto;
        height: 100vh;
        aspect-ratio: 1/1;
    }
}

.analogclock {
}

.analogclock .canvas {
    position: relative;
    width:  100%;
    height: 100%;
}

.analogclock .canvas .svg1,
.analogclock .canvas .svg2,
.analogclock .canvas .svg3 {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
}

.analogclock .canvas .svg2,
.analogclock .canvas .svg3 {
    opacity: 0.0;
}