/*
    ---------------------------------------------------------------------- copyright and license ---

    File: html/style.css.in

    Copyright 🄯 2014, 2016—2017, 2019—2023 Van de Bugger.

    This file is part of Tapper.

    Copying and distribution of this file, with or without modification, are permitted in any
    medium without royalty provided the copyright notice and this notice are preserved. This file
    is offered as-is, without any warranty.

    SPDX-License-Identifier: FSFAP

    ---------------------------------------------------------------------- copyright and license ---
*/

:root {
    --normal-text-color     : #333300;
    --dimmed-text-color     : #666666;
    --code-text-color       : #003333;
    --normal-link-color     : #0808C0;
    --visited-link-color    : #551A8B;
    --border-color          : #999999;
    --normal-back-color     : #EEEEED;
    --high-back-color       : #F3F3F6;
    --heading-factor        : 1.2;
    --h3-font-size          : calc( 100% * var( --heading-factor ) );
    --h2-font-size          : calc( var( --h3-font-size ) * var( --heading-factor ) );
    --h1-font-size          : calc( var( --h2-font-size ) * var( --heading-factor ) );
    --gap                   : 0.5em;
    --big-gap               : calc( var( --gap ) * 2 );
    --huge-gap              : calc( var( --big-gap ) * 2 );
    --small-gap             : calc( var( --gap ) / 2 );
    --tiny-gap              : calc( var( --small-gap ) / 2 );
    --border-width          : 1px;
    --line-height           : 1.5;
    --flag-height           : 1em;
    --flag-width            : calc( 1 / 2 * 3 * 1em ); /* height / width = 2/3 */
    --nbsp                  : " "; /* no-break space quoted! */
    --animation             : 60s;
}

/*
    ------------------------------------------------------------------------------------------------
    Generic styles
    ------------------------------------------------------------------------------------------------
*/

body {
    margin                  : var( --small-gap ) var( --gap ) var( --small-gap ) var( --gap );
    color                   : var( --normal-text-color );
    background-color        : var( --normal-back-color );
    line-height             : var( --line-height );
/*
    font-family             : monospace;
*/
}
@media only screen and ( min-width: 50ch ) {
    body {
        margin              : var( --gap ) var( --big-gap ) var( --gap ) var( --big-gap );
    }
}
@media only screen and ( min-width: 100ch ) {
    body {
        margin              : var( --big-gap ) var( --huge-gap ) var( --big-gap ) var( --huge-gap );
    }
}
section {
    margin                  : 0;
}
.left {
    text-align              : left;
}
.right {
    text-align              : right;
}
.nowrap {
    white-space             : nowrap;
}
.disabled {
    color                   : var( --dimmed-text-color );
}
.hidden {
    display                 : none;
}
p {
/*
    hyphens                 : auto;
*/
}
.g {
    color: green;
}
.r {
    color: red;
}

table {
  border-collapse: collapse;
}

th, td {
    border-style : solid;
    border-width : var( --border-width );
    border-color : var( --border-color );
    padding-left : var( --gap );
    padding-right: var( --gap );
    margin       : 0;
}

/*
    ------------------------------------------------------------------------------------------------
    Top and bottom
    ------------------------------------------------------------------------------------------------
*/

#top,
#bottom {
    width                       : 100%;
    border-style                : solid;
    border-color                : var( --border-color );
    color                       : var( --text-color );
    display                     : grid;
    grid-template-columns       : 1fr auto 1fr;
    grid-column-gap             : var( --gap );
}
#top {
    border-width                : 0 0 var( --border-width ) 0;
}
#bottom {
    border-width                : var( --border-width ) 0 0 0;
}
#globe {
    position                    : relative;
}
#globe-1,
#globe-2,
#globe-3 {
    position                    : absolute;
    animation-duration          : var( --animation );
    animation-iteration-count   : infinite;
    opacity                     : 1;
    animation-name              : globe;
}
#globe-1 {
    z-index                     : 3;
    animation-delay             : calc( var( --animation ) / 3 * 0.0 );
}
#globe-2 {
    z-index                     : 2;
    animation-delay             : calc( var( --animation ) / 3 * 1.0 );
}
#globe-3 {
    z-index                     : 1;
    animation-delay             : calc( var( --animation ) / 3 * 2.0 );
}
@keyframes globe {
   000.000% { opacity: 1; z-index: 3; }
   030.000% { opacity: 1; z-index: 3; }
   033.333% { opacity: 0; z-index: 3; }
   066.666% { opacity: 0; z-index: 1; }
   100.000% { opacity: 1; z-index: 2; }
}
#flag {
    height                  : var( --flag-height );
    width                   : var( --flag-width );
}
#sf img {
    height                  : calc( 100 / 52 * 1ex );
    /*
        Attempt to resize the logo so logo's letters are as large as the page (small) letters.
        Unfortunately, logo's letters are capital, while there is no way to get height of a capital
        letter; so let's use height of small letter (1ex) instead.

        SourceForge logo sizes:
            Total height : 100%
            Upper margin :  24%
            Letter height:  52%
            Lower margin :  24%
    */
    position                : relative;
    top                     : calc( 100 / 52 * 1ex * 24 / 100 );
}

