styles-ura.css

:root {
    --barvaPoudarka: rgba(153, 178, 255, 1);
    --barvaPoudarkaNaprej: rgba(173, 216, 230, 1);
    --barvaPoudarkaProsojno: rgba(153, 178, 255, 0.7);
    --barvaOzadja: rgba(18, 18, 18, 1);
    --barvaOzadjaProsojno: rgba(0, 0, 0, 0.8);
    --barvaOzadjaNaprej: rgba(36, 36, 36, 1);
    --barvaOzadjaPoudarek: rgba(128, 159, 255, 0.4);
    --barvaOspredja: #eee;
    --barvaNazaj: rgba(255, 255, 255, 0.5);
    --pisava:"Times New Roman", Times, Georgia, Garamond, serif;
    --vsebina: 120ch;
    --prehodČas: 0.5s;

    --sončna: yellow;
    --načrtnomodra: #69A9E3;
    --turkizna: rgba(0, 255, 255);

    --aastura: 50vw;
    --asonce: 4vmin;
    --adnevnaUra: 86vmin;
    --aluna: 6vmin;
    --aurica: calc(var(--adnevnaUra) - (2 *var(--aluna) + 2*var(--asonce)));
    --aobrocek: 14.5%;

    --bar-width: 2rem;
    --bar-height: 0.18rem;
    --hamburger-gap: 0.38rem;
    --hamburger-margin: 0.38rem;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2); /*izračun celotne višine ikone treh črtic*/
}
.svetliNačin {
    --barvaPoudarka: rgba(100, 100, 255, 1);
    --barvaPoudarkaNaprej: #4169E1;
    --barvaOzadja: white;
    --barvaOzadjaProsojno: rgba(220, 220, 220, 0.9);
    --barvaOzadjaNaprej: rgba(240, 240, 240, 0.5);
    --barvaOspredja: black;
    --barvaNazaj: rgba(0, 0, 0, 0.4);
}
html, body { height: 100vh;}
body {
    background: var(--barvaOzadja);
    overflow: hidden; /*skrijemo, kar presega mejo; zato tudi ne more biti drsnika*/
    color: var(--barvaOspredja);
    margin: 0;
    /*justify-content: center;
    align-items: center;*/
    font-family: "Times New Roman", serif;
    top: auto;
    bootom:0;
    right: 0;
}
p {
    padding: 0.5rem;
    margin: 0;
}
p.footer {
    position: fixed;
    width: 90%;
    background-color: var(--barvaPoudarkaProsojno);
    padding: 1rem;
    padding-left: 10%;
    padding-right: 10%;
    bottom: 0;
    color: var(--barvaOzadja);
    font-size: small;
}
footer {
    position: fixed;
    width: 90%;
    background-color: var(--barvaPoudarkaProsojno);
    padding: 1rem;
    padding-left: 10%;
    padding-right: 10%;
    bottom: 0;
    color: var(--barvaOzadja);
    font-size: small;
}
button {
    border: none;
    background-color: var(--barvaPoudarka);
    color: var(--barvaOzadja);
    font-style: italic;
    padding: 3px;
    border-radius: 5px;
    cursor: pointer;
}
button.gumbPrej {
    background-color: transparent;
    color: var(--barvaOspredja);
    font-style: normal;
    border-radius: 5px;
    padding: 0;
    overflow: hidden;
}
i.gumbPrej {
    display: block;
    background-color: var(--barvaPoudarka);
    color: var(--barvaOzadja);
    font-style: italic;
    padding: 3px;
}
.pripis {
    color: var(--barvaNazaj);
    font-size: small;
}
input {
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.inputOznači {
    display: flex;
    align-items: center;
}
.vnos {
    background-color: transparent;
    border: 1px solid var(--barvaPoudarka);
    color: var(--barvaOspredja);
    color-scheme: dark;
    margin: 0.2rem;
    height: 1.4rem;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
option {
    background-color: var(--barvaOzadja);
    border: 1px solid var(--barvaPoudarka);
    color: var(--barvaOspredja);
    color-scheme: dark;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.svetliNačin input.vnos {
    color-scheme: light;
}
    input.vnos:focus {
        outline: none;
    }
    .input-icons {
        color: var(--barvaOspredja);
    }
input.dolgaŠtevilka {
    width: 16ch;
}
#nadVnosPredznak {
    display: inline-flex;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    width: 2ch;
}
#nadVnosPredznak input {
    display: none;
}

#nadVnosPredznak span:after {
    /*border: 1px solid blue;*/
}
.odmika {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
img.obrnjena {
    filter: invert(1);
}
.svetliNačin .obrnjena {
    filter: invert(0%);
}
.stikaloNačina {
    position: fixed;
    z-index: 100;
    top: 0.5rem;
    right: 1em;
    color: var(--barvaOspredja);
    border: 0;
    padding: 4px;
    background: transparent;
    cursor: pointer;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    font-size: 1em;
}
a {
    color: var(--barvaPoudarka);
    text-decoration: none;
    cursor: pointer
}
samp {/*opredeli kot sporočilo računalnika*/
    font-family: monospace;
}

table {
    position: static;
    border-collapse: collapse;
    margin: 0.5rem;
    left: auto;
    right: auto;
}
tr:hover {
    background-color: var(--barvaOzadjaNaprej);
}
.zgorajrob td {
    border-top: 1px solid var(--barvaOspredja);
}

.teden {
    position: fixed;
    width: 50vw;
    max-width: 300px;
    aspect-ratio: 1/1;
}
    .tedenŠtevilčnica {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .kazalecTedna {
        position: absolute;
        background-color: blue;
        width: 1%;
        height: 50%;
        top: 0;
        bottom: 0;
        left: calc(50% - 2px);
        transform-origin: bottom;
        z-index: 2;
    }
.položajSonca {
    position: absolute;
    width: 50%;
    float: right;
    right: 0;
    aspect-ratio: 1/1;
}
.krajUra {
    height: 50vw;
    aspect-ratio: 1/1;
    position: sticky;
    float: right;
    right: 0;
    top: 0;
    border-radius: 50%;
    background-color: var(--barvaOzadja);
}
    #krajUrniKaz {
        height: 50%;
        width: 2px;
        position: absolute;
        background-color: red;
        bottom: 0;
        left: 50%;
        transform: translate (-50%, 0);
            transform-origin: top;
    }
    #krajLetKaz {
        width: calc(0.14266347*80%);
        height: calc(0.14266347*80%);
        position: absolute;
        border: 1px solid yellow;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate (-50%, -50%);
    }

