/* Silanael.com 2.x stylesheet 
   2025-07-31                */


:root
{
    --spacer:              max(1vh,   1px);
    --padding:             max(0.5vh, 1px);
    --bgcolor:             #000000;
    --maincolor-s:         #A00000;
    --maincolor:           #800000;
    --maincolor-l:         #700000;
    --maincolor-d:         #500000;
    --bordercolor:         #410101;
    --sisältö-bgväri:      #000000B5;  /* <3 */
    --scrollbar-handle:    var(--maincolor-l);
    --scrollbar-bg:        var(#505050);
    --beam-red:            200;    
  
    width:                 100%;
    height:                100%;
    min-width:             100%;
    min-height:            100%;
    max-width:             100%;
    max-height:            100%;
}


body
{    
    display:               grid;
      
    grid-template-columns: 10fr 50fr 10fr 20fr 10fr;
    grid-template-rows:    5vh 5fr 5fr 12fr 8fr 10fr 10fr 5.5fr 4.5fr;

    
    grid-template-areas:   "yläp    yläp   yläp    yläp   yläp   "  
                           "data-v1 data-1 data-o1 info-1 info-r1"
                           "data-v2 data-2 data-o2 info-2 info-r2"
                           "data-v3 data-3 data-o3 info-3 info-r3"
                           "data-v4 data-4 data-o4 info-4 info-r4"
                           "data-v5 data-5 data-o5 info-5 info-r5"
                           "data-v6 data-6 data-o6 info-6 info-r6"
                           "data-v7 data-7 data-o7 info-7 info-r7"
                           "alap    alap   alap-r  info-8 info-r8";
    
    padding:               0px;
    margin:                0px;
    font-family:           Tahoma;
    overflow-x:            hidden;
    overflow-y:            auto;
        
        
    color:                 var(--maincolor);            
    background-color:      var(--bgcolor);
    background-image:      url('img/Silanael-logo_BG.png');
    background-size:       contain;
    background-position:   center;
    background-repeat:     no-repeat;   
    background-attachment: fixed;


    width:                 inherit;
    height:                inherit;
    min-width:             inherit;
    min-height:            inherit;
    max-width:             inherit;
    max-height:            inherit;        
    text-align:            center;
}


.data-palkki               { grid-area:           data-v1 / data-v1 / span 7  / data-o7; }
.data-koko                 { grid-area:           data-v1 / data-v1 / span 8  / data-o7; }
.data-kapea                { grid-area:           data-1  / data-1  / data-7  / data-7;  }
.data-main                 { grid-area:           data-v1 / data-v1 / span 7  / data-o7; }
.data-ainoa                { grid-area:           data-1  / data-1  / info-7  / info-7;  }

.data-about                { grid-area:           data-v1  / data-v1 / data-7 / data-7; }
.valikko-about             { grid-area:           data-o1  / data-o1 / info-r8  / info-r8; }
.alap-about                { grid-area:           alap / alap / alap / alap; }

/*.data-about                { grid-area:           data-v2 / data-v2 / span 7  / data-o7; } */
.info-ylä                  { grid-area:           info-1  / info-1  / info-r3 / info-r3; }
.info-main                 { grid-area:           data-o1 / data-o1 / info-r5 / info-r5; }
.opts-main                 { grid-area:           data-o6 / data-o6 / info-r7 / info-r7; } 
.info-files                { grid-area:           info-1  / info-1  / info-r3 / info-r3; }
.alapalkki                 { grid-area:           alap / alap / alap-r / alap-r;         }
.alapalkki-täysi           { grid-area:           alap / alap / span 1 / span 8;         }
.opts                      { grid-area:           auto / auto / span 5 / span 2;         } 





::-webkit-scrollbar           { width:                    max(2vh, 5px);           }
::-webkit-scrollbar-track     { background:               var(--scrollbar-bg);     }
::-webkit-scrollbar-thumb     { background:               var(--scrollbar-handle); }


*
{
    scrollbar-width:       thin;
    scrollbar-color:       var(--scrollbar-handle) var(--scrollbar-bg);
    
    border-color:          var(--bordercolor);
}




a
{
    font-weight:           bold;  
    text-decoration:       none;    
    color:                 inherit;
    
}



h1:before                  { content: "<";       }
h1:after                   { content: ">";       }
h1,h2,h3                   { text-align: center; }

button
{
    color:                 var(--bgcolor);
    background-color:      var(--maincolor-l);
    border:                2px solid #410101;
    font-size:             2vh;
}

button:hover
{
    background-color:      var(--maincolor-s);
}

input,select
{    
    accent-color:          var(--maincolor-s);
    color:                 var(--maincolor-s);
    background-color:     #000000;
    font:                  inherit;
}

legend
{
    text-transform:        uppercase;
}








table
{    
    text-align:          left;
    min-width:           100%;   
    margin:              auto;
}




td,th
{               
    padding:             0.2em;
    border-spacing:      0px;
    border-collapse:     collapse;    
    min-width:           5em;
}

td.cut
{ 
    word-break:          break-all;
    overflow:            hidden;
}


th
{    
    padding:             0.2em;
    background-color:    var(--maincolor-l);
    color:               var(--bgcolor);    
    border:              0.2em solid;
    border-color:        var(--bordercolor);
    
}


.kvptaulukko
{
    border:         none;  
    min-width:      initial;  
}

.kvptaulukko *
{
    color:              var(--maincolor-l);
    background-color:   #000000;
    border:             none;    
}

.väljälista li
{
    margin: 1em auto;
}

li
{
    text-align: left;
}



/*
tr:hover
{
    color:                     var(--bgcolor);
    /*background-color:          rgb(var(--beam-red), 0, 0);*/ /*
    background-color:          var(--maincolor);

}
*/




.pending
{
    animation-name:            fadecycle;
    animation-duration:        1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;    
}




@keyframes silapulse
{
    0%   { background-color: var(--maincolor-s); }    
    100% { background-color: var(--maincolor-l); }
}

@keyframes silabeam
{
    0%   { background-color: rgb(170, 0, 0); }
    /*
    33%  { background-color: rgb(160, 0, 0); }
    66%  { background-color: rgb(180, 0, 0); }
    */
    100% { background-color: rgb(120, 0, 0); }
}

@keyframes fadecycle
{
    0%    { color: var(--maincolor);   }
    50%   { color: #000000;          }
    100%  { color: var(--maincolor);   }
}







.palkki
{
    min-width: 100%;
}





#yläpalkki
{    
    grid-area:             yläp;
    display:               flex;
    align-items:           center;
    background-color:      var(--maincolor);
    color:                 var(--bgcolor);            
    width:                 100%;
    max-width:             100%;
    height:                100%;
    max-height:            100%;
    font-size:             3.5vh;
}





#logo
{        
    background-color:      black;    
    
    padding:               0;
    max-height:            inherit;
    border:                max(0.3vh, 1px) solid var(--maincolor-d);
    height:                3.2vh;
    margin:                0.4vh;

}

#logo-img
{
    filter:                    saturate(100%);
    display:                   inline;
    vertical-align:            middle;
    float:                     left;
    height:                    100%;
    animation-name:            logo-latausanimaatio;
    animation-duration:        500ms;
    animation-iteration-count: 0; 
}

@keyframes logo-latausanimaatio 
{
    /*
    0%                        { filter: saturate(100%); }
    25%                       { filter: saturate(200%); }
    */
    0%                        { filter: saturate(200%); }
    100%                      { filter: saturate(100%); }
}




#päävalikko
{    
    flex-basis:  max(30vw, max-content);
    flex-grow:   0;
    flex-shrink: 0;
    font-size:   max(calc(33.3vw / 26 * 1.2), 50%);
    text-align:  left;
}


#päävalikko a:hover
{     
    color:                 var(--maincolor);
    background-color:      var(--bgcolor);    
}




#otsikko
{    
    flex-basis:     33.3vw;
    flex-grow:      0;
    flex-shrink:    1;

    text-align:     center;
    font-weight:    bold;    
    font-size:      calc(33.3vw / 26 * 1.5);    
}




#asetukset 
{ 
    flex-basis:            max(33vw, max-content);
    flex-grow:             1;
    flex-shrink:           0;    
    display:               flex;
    flex-direction:        column;
    justify-content:       space-around;
    text-align:            right;
    float:                 right;
    margin-right:          max(0.5vh, 1px); 
    font-size:             45%;
    font-weight:           bold;;
    height:                100%;
}


#timelock
{
    color:                     var(--maincolor-s);
    background-color:          #000000;
    border:                    0.5vmin solid var(--maincolor-l);
    animation-name:            timelock;
    animation-duration:        750ms;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;
    visibility:                hidden;
}

@keyframes timelock 
{
    0% 
    {
        color:            var(--maincolor-s);
        background-color: #000000;
        border:           0.5vmin solid var(--maincolor-s);    
    }

    50% 
    {
        color:            #000000; 
        background-color: var(--maincolor-s);
        border:           0.5vmin solid #000000;
    }

    100% 
    {
        color:            var(--maincolor-s);
        background-color: #000000;
        border:           0.5vmin solid var(--maincolor-s);    
    }

}



.center
{
    display:             grid;
    place-content:       center;
    width:               100%;
    height:              100%;
}

.sisältö, .sisältö-eireunoja
{
    background-color:    var(--sisältö-bgväri);

    margin:              var(--spacer);
    padding:             var(--spacer);       
    border:              0.5vmin solid var(--maincolor-l);
    width:               100%;
    height:              100%;
    min-width:           calc(100% - var(--spacer) * 4);
    max-width:           calc(100% - var(--spacer) * 4);
    min-height:          calc(100% - var(--spacer) * 4);
    max-height:          calc(100% - var(--spacer) * 4);

    overflow-y:          auto;
    text-align:          center;
}

.sisältö-avoin
{
    border:              0px;
    background-color:    unset;
}

.avoin-elem
{    
    background-color:    var(--sisältö-bgväri);
    border:              0.5vmin solid var(--maincolor-l);
}

/*
.valikko-välilehti
{
    display:             flex;
    justify-content:     space-between;
}
*/


#välilehti-esikatselu,
#välilehti-esikatselu *
{
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
}



.keski
{
    display:          flex; 
    justify-content:  center; 
    align-items:      center; 
    min-height:       100%;
}

.tooltip
{
    display:          inline;
    width:            fit-content;
}

.tooltip-teksti
{        
    position:         absolute;    
    bottom:           25vh;
    right:            40vh;
    max-width:        60vw;
    max-height:       50vh;
    z-index:          1;
    color:            var(--maincolor);
    background-color: #000000;
    border:           max(0.2em, 2px) solid var(--maincolor);
    padding:          0.5em 1em;
    overflow:         auto;
    word-wrap:        break-word;

    display:          none;
    visibility:       hidden;
}

/*
.table-kvp td:hover,
.tooltip:hover
{
    position: relative;
    display:  inline-block;
}
*/


.table-kvp td:hover .tooltip-teksti,
.tooltip:hover .tooltip-teksti
{    
    display:          inline-block;
    visibility:       visible;    
}


.table-kvp
{
    font-family:     monospace;
}


.table-fixed
{
    table-layout: fixed;
    width:        100%;
    height:       100%;
}

.vasen
{
    text-align: left;
}

.status-palkki
{
    width:      0%;
    min-height: 100%;
    display:    inline-block;
    background-color: var(--maincolor);
}



.valittu
{
    /*
    color:                     #000000;
    background-color:          #800000;    
    */
    
    color:                     var(--bgcolor);
    animation-name:            silabeam;
    animation-duration:        100ms;
    animation-iteration-count: infinite;
    animation-delay:           0ms;
    animation-timing-function: linear;
    animation-direction:       normal;    

}


@keyframes valinta
{
    0%   { background-color: #FF0000; }
    100% { background-color: #500000; }
}



.valittava:hover:not(.valittu)
{    
    color:                     var(--bgcolor);
    animation-name:            silapulse;
    animation-duration:        250ms;
    animation-iteration-count: infinite;
    animation-delay:           0ms;
    animation-timing-function: ease-in;
    animation-direction:       alternate;
       
}


.aktiivinen,
.aktiivinen_inline
{
    color:                     var(--maincolor-s);
    background-color:          black;
    font-weight:               bold;
    border:                    2px solid var(--maincolor-s);
    animation:                 anim_valittu;
    animation-duration:        1000ms;
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
}

.aktiivinen_inline
{
    padding: 0.1em;
}

.live
{  
    color:     #A00000;
    font-weight: bold
}

.tauolla
{
    color: #500000;
}


@keyframes anim_valittu 
{
    0%   { border-color: var(--maincolor-s); }
    50%  { border-color: var(--maincolor-l); }
    100% { border-color: var(--maincolor-s); }
    
}



#status-LVE { min-width: 5%; }
#status-LVE { background-color: #ff00ff; min-width: 4%; }
#status-HPE { background-color: #00f000; min-width: 1%; }
#status-HTE { background-color: #F00000; min-width: 78%; }



/*
#projektilista
{    
}
*/

.projektilappu
{
    background-color:      #000000;
    border:                2px solid #800000;
    margin:                5vw;
    display:               grid;
    /*
    grid-template-columns: 20vw 1fr;
    grid-template-rows:    min-content, max(min-content, 1fr), 4fr;    
    */
    grid-template-columns: fit-content(40%) auto;
    grid-template-rows:    min-content fit-content(100%) auto;
    gap:                   0vw;    
}

.projektilappu *
{
    margin: 0px;
}

.kapeakuvalappu
{
    grid-template-areas:   "otsikko      otsikko"
                           "projektikuva info"
                           "lapputeksti  lapputeksti";
}

.korkeakuvalappu
{
    grid-template-areas:   "otsikko      otsikko"
                           "projektikuva info"
                           "projektikuva lapputeksti";
}




.projektilappu .otsikko
{
    grid-area:         otsikko;
    background-color:#800000;    
    color:           #000000;
    font-weight:       bold;
    display:           flex;
    justify-content:   center;
    align-items:       center;
    font-size:         1.4em;
    
}


.projektilappu .otsikko h3
{    
    
    width:             fit-content;
    height:            fit-content;    
}

.projektikuva
{
    grid-area:         projektikuva;
    display:           flex;
    justify-content:   center;
    align-items:       center;
    background-color: #400000;
}

.projektikuva img
{
    margin:            0px auto;
    max-width:         95%;
    max-height:        50vh;
    padding:           1em;
}


.projekti_info
{
    grid-area:         info;
    display:           flex;    
    align-items:       center;
    padding:           1em;
    /*background-color: #0A0A0A;*/    
}

.projekti_info *
{
    background-color: inherit;
}


.lapputeksti
{
    grid-area:         lapputeksti;
    margin:            0.5em;
    border-top:        solid 4px #200000;            
}

.lapputeksti h3
{
    display:           block;
    margin-top:        3em;
}


.lapputeksti p
{    
    text-align:        left;
    margin-top:        1em;
    margin-bottom:     1em;
}




#info
{
    text-align:          left;
}

#about
{
    min-width:           70%;
    width:               70%;
    margin:              auto;
}

#about-table
{
    text-align:          center;    
}

#transaktiot-table
{
    min-width:           100%;
}




#info-alue p
{
    text-align:          left; 
}

#tx-info
{
    word-break:          break-all;
    text-align:          center;
}

.alapalkki,.alapalkki-täysi
{    
    display:             block;
    overflow:            hidden;
    margin:              auto;    
}



#alapalkki-main
{
    font-size:           200%;
}



#sivu-status
{   
    display:             inline;  
    float:               left;      
    word-break:          break-all;    
    overflow:            hidden;    
    max-width:           90%;
}

#sivu-alakontrollit
{  
    display:             inline;
    float:               right;
    max-width:           inherit;      
}



#sisältö-alakontrolli
{    
    display:         block;
    height:          4vh;
    max-height:      4vh;
    font-family:     monospace;
    text-align:      center;  
}


#sisältönappi_lisää
{    
    height:           100%;
    max-height:       10vh;
    margin:           auto;
    font-size:        3vh;
}

#sisältö-status:before
{    
    content:             "FETCHING";    
    height:              100%;
    font-size:           3vh;
    padding:             auto;
    animation-name:      fetch-animaatio;
    animation-duration:  500ms;
    animation-iteration-count: infinite;
}

#fetch-statsit
{
    text-align:          left;
}

#nappi-abort
{
    display:             hidden;
}

@keyframes fetch-animaatio
{
    0%   { content: "FETCHING / " }
    25%  { content: "FETCHING -" }
    50%  { content: "FETCHING \\ "}
    75%  { content: "FETCHING | " }
    100% { content: "FETCHING / " }
}

/* (C) Silanael 2024 */