/*
    ------------------------------------------------------------------------------------------------
    Table of Content
    ------------------------------------------------------------------------------------------------
*/

#toc ul {
    /* Cancel default list style: */
    list-style              : none;
    padding                 : 0;
    /* Create new style: */
    display                 : grid;
    grid-template-columns   : max-content auto;
}
#toc li {
    display                 : contents;
}
#toc li::before {
    grid-column             : 1;
    content                 : attr( data-marker );
}
#toc a {
    grid-column             : 2;
}
#toc ul ul {
    grid-column             : 2;
    display                 : grid;
    grid-template-columns   : max-content auto;
}

/*
    In case of wide screen format TOC as a sidebar.
*/
@media only screen and ( min-width: 100ch ) {
    #toc {
        float               : right;
        width               : auto;
        margin              : 0 0 var( --gap ) var( --gap );
        border-width        : var( --border-width );
        border-style        : solid;
        border-color        : var( --border-color );
        background-color    : var( --high-back-color );
        padding             : var( --gap ) var( --big-gap ) var( --gap ) var( --big-gap );
    }
    #toc h2 {
        margin              : 0 0 var( --gap ) 0;
        font-size           : 100%;
        text-align          : center;
    }
    #toc ul {
        margin              : 0;
    }
}

/*
    ------------------------------------------------------------------------------------------------
    Headers
    ------------------------------------------------------------------------------------------------
*/

h1 {
    font-size               : var( --h1-font-size );
    font-weight             : bold;
    counter-reset           : h2;
}
h2 {
    font-size               : var( --h2-font-size );
    font-weight             : bold;
    border-width            : 0 0 var( --border-width ) 0;
    border-style            : solid;
    border-color            : var( --border-color );
    counter-reset           : h3;
}
h3 {
    font-weight             : bold;
    font-size               : var( --h3-font-size );
}
/*
    Number level 2 and level 3 headings, but only if there is #toc section.
*/
[data-toc="number"] ~ section:not(#toc) h2::before {
    counter-increment       : h2;
    content                 : counter( h2 ) "." var( --nbsp );
}
[data-toc="number"] ~ section h3::before {
    counter-increment       : h3;
    content                 : counter( h2 ) "." counter( h3 ) "." var( --nbsp );
}

/*
    ------------------------------------------------------------------------------------------------
    Footnotes
    ------------------------------------------------------------------------------------------------
*/

.footnotes hr {
    display                 : none;
}

.footnotes ol {
    display                 : grid;
    grid-template-columns   : auto;
    grid-row-gap            : 1em;
    list-style              : none;
    padding                 : 0;
}
.footnotes ol li {
    counter-increment       : l1;
    display                 : grid;
    grid-template-columns   : max-content auto;
    grid-row-gap            : 1em;
}
.footnotes ol li::before {
    content                 : counter( l1 ) ". ";
}
.footnotes ol li p {
    grid-column             : 2 / 3;
    margin                  : 0;
}

/*
    ------------------------------------------------------------------------------------------------
    Code
    ------------------------------------------------------------------------------------------------
*/

/* inline code */
code {
    font-family             : monospace;
    padding                 : 0 var( --tiny-gap ) 0 var( --tiny-gap );
    border                  : dotted var( --border-width ) var( --border-color );
    border-radius           : var( --small-gap );
    color                   : var( --code-text-color );
    background-color        : var( --high-back-color );
}
/* key name or mouse button name */
code.k, code.b {
    color                   : var( --normal-text-color );
    border-style            : solid;
    border-right-width      : calc( var( --border-width ) * 3 );
    border-bottom-width     : calc( var( --border-width ) * 3 );
}
/* code block */
pre {
    border-style            : dashed;
    border-width            : var( --border-width );
    border-color            : var( --border-color );
    padding                 : var( --small-gap ) var( --gap ) var( --small-gap ) var( --gap );
    background-color        : var( --high-back-color );
    overflow                : auto;
}
pre code {
    border                  : 0;
    padding                 : 0;
}