/*DRSNIK*/
    html {
      scrollbar-width: normal;
      scrollbar-color: #777 #5555;
    }

    ::-webkit-scrollbar {
      width: 1vw;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #7775;
    }
    ::-webkit-scrollbar-thumb:hover /*barva, ko si z miško gor*/ {
      background-color: #777;
    }

    ::-webkit-scrollbar-track {
      background-color: #5555;
    }

/*NAPRAVI***************************************************************/
.uraSonca {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
}
#zemljevidStarš {
    background: white;
    border-radius: 50%;
}
    .letnaŠtSonca {
        z-index: 3;
        position: absolute;
        height: 100%;
        width: 100%;
        transform: rotate(calc(360/365.2425 *11 *-1deg))
    }
    .letniČasiSonca {
        --širina: 90%;
        z-index: -1;
        position: absolute;
        height: var(--širina);
        width: var(--širina);
        border-radius: 50%;
        left: calc((100% - var(--širina))/2);
        right: calc((100% - var(--širina))/2);
        top: calc((100% - var(--širina))/2);
        bottom: calc((100% - var(--širina))/2);
    }
    .dnevnaPot {
        --širina: 75%;
        z-index: 5;
        position: absolute;
        height: var(--širina);
            top: calc((100% - var(--širina))/2);
            bottom: calc((100% - var(--širina))/2);
        width: var(--širina);
            left: calc((100% - var(--širina))/2);
            right: calc((100% - var(--širina))/2);
        border-radius: 50%;
    }
    .letnoSonca {
        --širina: 75%;
        z-index: 4;
        position: absolute;
        height: var(--širina);
            top: calc((100% - var(--širina))/2);
            bottom: calc((100% - var(--širina))/2);
        width: var(--širina);
            left: calc((100% - var(--širina))/2);
            right: calc((100% - var(--širina))/2);
        border-radius: 50%;
        transform: rotate(0deg);
            transform-origin: center;
            transition: transform 1s;
    }
        .dneviLune {
            --širina: 104%;
            position: absolute;
            z-index: 10;
            width: var(--širina);
            height: var(--širina);
            left: calc((100% - var(--širina))/2);
            top: calc((100% - var(--širina))/2);
            transform: rotate(0deg);
                transform-origin: center;
                transition: transform 1s;
        }
        .sonce {
            --širina: 115%;
            position: absolute;
            z-index: 3;
            width: var(--širina);
            height: var(--širina);
            left: calc((100% - var(--širina))/2);
            top: calc((100% - var(--širina))/2);
        }
        .senca {
            --širina: 100%;
            position: absolute;
            z-index: 4;
            width: var(--širina);
            height: var(--širina);
            left: calc((100% - var(--širina))/2);
            top: calc((100% - var(--širina))/2);
            opacity: 0.5;
        }
        /*.urnaŠtSo {
            --širina: 100%;
            position: absolute;
            z-index: 6;
            width: var(--širina);
            height: var(--širina);
            left: calc((100% - var(--širina))/2);
            top: calc((100% - var(--širina))/2);
        }*/
        .urnaŠtSo {
            --širina: 100%;
            position: absolute;
            z-index: 6;
            width: var(--širina);
            height: var(--širina);
            left: calc((100% - var(--širina))/2);
            top: 0;
        }
        .prostorUrniK {
            --širina: 100%;
            z-index: 40;
            position: absolute;
            height: var(--širina);
                top: calc((100% - var(--širina))/2);
                bottom: calc((100% - var(--širina))/2);
            width: var(--širina);
                left: calc((100% - var(--širina))/2);
                right: calc((100% - var(--širina))/2);
            border-radius: 50%;
            overflow: hidden;
            transform: rotate(0deg);
                transition: transform 1s;
        }
            .nadUrniKazalec {
                height: 100%;
                width: 100%;
            }
                .urniKazalec {
                    --širina: 0.5%;
                    position: absolute;
                    z-index: 10;
                    height: 100%;
                        top: 35.6%;
                    width: var(--širina);
                        left: calc((100% - var(--širina))/2);
                    transform: rotate(0deg);
                        transform-origin: top;
                        transition: transform 1s;
                    background-color: red;
                }
            /*.ukrivljen {
                --širina: 0.5%;
                position: absolute;
                z-index: 10;
                height: 50%;
                top: 25%;
                left: 25%;
                width: 50%;
                border-radius: 50%;
                border-right: 4px solid white;
                transform: rotateZ(-60deg) rotateX(23.5deg) rotateY(60deg);
                    transform-origin: center;
                    transition: transform 1s;
                background-color: green;
            }*/
            .ukrivljen {
                --širina: 0.5%;
                position: absolute;
                z-index: 10;
                width: 100%;
                height: 100%;
                    top: 0;
                    bottom: 0;
                border-radius: 50%;
                border: 1px solid white;
                    border-left-color: transparent;
                    border-top-color: transparent;
                background-color: green;
            }
        .urno {
            transform: rotate(0deg);
                transform-origin: center;
                transition: transform 1s;
            background-color: var(--barvaOzadja);
            border-radius: 50%;
        }
            .zemljevid {
                opacity: 0.6;
            }
        .lunino {/*lunin kazalec, cela širina*/
            --višina: 75;
            z-index: 4;
            position: absolute;
            height: 116%;
                top: -8%;
                bottom: -8%;
            width: 8%;
                left: 46%;
                right: 46%;
            transform: rotate(0deg);
                transform-origin: center;
            transition: transform 0.5s;
        }
            .luna {/*kvadraten div z deli Luninega prikaza*/
                z-index: 3;
                position: absolute;
                height: calc((8*100)/116 *1%);
                    top: 0;
                width: 100%;
                border-radius: 50%;
                border: 1px solid white;
                }
                .del {/*del prikaza, ki spreminja širino glede na meno*/
                    position: absolute;
                    z-index: 5;
                    height: 100%;
                    top: 0;
                    border-radius: 50%;
                    background-color: black;
                    /*transition: width 1s, transform 1s;*/
                }
                .polluna {/*ozadje za prikaz Lune, osnovna razdelitev na osvetljeno in neosvetljeno*/
                    position: absolute;
                    z-index: 4;
                    height: 100%;
                    top: 0;
                    border-radius: 50%;
                    background-color: black;
                    transition: transform 0.5s;
                }
                .pollunaPred {/*dodaten prikaz "od zgoraj"*/
                    position: absolute;
                    z-index: 10;
                    height: 100%;
                    top: 0;
                    border-radius: 50%;
                    background-color: black;
                    transition: transform 0.5s;
                }
        .lunVozel {/*presečišče osončne in Lunine ravnine kroženja*/
            --višina: 75;
            z-index: 3;
            position: absolute;
            height: 116%;
                top: -8%;
                bottom: -8%;
            width: 8%;
                left: 46%;
                right: 46%;
            transform: rotate(75deg);
                transform-origin: center;
            transition: transform 0.5s;
            border-left: 1px solid blue;
            border-right: 1px solid blue;
        }
        .ZemSenca {/*Senca, ki jo Zemlja meče za seboj*/
            --višina: 75;
            z-index: -1;
            position: absolute;
            /*height: 116%;
                top: -8%;
                bottom: -8%;*/
            height: 58%;
                bottom: -8%;
            width: 8%;
                left: 46%;
                right: 46%;
            transform: rotate(0deg);
                transform-origin: top;
            transition: transform 0.5s;
            /*border-left: 1px solid blue;
            border-right: 1px solid blue;*/
        }
            #krakZemSence1 {
                width: 1px;
                height: 15%;
                position: absolute;
                right: 50%;
                bottom: 0;
                background-color: red;
                transform-origin: bottom;
                transform: rotate(0deg);
            }
            #krakZemSence2 {
                width: 1px;
                height: 15%;
                position: absolute;
                left: 50%;
                bottom: 0;
                background-color: red;
                transform-origin: bottom;
                transform: rotate(0deg);
            }
            #krakZemPolsence1 {
                width: 1px;
                height: 15%;
                position: absolute;
                right: 50%;
                bottom: 0;
                background-color: orange;
                transform-origin: bottom;
                transform: rotate(0deg) /*translateY(-100%)*/;
            }
            #krakZemPolsence2 {
                width: 1px;
                height: 15%;
                position: absolute;
                left: 50%;
                bottom: 0;
                background-color: orange;
                transform-origin: bottom;
                transform: rotate(0deg) /*translateY(-100%)*/;
            }
