/*!
 * Nick's web site: default stylesheet
 *
 * Copyright © 2018-2021 Nick Bowler
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

// colour definitions
$backgroundcolour:  #ffffff;
$foregroundcolour:  #000000;

$linkdefaultcolour: #0000cd;
$linkactivecolour:  #ff0000;
$linkvisitedcolour: #800080;

$ruledefaultcolour: #d3d3d3;
$rulestrongcolour:  #696969;

$annotationcolour:  #708090;

$tableshadecolour:  #f5f5f5;

@mixin header_size($maxwidth, $fontsize) {
    font-size: $fontsize;
    max-width: 1em * ($maxwidth / $fontsize);
}

body {
    background-color: $backgroundcolour;
    color: $foregroundcolour;
    font-family: sans-serif;
    margin: 1em;
}

a:link { color: $linkdefaultcolour; }
a:visited { color: $linkvisitedcolour; }
a:active { color: $linkactivecolour; }

h1 { @include header_size(60em, 2em); }
h2 { @include header_size(60em, 1.5em); }
h5 { @include header_size(60em, 1em); }

p>img { max-width: 40em; width: 100%; height: auto; }

p, dt, dd, li {
    text-align: justify;
    @media (max-width: 28em) { text-align: left; }
    padding: 0;
    margin: 0;
}

p, table, div, ul, ol, dl, hr {
    max-width: 50em;
    padding: 0;
    margin: 0;
}

p, table, body>div, h5 { margin: 1em 0; }
blockquote {
    @media (max-width: 28em) { margin: 1em 0.5em; }
    margin: 1em;
}

li { margin: 0 0 0 2em; }
dd { margin: 0 0 0 1em; }

hr {
    clear: both;
    margin: 0.5em 0;
    border: 0;
    border-top: 1px solid $ruledefaultcolour;
}

kbd {
    font-family: monospace;
    font-size: 0.95em;
    &:before { content: "% "; }
    &>span { white-space: nowrap; }

    blockquote & {
        display: block;
        text-align: left;
        padding-left: 3em;
        text-indent: -3em;
    }
}

.permalink {
    font-size: small;
    color: $annotationcolour;

    a:link, a:visited { color: inherit; }
    @media not screen { visibility: hidden; }
}

// General table styles.
table {
    border: 1px solid $ruledefaultcolour;
    border-collapse: collapse;
    width: 100%;
}

table>* { font-size: 0.9em; }
caption {
    caption-side: top;
    font-weight: bold;
    font-size: 1em;
    text-align: left;
    margin: 0 0 0.5em 0;
}

td, th {
    vertical-align: middle;
    text-align: left;
    padding: 1ex;
    margin: 0;
}

thead>tr, tbody>tr { border: solid $ruledefaultcolour; }
th, thead>tr { border-bottom: 1px solid $rulestrongcolour; }
tbody+tbody { border-bottom: 1px solid $ruledefaultcolour; }
*>table, *>th { border: none; }
thead>tr { border-width: 1px; }
tbody>tr { border-width: 0 1px; }

td + td { box-shadow: -1px 0 $backgroundcolour; }

tbody>tr {
    &:nth-of-type(even) { background-color: $tableshadecolour; }
    &:last-child { border-bottom: solid 1px $ruledefaultcolour; }
}

// Specific table styles
table.cc {
    &>tr>*:first-child, &>*>tr>*:first-child {
        &+* { text-align: center; }
        text-align: center;
    }
}

// CSS rules for stortable clicky table headers: Update the display of
// the /table based on the current state.  Each column has its own set
// nearly-identical rules, only the class names differ.
//
// The clickytables.xsl stylesheet generates two inputs for each column.
// These inputs are siblings of the table and all precede it in document
// order.  Moreover, the inputs for a column are ordered with respect to
// each other, in this sequence:
//
//   input.clicky-NAME     -- checked iff NAME is selected for sorting.
//   input.clicky-NAME-rev -- checked to select reverse order.
//
// One of the column selection inputs will have a 'checked' attribute to
// indicate the default order.  This input is always first in document
// order.  No other inputs begin checked.
//
// The table itself consists of a thead (where the header labels are
// located) and two tbody elements.  The bulk of these rules relate
// to updating the headers to visually indicate the current state.
//
// A sortable column's th element has the .clicky-NAME class, matching
// its corresponding inputs, and has two label children.  The first label
// is visible only when the column is unselected, and is linked to the
// .clicky-NAME input to activate that column.  The second label is visible
// only on the selected column and is linked to the .clicky-NAME-rev input
// to toggle the reverse order.
//
// For the table body, the first tbody contains the default ordering
// and is not styled by these rules (except to hide it when alternate
// orderings are selected).  The second tbody contains rows for all
// alternate orderings, and is revealed by these rules.  When revealed,
// rows with the NAMEfwd or NAMErev class (for the forward and reverse
// orderings, respectively) are shown and other rows are hidden.

$clickynames: name, date, size;
@each $col in $clickynames {
    input.clicky-#{$col} {
        &:checked {
            &~table {
                // Update table header state
                & th.clicky-#{$col} {
                    label~label {
                        display: -moz-inline-box !important;
                        display: inline-block !important;
                    }
                    label { display: none; }
                }

                // Show only appropriate items from the sort body (forward)
                &>tbody+tbody>tr.#{$col}fwd { display: table-row; }
                &>tbody+tbody>tr { display: none; }

                // Unhide sort body
                &>tbody {
                    &+tbody { display: table-row-group !important; }
                    display: none;
                }
            }

            // reverse state for selected sort column
            &~input.clicky-#{$col}-rev {
                &:checked ~ table {
                    // Show only appropriate items from sort body (reversed)
                    &>tbody+tbody>tr.#{$col}rev { display: table-row; }
                    &>tbody+tbody>tr { display: none; }

                    // Unhide sort body
                    &>tbody {
                        &+tbody { display: table-row-group !important; }
                        display: none;
                    }
                }

                // Unhide to allow keyboard navigation to this input
                display: block !important;
            }
        }

        // If default input element is the only one selected, match it to
        // return to default view (overriding the changes above).  It is
        // always the first input element among all the sibling elements.
        // This seems to interoperate better than using the [checked] or
        // :first-of-type selectors.
        @at-root &:first-child, :not(input)+& {
            &:checked~table>tbody {
                &+tbody { display: none !important; }
                display: table-row-group;
            }
        }

        &:focus ~ table th.clicky-#{$col}>label~label>span:first-child {
            border-color: $foregroundcolour;
        }

        // Unhide to allow keyboard navigation
        display: block !important;
        pointer-events: none;
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

    input.clicky-#{$col}-rev {
        &:checked ~ table {
            // Update table header state
            & th.clicky-#{$col} {
                .svg+.svg {
                    display: -moz-inline-box !important;
                    display: inline-block !important;
                }
                .svg { display: none; }
            }
        }

        &:focus ~ table th.clicky-#{$col}>label~label .svg {
            border-color: $foregroundcolour;
        }

        pointer-events: none;
        position: absolute;
        opacity: 0;
        z-index: -2;
    }
}

thead.clicky label {
    white-space: nowrap;
    line-height: 1.5em;
    cursor: pointer;

    &>* {
        display: -moz-inline-box;
        display: inline-block;
        border: 1px dotted transparent;
        vertical-align: middle;
    }

    // Expand the first label a bit so the table (hopefully)
    // does not reshape as columns are selected.
    &:first-child {
        margin-right: 1.75em;
        padding-right: 2px;
    }

    &:active { color: $linkactivecolour; }
    &:first-child:active>span, &~label:active>.svg {
        border-color: $linkactivecolour;
    }

    .svg {
        margin-left: 0.25em;
    }

    .svg, svg, img.svgfallback {
        height: 1.5em;
        width: auto;
    }
    .svg svg { width: 1.5em; }
}

table.filelist {
    &>*>tr>*:first-child {
        &+* { width: 50%; }
        // chrome doesn't like width: 0 for some reason
        width: 0.1px;
    }

    tbody {
        .svg, svg, img.svgfallback {
            height: 1.5em;
            width: auto;
        }

        .svg {
            svg { width: 1.5em; }
            display: inline-block;
        }
    }
}

// Site header rules
#breadcrumbs>*, #sitetitle>* { font-size: 0.8em; }
#breadcrumbs {
    * {
        display: inline;
        list-style-type: none;
        vertical-align: top;
        padding: 0;
        margin: 0;
    }

    li + li:before { content: "/ "; }
}
#sitetitle * {
    display: inline-block;
    float: right;
}

// Site footer rules
#footer, #article-info {
    text-align: center;
    max-width: 44em;
    padding: 0 3em;
    margin: 0;

    p {
        display: inline-block;
        font-size: 0.8em;
        max-width: 100%;
        margin: 0.2em 0;
    }
}

#footer p { color: $annotationcolour; }
#article-info p { font-style: italic; }

.wbr:after { content: "\200b"; }

// "unordered" lists with explicit ordering in content
ul.ordered > {
    li { list-style: none; }
    li>span:first-child, li>*:first-child>span:first-child {
        display: inline-block;
        text-align: right;
        margin-left: -1.8em;
        min-width: 1.8em;
    }
}

@media (max-width: 512px) {
    body { margin: 0.6em; }
    ul ul { margin-left: -1.2em; }
    dd { margin: 0; }
}

@media (max-width: 35em) {
    #sitetitle * { float: none; }
    #footer { padding: 0 1em; }
}