/*
    ------------------------------------------------------------------------------------------------
    Links
    ------------------------------------------------------------------------------------------------
*/

/*
    By default links are rendered with no decoration, but using link color (different fo visited
    and non-visited links). Hover links are rendered in reversed colors. This applies to intra-site
    links because style for external links is redefined below.
*/
a {
    text-decoration         : none;
    color                   : var( --normal-link-color );
}
a:visited {
    color                   : var( --visited-link-color );
}
a:hover {
    color                   : var( --normal-back-color );
    background-color        : var( --normal-link-color );
    text-decoration         : none;
}
a:hover:visited {
    background-color        : var( --visited-link-color );
}

/*
    Footnote links.
*/

a.footnote-ref sup {    /* Cancel effect of <sup>. */
    font-size               : inherit;
    vertical-align          : baseline;
}
a.footnote-ref,
a.footnote-back {
    vertical-align          : super;
    font-size               : 50%;
}
a.footnote-ref::before,
a.footnote-back::before {
    content                 : "[";
}
a.footnote-ref::after,
a.footnote-back::after {
    content                 : "]";
}

/*
    External links: (a) have suffix "↗" to denote external resource, (b) hover links are rendered
    underlined.
*/
a[href^="https://"]::after {
    content                 : "↗";
    vertical-align          : text-top;
    font-size               : 50%;
}
a:hover[href^="https://"] {
    color                   : var( --normal-link-color );
    background-color        : var( --normal-back-color );
    text-decoration         : underline;
    text-decoration-style   : solid;
}
a:hover:visited[href^="https://"] {
    color                   : var( --visited-link-color );
}

/*
    Wikipedia links: (a) have suffix "?" instead of "↗", (2) hover links are rendered with "help"
    cursor.
*/
a[href^="https://en.wikipedia.org/"]::after,
a[href^="https://ru.wikipedia.org/"]::after {
    content                 : "?";
}
a:hover[href^="https://en.wikipedia.org/"],
a:hover[href^="https://ru.wikipedia.org/"] {
    cursor                  : help;
}

/*
    Links to friend sites do not have extenal suffix.
*/

a[href^="https://agism.sourceforge.io/"]::after,
a[href^="https://kbd-tapper.sourceforge.io/"]::after,
a[href^="https://sourceforge.net/projects/kbd-tapper/"]::after,
a[href^="https://copr.fedorainfracloud.org/coprs/vandebugger/tapper/"]::after,
a[href^="https://kbd-tapper.sourceforge.io/"]::after {
    content                 : "";
}

/*
    When `pandoc` renders HTML from Markdown, it converts `<URI>` to hyperlink, but strips angle
    brackets. Let's get brackets back.
*/
a.uri::before {
    content                 : "<";
    color                   : var( --normal-text-color );
}
a.uri::after {
    content                 : ">";
    color                   : var( --normal-text-color );
    vertical-align          : baseline;
    font-size               : 100%;
}
a.uri:hover::before,
a.uri:hover::after {
    color                   : var( --normal-text-color );
    background-color        : var( --normal-back-color );
}

/*
    Links in top and bottom.
*/
#top a,
#bottom a {
    color                   : var( --normal-text-color );
    background-color        : var( --normal-back-color );
}
#top    a:hover,
#bottom a:hover {
    text-decoration         : none;
}

#top    a::after,
#bottom a::after {
    content                 : "";
}

/*
    ------------------------------------------------------------------------------------------------
    Images
    ------------------------------------------------------------------------------------------------
*/

img.gpl {
    float                   : right;
    height                  : 3em;
    margin-left             : var( --gap );
}

/*
    ------------------------------------------------------------------------------------------------
    Search
    ------------------------------------------------------------------------------------------------
*/

#search {       /* entire search div */
    display                 : flex;
    flex-wrap               : wrap;
    align-items             : baseline;
    justify-content         : right;
    column-gap              : var( --gap );
    row-gap                 : var( --gap );
}
#search-text {  /* the first form containing input field. */
    flex-grow               : 100;
    display                 : flex;
    align-items             : baseline;
    column-gap              : var( --gap );
}
#search-text-prompt {
    flex-grow               : 0;
    white-space             : nowrap;
}
#search-text-input {
    flex-grow               : 100;
    width                   : 10ch;
}
#search-buttons {
    display                 : flex;
    flex-direction          : row;
    column-gap              : var( --gap );
    flex-wrap               : wrap;
    justify-content         : right;
}
/*
    By default FF uses another, non user-defined font for input fields. I want to use the same font
    of the same size as used for page body.
*/
input {
    font-family             : inherit;
    font-size               : inherit;
}

/* end of file */