#nebo {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    /*background-color: blue;*/
}
    #neboLetno {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        transition: transform 0.5s;
    }
        #neboUrna {
            position: absolute;
            z-index: 12;
            width: 100%;
            height: 100%;
        }
        #neboObzorje {
            position: absolute;
            z-index: 11;
            width: 100%;
            height: 100%;
            left: 0;
            transition: transform 0.5s;
        }
    #neboZvezde {
        position: absolute;
        width: 90%;
        height: 90%;
        border: none;
        z-index: -1;
        left: 5%;
        top: 5%
    }
@media (max-aspect-ratio: 1/2) /*visoko/ozko okno*/ {
    .uraSonca {
        left: 0;
        top: 0;
    }
    .nebo {
        right: 0;
        bottom: calc(100vmax - 200vmin);
    }
}
@media (min-aspect-ratio: 2/1) /*nizko/dolgo okno*/ {
    .uraSonca {
        left: 0;
        top: 0;
    }
    #nebo {
        left: 100vmin;
        bottom: 0;
    }
}

/*KAZALO SPLETNE STRANI*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

.hamburger-menu {
  --x-width: calc(var(--hamburger-height) * 1.41421356237);/*izračun širine ikone x; število je koren od 2*/

  display: flex;
  flex-direction: column;
  gap: var(--hamburger-gap);
  /*width: max-content; /*okno je široko, kolikor je vsebina*/
  position: fixed;
  top: var(--hamburger-margin);
  left: var(--hamburger-margin);
  z-index: 101;
  cursor: pointer; /*kazalec spremeni obliko, ko se zapelješ nanj - dejaven*/
}

.hamburger-menu:has(input:checked) {
  --foreground: var(--barvaOspredja);
  --background: var(--barvaOzadja);
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
  border: 1px solid var(--barvaOspredja); /*obroba, ko je ikona izbrana pri delu brez kazalca, barve background*/
  box-shadow: 0 0 0 1px var(--barvaOzadja);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--barvaOspredja);
  border-radius: 9999px;
  transform-origin: left center; /*središče sukanja je na levi*/
  transition: opacity var(--animation-timing), width var(--animation-timing),
    rotate var(--animation-timing), translate var(--animation-timing),
    background-color var(--animation-timing); /*dolžina trajanj animacij za vse spremembe*/
}

.hamburger-menu input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
}

.hamburger-menu:has(input:checked)::before {
  rotate: 45deg; /*obračanje zgornje črtice*/
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
  rotate: -45deg;/*obračanje spodnje črtice*/
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked { /*ob kliku je počekirana sredinska črta - ob tem pa izgine*/
  opacity: 0;
  width: 0;
}

.sidebar /*kazalo stran*/ {
  transition: translate var(--animation-timing); /*čas, da se prikaže kazalo*/
  translate: -100%; /*kazalo strani je privzeto skrito izven strani*/
  background-color: var(--barvaOzadjaProsojno);
  color: var(--barvaOspredja);
  /*max-width: 30rem; /*največja širina polja kazala strani, 1rem = fontsize of page*/
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  overflow: auto;
  z-index: 99;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: grayscale(100%);
    -webkit-backdrop-filter: grayscale(100%);
}
.sidebar li {
  text-align: left;
}
.sidebar nav {
  padding: 0.5rem 1rem;
  padding-top: calc(var(--hamburger-height) + var(--hamburger-margin));
  padding-bottom: 2rem;
  width: 50vw;
}

.hamburger-menu:has(input:checked) + .sidebar {
  translate: 0;
}