@import "global.less";
@import "page_interfaces.less";

/* ------------------------------------------------------------------------ */
/* Common color definitions
 * Where a particular color family has multiple shades available, a
 * suffix indicates relative contrast as compared with the default
 * @page-background color.
 * All of the color names defined in this file are the default colors
 * for themes with a white page-background with black page-text, but
 * for themes that have other than a white page-background with black
 * page-text, the colors can be overridden in that theme's .less file
 */

/* Shades based on @page-background. Various contrast levels, commonly
 * used for table rows or other containers that should stand out from
 * the page background
 */
@table-cell-base-highc: #cccccc;
@table-cell-base-mediumc: #dddddd;
@table-cell-base-lowc: #eeeeee;

/* Background colors with various meanings, some needing two different
 * contrast levels
 */
@table-cell-ok-highc: #88ff88;     // high contrast, green family
@table-cell-ok-lowc: #ccffcc;      // low contrast, green family
@table-cell-alert: #ffff66;        // yellow family
@table-cell-not-ok-highc: #ff8888; // high contrast, red family
@table-cell-not-ok-lowc: #ffcccc;  // low contrast, red family
@table-cell-pending: #ffcc66;      // orange family

/* Special text colors that have a particular meaning that are not
 * related to the theme colors but nonetheless may need to be
 * adjusted depending on the theme. Also, needed variation on
 * theme default page-text color
 */
@text-error: red;            // red family
@text-alert: #ff6600;        // orange family
@text-warning: blue;         // blue family
@text-ok: green;             // green family
@text-base-highc: #232323;   // high contrast theme page-text color
@text-base-mediumc: #666666; // medium contrast theme page-text color
@text-base-lowc: #9a9a9a;    // low contrast theme page-text color

@rss-icon: #f26522;          // RSS Icon

/* Border colors. Based on the basic theme background and text
 * colors, various levels of contrast. For themes with white
 * page-background and black page-text, the default border color
 * is black. Define that, and work from there for the lower-contrast
 * border colors. It needn't be based on the page-text color,
 * but for the original three themes, it is.
 */

@border-color-base: @page-text;
@border-color-base-highc: #6f6f6f;
@border-color-base-mediumc: #999999;
@border-color-base-lowc: #d3d3d3;    // lightgrey

@graph-series-colors: #1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd, #8c564b, #e377c2, #7f7f7f, #bcbd22, #17becf;
@graph-normal-series: #bbbbbb;
@graph-above-goal: #ff484f;

/* ------------------------------------------------------------------------ */
/* mixins with color */

.solid-border(@color: @border-color-base) {
    border: thin solid @color;
}

.solid-border-bottom(@color: @border-color-base) {
    border-bottom: thin solid @color;
}

/* standalone classes that can be used as mixins, but that should not
 * be given parameters, as they can't be used as classes in the code
 * directly if they have parameters that the lessc compiler has to
 * sort out
 */

.default-border {
    .solid-border;
}

.default-border-bottom {
    .solid-border-bottom;
}

.text-link-disabled {
    color: @text-base-mediumc;
}

.sidebar-color {
    background-color: @sidebar-background;
}

.sans-serif {
    font-family: @sans-serif-font;
}

.button {
    /*
     * We can't use appearance: button here because Chrome has deprecated it:
     * https://developers.google.com/web/updates/2019/12/chrome-80-deps-rems
     * so we make a "button like object" that won't really resemble the other
     * buttons rendered, but still looks like a button.
     */
    border-radius: 3px;
    cursor: default;
    .sans-serif;
    .solid-border;
}

span.button {
    font-size: 0.8em;
    padding: 1px 4px;
}

.icon_button {
    font-size: 60%;
    border: none;
    background: none;
    cursor: pointer;
    color: @link-color;
}

.icon_button:hover {
    background-color: @table-cell-base-lowc;
}

.lean_button {
    text-decoration-line: underline;
    font: initial;
    border: none;
    background: none;
    cursor: pointer;
    color: @link-color;
}

/* ------------------------------------------------------------------------ */
/* Global */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: @page-background;
    color: @page-text;
    a:link {
        color: @link-color;
    }
    a:visited {
        color: @visited-color;
    }
    a:active {
        color: @active-color;
    }
}

img {
    border: 0;
}

table {
    border-collapse: collapse;
    th {
        .bold;
    }
    th.label {
        .left-align;
    }
    td, th {
        padding: 0.1em 0.2em;
    }
}

/* ------------------------------------------------------------------------ */
/* HTML5 hacks */

section, footer, aside, main, article, figure {
    display: block;
}

/* ------------------------------------------------------------------------ */
/* Headings */

h1, h2, h3, h4, h5, h6 {
    color: @heading-color;
    font-family: 'EB Garamond', serif;
    margin: 0.5em auto;
}

h1 {
    font-size: 2.2em;
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.3em;
}

h5 {
    font-size: 1.2em;
}

h6 {
    font-size: 1em;
}

/* ------------------------------------------------------------------------ */
/* Header */

header, #header {
    .full-width;
    height: 5em;
    padding: 0;
    border: 0;
    display: table;
    background-color: @header-background;
    color: @header-text;
    #logo, #logo-right {
        display: table-cell;
        .middle-align;
    }
    #logo {
        height: 75px;
        margin: 0.25em 0.5em;
        img {
            height: 100%;
            margin: 0.25em 0.5em;
        }
    }
    #titles-preserved {
        .center-align;
        font-size: 0.9em;
        #x-preserved {
            .bold;
            .sans-serif;
        }
    }
    #icon-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .icon-menu-item {
        position: relative;
        margin-right: 1.5em;
        .center-align;
        .sans-serif;
        font-size: 0.7em;
        color: @navbar-background;
        .unicolor-link(@navbar-background);
        a {
            text-decoration: none;
        }
        .icon-menu-item-name {
            font-size: 0.9em;
            color: @heading-color;
            .unicolor-link(@heading-color);
        }
        .inbox-badge {
          background-color: @text-error;
          border-radius: 2px;
          color: @page-background;

          padding: 1px 3px;
          font-size: 0.9em;

          position: absolute;
          top: -3px;
          right: -3px;
        }
    }
    #search-menu {
        text-align: right;
        padding-right: 1em;
        font-size: 1.2em;
        color: @navbar-background;
        .unicolor-link(@navbar-background);
    }
    #search-menu-input {
        width: 80%;
        font-size: 1em;
        border-radius: 8px;
        border: solid thin @border-color-base-lowc;
    }
}

/* ------------------------------------------------------------------------ */
/* Navbar */

nav, #navbar-outer {
    .full-width;
    display: table;
}

#navbar {
    height: 2.2em;
    margin: 0;
    border: 0;
    font-size: 0.75em;
    display: table-row;
    background-color: @navbar-background;
    .sans-serif;
    .unicolor-link(@navbar-text);
    span.currentpage {
        .bold;
    }
    label, span.text, span.currentpage {
        color: @navbar-text;
    }
    #navbar-left {
        float: left;
        padding: 3px;
        margin: 2px;
        display: table-cell;
    }
    #navbar-right, #navbar-login {
        .right-align;
        float: right;
        display: table-cell;
    }
    #navbar-right {
        margin: 2px;
        padding: 3px;
    }
    #navbar-login {
        margin: 3px;
    }
    form {
        margin: 0;
        display: inline;
        input {
           .sans-serif;
            font-size: 11px;
        }
        div {
            display: inline;
        }
    }
}

.menu {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: @navbar-text;
    text-align: center;
    min-width: 4em;
}

.menu-selector {
    display: inline;
}

.menu-icon {
    transition-duration: 0.15s;
}

.menu-contents {
    // initially these are invisible & transparent
    transition: all 0.15s ease-in-out;
    position: absolute;
    z-index: 1;
    .solid-border();
    color: @header-text;
    background-color: @navbar-background;
    text-align: left;
    padding: 0.5em;
    margin-top: 0.4em;
    .menu-item {
        margin: 0.3em;
    }
}

#my-activities-string {
    display: inline;
    white-space: nowrap;
}
#my-activities-menu {
    display: none;
    white-space: nowrap;
}


/* ------------------------------------------------------------------------ */
/* Alert & Test bar */

#alertbar-outer, #testbar-outer {
    #navbar-outer;
}

#alertbar, #testbar {
    #navbar;
    p {
        .bold;
        .center-align;
        .middle-align;
        display: table-cell;
    }
}

#alertbar, #alertbar-outer {
    .sans-serif;
    background-color: @table-cell-alert;
    color: @page-text;
    .unicolor-link(@text-base-highc);
}

#testbar, #testbar-outer {
    .sans-serif;
    background-color: @page-background;
    background: repeating-linear-gradient(
        to right,
        @table-cell-alert,
        @page-background 24%,
        @page-background 75%,
        @table-cell-alert 100%,
    );
    color: @page-text;
    .solid-border-bottom();
    .unicolor-link(@text-base-highc);
}

/* ------------------------------------------------------------------------ */
/* Statsbar */

#sidebar, #statsbar {
    .sans-serif;
    background-color: @sidebar-background;
    color: @sidebar-text;
}

/* ------------------------------------------------------------------------ */
/* Footer */

footer, #footer {
    .full-width;
    height: 2em;
    .really-small;
    .center-align;
    .middle-align;
    background-color: @footer-background;
    color: @footer-text;
    .sans-serif;
    .unicolor-link(@footer-text);
    p {
        margin: 0px;
        padding: 0.3em;
    }
    small {
        .really-small;
    }
}

/* ------------------------------------------------------------------------ */
/* Disclosure boxes with optional info */

details {
    border: 1px solid @border-color-base-mediumc;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
}

summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

details[open] {
    padding: 0.5em;
}

details[open] summary {
    border-bottom: 1px solid @border-color-base-mediumc;
    margin-bottom: 0.5em;
}

/* ------------------------------------------------------------------------ */
/* Content layout */

#page-container {
    .no-border;
    .full-width;
    display: table;
    background-color: @sidebar-background;
}

#page-body-container {
    display: table-row;
}

#content-container {
    .left-align;
    .top-align;
    .full-width;
    padding: 0 0.5em 1em 0.5em;
    display: table-cell;
    background-color: @page-background;
    color: @page-text;
}

#rounded-corner {
    background-color: @page-background;
}

.quick-links {
    padding: 0;
    li {
        display: inline;
        &::before {
            content: " | ";
        }

        &:first-child::before {
            content: "";
        }
    }
}

/* ------------------------------------------------------------------------ */
/* Graphs */
.graph-tooltip {
  background-color: @page-background;
  border: thin solid @border-color-base;
  border-width: 2px;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
}

.graph-element {
  color: @page-text;
}

.graph-legend {
  fill: @page-background;
  outline: 2px solid @border-color-base;
  border-radius: 5px;
}

.graph-background {
  fill: @page-background;
}

.graph-download-button {
    margin: 5px;
}

.graph-divider {
  margin: 1.25em 0 1.25em 0;
}

.graph-normal-series {
  fill: @graph-normal-series;
}
.graph-above-goal {
  fill: @graph-above-goal;
}

.graph-series-loop (@i) when (@i > 0) {
  .graph-series-fill-@{i} {
    fill: extract(@graph-series-colors, @i);
  }

  .graph-series-stroke-@{i} {
    stroke: extract(@graph-series-colors, @i);
  }

  .graph-series-loop(@i - 1);
}

.graph-series-loop(10);

/*
 If the screen is "narrow enough", collapse the activities into a menu.
 > 900px allows *all* activities to be displayed for English, French, and German.
*/
@media only screen and (max-width: 900px) {
    #my-activities-string {
        display: none;
    }
    #my-activities-menu {
        display: inline;
    }
}

/*
 If the screen is "narrow enough" we move the statsbar below the page
 content using a flex layout. We don't use a flex layout for the
 regular content because doing so cuts off the project listings on
 the round pages. Until we are able to make full use of the window
 for the round pages (death to the statsbar??) we need to keep a
 table-style layout to force the statsbar off the screen when the
 window gets too narrow
*/
@media only screen and (max-width: 768px) {
    #header {
        p {
            margin: 0.25em 0.5em;
        }
    }
    #page-body-container {
        display: flex;
        display: -ms-flexbox; /* for IE 11 */
        flex-direction: column;
    }

    #page-container, #content-container {
        display: block;
    }
}

/* For even smaller screens, change the header and footer */
@media only screen and (max-width: 600px) {
    #header {
        #logo {
            max-width: 95%;
            img {
                max-width: 95%;
            }
        }
        #logo-right {
            display: table-row;
        }
        #titles-preserved {
            .right-align;
            font-size: 0.8em;
            padding-bottom: 5px;
        }
        .icon-menu-item {
            font-size: 0.6em;
            padding-bottom: 5px;
            .icon-menu-item-name {
                display: none;
            }
        }
        #search-menu {
            font-size: 1em;
        }
    }

    #buildtime {
        display: none;
    }
}

/* ------------------------------------------------------------------------ */
/* Section dividers */

hr.divider {
    .center-align;
    width: 75%;
}

/* ------------------------------------------------------------------------ */
/* Star texts */

@starshadow: black;

.star-text-summary {
    width: 33%;
    float: left;
    p {
        padding-right: 0.5em;
    }
    .star-header {
        .center-align;
    }
}

@star-gold: #ffd700;
@star-silver: silver;
@star-bronze: #cd7f32;

.star-metal(@color) {
    font-size: 3em;
    color: @color;
    text-align: center;
    text-shadow: 3px 2px 5px @starshadow;
}

.star-gold {
    .star-metal(@star-gold);
}

.star-silver {
    .star-metal(@star-silver);
}

.star-bronze {
    .star-metal(@star-bronze);
}

.rss-icon {
    color: @rss-icon;
}

@media only screen and (max-width: 481px) {
    .star-text-summary {
        width: 100%;
        padding-bottom: 1em;
    }
    .star-header, .star-description {
        display: table-cell;
    }
    .star-header {
        width: 10em;
        padding-right: 1em;
    }
}

/* ------------------------------------------------------------------------ */
/* News items */

@news-border: @border-color-base-lowc;
@news-normal: @page-text;
@news-announce-high: maroon;
@news-announce-medium: darkorange;
@news-announce-low: darkblue;
@news-celebrate: green;
@news-maintain: red;

div.news {
    margin: 1em 0;
}
div.newsupdated {
    // margin-top is a _horrible_ hack to force this lower and closer
    // to the baseline of newsheader
    margin-top: 0.7em;
    float: right;
}
div.newsitem {
    border-radius: 5px;
    padding: 0.75em;
    margin-top: 1em;
    overflow: auto;
    border-left: thick solid @news-border;
    border-bottom: thin solid @news-border;
    p {
        margin: 0 0.5em 0.5em 0;
    }
    img {
        max-width: 100%;
    }
    iframe {
        border: 0;
    }
}

.news-header {
    font-size: 1.25em;
    font-weight: bold;
    padding-bottom: 0.5em;
}

.news-format(@color: @news-normal) {
    color: @color;
}

.news-normal {
    .news-format(@news-normal);
}

.news-announcement1 {
    .news-format(@news-announce-high);
}

.news-announcement2 {
    .news-format(@news-announce-medium);
}

.news-announcement3 {
    .news-format(@news-announce-low);
}

.news-celebration {
    .news-format(@news-celebrate);
}

.news-maintenance {
    .news-format(@news-maintain);
}

/* ------------------------------------------------------------------------ */
/* Editing news items */

table.newsedit {
    width: 100%;
    border-collapse: collapse;
        tr td {
            .top-align;
    }
    tbody.padding tr td.commands,
    tbody.padding tr td.items {
        padding-bottom: 1em;
        padding-top: 0.5em;
    }
    td.commands {
        width: 10%;
        padding-right: 2em;
        padding-left: 1em;
        white-space: nowrap;
    }
    td.items {
        width: 90%;
    }
}

/* ------------------------------------------------------------------------ */
/* Attention-getting structures */

div.callout {
    .solid-border;
    background-color: @table-cell-base-lowc;
    margin-right: 2em;
    margin-left: 2em;
    padding: 1em;
    p {
        margin-bottom: 0;
    }
}

div.calloutheader {
    .bold;
}

.error, .warning {
    .bold;
}

.error, .test_warning {
    color: @text-error;
}

.warning {
    color: @text-warning;
}

@highlight: @table-cell-alert;

.highlight {
    background-color: @highlight;
    color: @page-text;
}

kbd {
    font-family: DejaVu Sans Mono, monospace;
    background-color: @table-cell-base-mediumc;
    font-size: 85%;
    border-radius: 6px;
    padding: 0 0.3em;
}

/* ------------------------------------------------------------------------ */
/* Round and Pool filter table */

#filter_form {
    padding: 0 0.5em 0.5em 0.5em;
}

table.filter {
    width: 100%;
    td {
        padding: .25em 0.25em 0em .25em;
        .top-align;
        white-space: nowrap;
        select {
            margin: .1em auto;
            width: 100%;
        }
    }
}

/* ------------------------------------------------------------------------ */
/* Flex row & entity -- useful when needing a dynamic list of things */

div.flex_row {
    display: flex;
    flex-flow: row wrap;
    margin: 0.25em;
    div.entry {
        padding: 0 0.25em;
    }
}


/* ------------------------------------------------------------------------ */
/* Random Rules */
/* Because the guidelines are in the wiki, we have to jump through
   some hoops to get any tables used there to be displayed properly
   if they are included in a random rule. A random_rule class has been
   created in https://www.pgdp.net/wiki/MediaWiki:Common.css to allow
   a class to be added to the tables that are in a random rule. The
   CSS defined here in layout.less is not used directly anywhere in
   the code, but only used to theme random rules imported from the
   pgdp.net wiki.
 */

@random-rule-header: cornsilk;

table.random_rule {
    .default-border();
    border-collapse: collapse;
    tr td {
        .default-border();
        padding: 0.25em 0.5em;
    }
    tr th {
        .default-border();
        padding: 0.25em 0.5em;
        .top-align;
        .left-align;
        background-color: @random-rule-header;
    }
}

/* ------------------------------------------------------------------------ */
/* Registration table */

table.register {
    width: auto;
    border-collapse: separate;
    .solid-border;
    th, td {
        padding: 3px;
    }
    th {
        .right-align;
        .bold;
        background-color: @header-background;
    }
    td {
        .left-align;
        input[type=text],
        input[type=password],
        input[type=select] {
            width: 98%;
        }
    }
    td.bar {
        .center-align;
        background-color: @navbar-background;
    }
}

/* ------------------------------------------------------------------------ */
/* Site Progress Snapshot table on Activity Hub */

table.snapshottable {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    td, th {
        padding: 2px;
        margin: 0;
        .center-align;
        .solid-border;
    }
    th {
        font-weight: normal;
        background-color: @header-background;
    }
    th.activity-icon-header {
        border: none;
        background-color: @page-background;
    }
    td.stage-column {
        .left-align;
        .middle-align;
        padding: 5px;
    }
    td.nocell {
        border: none;
    }
}

.stage-access(@color: @page-text) {
    padding-left: 5px;
    float: right;
    display: inline-block;
    min-width: 1.5em;
    .middle-align;
    .center-align;
    font-size: 1.1em;
    font-weight: bold;
    color: @color;
    a:link,
    a:visited,
    a:active {
        color: @color;
        text-decoration: none;
    }
}

@access-yes: green;
@access-no: red;
@access-eligible: blue;

.access-yes {
    .stage-access(@access-yes);
}

.access-no {
    .stage-access(@access-no);
}

.access-eligible {
    .stage-access(@access-eligible);
}

@media only screen and (max-width: 768px) {
    .stage-name,
    .stage-access,
    .pages-goal,
    .pages-completed {
        display: none;
    }
}

/* ------------------------------------------------------------------------ */
/* Progress bar */

@progress-high: lightgreen;
@progress-medium: orange;
@progress-low: red;

div.progressbar {
    font-size: 0.5em;
    .solid-border;
}

div.goal-on-target {
    background-color: @progress-high;
}

div.goal-maybe {
    background-color: @progress-medium;
}

div.goal-unlikely {
    background-color: @progress-low;
}

/* ------------------------------------------------------------------------ */
/* Statistics table */

table.stats {
    /* so that right aligned and left aligned columns don't clash */
    td, th {
        padding-right: 2em;
    }
}

/* ------------------------------------------------------------------------ */
/* Translation table */

table.translation {
    td, th {
        padding-right: 1em;
    }
}

/* ------------------------------------------------------------------------ */
/* Available Project Listings */

table.availprojectlisting {
    width: 100%;
    border-collapse: collapse;
    .solid-border;
    tr {
        td, th {
            padding-left: 0.5em;
            padding-right: 0.5em;
        }
        th {
            .bold;
            .left-align;
            .solid-border-bottom();
            img {
                border: 0;
            }
        }
        td {
            .solid-border-bottom(@border-color-base-mediumc);
        }
    }
    tr:nth-child(odd) {
        background-color: @table-cell-base-mediumc;
    }
}

/* Default stage colors, which can be overridden by the themes
   Stage colors are independent of any of a theme's colors. Though
   they may be overridden, color variable names are not used    */
@P1-even: #ffe4b5;
@P1-odd: cornsilk;
@P2-even: #ffe4b5;
@P2-odd: cornsilk;
@P3-even: plum;
@P3-odd: thistle;
@F1-even: #ffe4b5;
@F1-odd: cornsilk;
@F2-even: plum;
@F2-odd: thistle;
@PP-even: #cccccc;
@PP-odd: #ffffff;
@PPV-even: #99ffff;
@PPV-odd: #eaf7f7;
@SR-even: #ccffcc;
@SR-odd: #ccff99;

@stages: P1 P2 P3 F1 F2 PP PPV SR;

each(@stages, {
    @even-color: "@{value}-even";
    @odd-color: "@{value}-odd";
    table.stage_@{value} {
        tr:nth-child(even) {
            background-color: @@even-color;
        }
        tr:nth-child(odd) {
            background-color: @@odd-color;
        }
    }
})

/* ------------------------------------------------------------------------ */
/* FAQ */

table.faqtable {
    width: 100%;
    border: 0;
    padding: 1em;
    tr {
        td.column {
            .top-align;
            width: 50%;
            padding-right: 1em;
        }
    }
}

/* ------------------------------------------------------------------------ */
/* User Preferences */

/*
This stylesheet originated from http://www.alistapart.com/articles/slidingdoors/
Quote http://www.alistapart.com/copyright/:
*/
/*
 *  A List Apart gives away CSS styles, JavaScript, PHP and Perl scripts,
 *  XHTML markup techniques, and other bits of "source code" for the use
 *  of its readers. You may freely copy, paste, and modify any of this
 *  code for use on your own web projects large or small, commercial or
 *  non-commercial. You need not ask permission to do so. You need not
 *  credit ALA or its authors. It is our gift to you.
 *
 *  ...
 *
 *  Images, including those used in tutorials (example), cannot be
 *  reproduced outside this magazine, except by the author or designer
 *  who created them.
 *
 *  You may adapt elements of our CSS in your own projects, but the
 *  unique combination of images, colors, sizes, typography, and
 *  positioning ("the design") is copyright 2003 A List Apart Magazine
 *  and Happy Cog Studios and may not be reproduced.
 */

table.preferences {
    border-collapse: collapse;
    td, th {
        .solid-border;
    }
    th.longlabel {
        .center-align;
    }
    th.label, th.longlabel {
        background-color: @header-background;
        color: @header-text;
    }
}

@background-tab-disabled: desaturate(@header-background, 50%);
@text-tab-disabled: @text-base-mediumc;

.tabs {
    float: left;
    width: 90%;
    .solid-border-bottom(@border-color-base-mediumc);
    ul {
        margin: 0;
        padding: 0 20px 0 10px;
        list-style: none;
    }
    li {
        float: left;
        margin: 0;
        padding: 0 0 0 4px;
        border-radius: 5px 5px 0 0;
        margin-bottom: -2px;
        background-color: @background-tab-disabled;
        .solid-border(@border-color-base-mediumc);
        a {
            color: @text-tab-disabled;
        }
    }
    a {
        float: left;
        display: block;
        padding: 5px 15px 4px 6px;
        text-decoration: none;
        min-width: 8em;
    }
    .current-tab {
        border-bottom: none;
        background-color: @page-background;
        a {
            .bold;
            color: @page-text;
        }
    }
}

/* ------------------------------------------------------------------------ */
/* Themed tables */

table.themed {
    width: 100%;
    border-collapse: collapse;
    .solid-border;
    tr {
        background-color: @header-background;
        color: @header-text;
        th, td {
            padding: 0.1em;
        }
        th {
            background-color: @navbar-background;
            color: @navbar-text;
            a:link, a:visited {
                color: @navbar-text;
            }
        }
    }
}

table.theme_striped {
    tr {
        th, td {
            padding: 0.1em 0.5em 0.1em 0.5em;
        }
    }
    th {
        background-color: @navbar-background;
        color: @navbar-text;
    }
    tr:nth-child(even) {
        background-color: @page-background;
    }
    tr:nth-child(odd) {
        background-color: @sidebar-background;
    }
}

@satisfied: @table-cell-ok-lowc;
@not-satisfied: @table-cell-not-ok-lowc;

table.basic {
    border-collapse: collapse;
    .solid-border;
    th {
        background-color: @table-cell-base-highc;
    }
    td, th {
        .solid-border;
    }
    th.label {
        .left-align;
    }
    td.satisfied {
        .right-align;
        background-color: @satisfied;
    }
    td.not_satisfied {
        .right-align;
        background-color: @not-satisfied;
    }
    textarea {
        width: 100%;
    }
}

table.striped {
    th {
        background-color: @table-cell-base-highc;
    }
    tr:nth-child(odd) {
        td {
            background-color: @table-cell-base-mediumc;
        }
    }
}

table.no-border {
    td, th {
        border: none;
    }
}

/* ------------------------------------------------------------------------ */
/* PPV Report */

p.inline_input {
    .no-margin;
    .no-padding;
}
p.hanging_indent {
    text-indent: -1.25em;
    margin-left: 1.25em;
}
p.hanging_indent_long {
    text-indent: -3em;
    margin-left: 3em;
}
p.form_problem {
    margin-bottom: 0;
    .error();
}
p.form_problem:before {
    content: '↓'; /* down-arrow */
}
table.ppv_reportcard {
    width: 95%;
    .solid-border;
    th {
        .bold;
        .solid-border;
    }
    th.major_section {
        background-color: @header-background;
    }
    th.heading {
        background-color: @table-cell-base-highc;
    }
    td {
        .solid-border;
    }
}

/* ------------------------------------------------------------------------ */
/* Image Sources */

@enabled: @table-cell-ok-highc;
@disabled: @table-cell-base-mediumc;
@pending: @table-cell-pending;

table.image_source {
    border-collapse: collapse;
    width: 90%;
    margin: auto;
    tr.e {
        background-color: @table-cell-base-lowc;
    }
    tr.o {
        background-color: @table-cell-base-mediumc;
    }
    th {
        .center-align;
        padding: 5px;
        background-color: @table-cell-base-lowc;
        .solid-border(@border-color-base-mediumc);
    }
    td {
        padding: 5px;
        .solid-border(@border-color-base-mediumc);
        a.sourcelink {
            font-size: 90%;
            margin: 10px 0px 3px 25px;
        }
    }
    th.label {
        .left-align;
    }
    td.enabled {
        .center-align;
        background-color: @enabled;
    }
    td.disabled {
        .center-align;
        background-color: @disabled;
    }
    td.pending {
        .center-align;
        background-color: @pending;
    }
}

/* ------------------------------------------------------------------------ */
/* Page Detail */

@inprog: @table-cell-pending;
@done-current: @table-cell-ok-highc;
@done-previous: @table-cell-not-ok-highc;

table.pagedetail {
    width: auto;
    th, td {
        .center-align;
        font-weight: normal;
        .solid-border;
    }
}

.in_progress {
    background-color: @inprog;
}
.done_current {
    background-color: @done-current;
}
.done_previous {
    background-color: @done-previous;
}

/* ------------------------------------------------------------------------ */
/* Remote File Manager */

table.dirlist {
    width: 100%;
    .actions {
        text-align: center!important;
    }
    caption {
        .left-align;
        font-size: 111%;
        margin-top: 0.5em;
        padding: 5px;
    }
}

div.remote-file-mgr-info {
    background-color: @table-cell-ok-highc;
    color: @page-text;
    .default-border;
    padding: .5em;
    margin: 0.8em 0;
}

/* ------------------------------------------------------------------------ */
/* Project Load (add_files.php) */

table#addfiles {
    td.load-add {
        background-color: @table-cell-ok-lowc;
    }

    td.load-replace {
        background-color: @table-cell-pending;
    }

    td.load-error {
        background-color: @table-cell-not-ok-lowc;
    }
}

/* ------------------------------------------------------------------------ */
/* Quizzes */

.quiz-passed {
    background-color: @table-cell-ok-lowc;
}

.quiz-not-passed {
    background-color: @table-cell-not-ok-lowc;
}

.quiz-date-ok {
    background-color: @table-cell-ok-lowc;
}

.quiz-date-not-ok {
    background-color: @table-cell-not-ok-lowc;
}

.quiz-ok {
    background-color: @table-cell-ok-highc;
}

.quiz-not-ok {
    background-color: @table-cell-not-ok-highc;
}

/* ------------------------------------------------------------------------ */
/* Special days tables */

table.list_special_days {
    width: 90%; margin: auto;
    tr.e {
        background-color: @table-cell-base-lowc;
    }
    tr.o {
        background-color: @table-cell-base-mediumc;
    }
    tr.month > * {
        border: none;
        border-bottom: solid 2px @border-color-base;
    }
    td, th {
        padding: 3px;
        .solid-border(@border-color-base-mediumc);
    }
    td.codecell {
        vertical-align: middle;
        text-align: center;
    }
    th.headers {
        padding: 0.5em;
    }
    td.enabled {
        text-align: center;
        background-color: @enabled;
    }
    td.disabled {
        text-align: center;
        background-color: @disabled;
    }
    td.center {
        text-align: center;
    }
    td.right, th.right {
        text-align: right; font-weight: normal;
    }
}

table.show_special_days {
    th {
        background-color: @table-cell-base-lowc;
    }
}

table.edit_special_day {
    width: 90%;
    margin: auto;
    th, td {
        padding: 5px;
        .solid-border;
        background-color: @table-cell-base-lowc;
    }
}

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

/* Container to wrap the search columns */
div.search-columns {
    width: 99%;
    overflow: auto;
    .center-align;
    clear: both;
}

/* This sets everything into one column... */
table.search-column {
    width: 99%;
    /* Set the size of the row label to be consistent */
    tr th {
        width: 8em;
    }
}

/* ... and this says if the screen is >800px, make it two columns. */
@media only screen and (min-width: 800px) {
    table.search-column {
        width: 50%;
        float: left;
        tr th {
            width: auto;
        }
    }
}

/* ------------------------------------------------------------------------ */
/* Search Results drop-down */

.dropdown {
    position: relative;
    display: inline;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 1.5em;
    right: 0;
    padding: 0.3em;
    margin: 0 0 0 -15em;
    z-index: 1;
    background-color: @page-background;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    border-radius: 0.3em;
}

/* button looking like a link */
.dropdown-button {
    border: none;
    padding: 1px;
    background-color: inherit;
    color: @header-text;
    cursor: pointer;
    font-family: initial;
    font-size: initial;
    text-decoration: underline;
}

.dropdown-show {
    display:block;
}

/* ------------------------------------------------------------------------ */
/* Link box */

#linkbox{
    .plain-list;
    .left-align;
    .top-align;
    padding: 0 1em;
    float:right;
    margin: 0.5em auto 0.5em 0.5em;
    .solid-border;
    .sidebar-color;
    h2 {
        .center-align;
        font-size: 1.5em;
    }
    li {
        margin-top: 3px;
    }
}

/* ------------------------------------------------------------------------ */
/* Page compare grid */

.grid-wrapper {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-column-gap: 2em;
    grid-row-gap: 2px;
}

/* ------------------------------------------------------------------------ */
/* Project Page */

li.spaced {
    margin: 1em 0;
}

.thin-heading {
    margin-bottom: 0.2em;
}

.thin-para {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.list-head {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.blurb-box {
    width: 100%;
    max-width: 630px;
    background-color: @table-cell-base-mediumc;
}

.project-comments,
.post-processor-comments,
.sr-instructions {
    background-color: @table-cell-base-highc;
}

#event_subscriptions,
#project_holds {
    th, td {
        padding-right: 1em;
    }
}

.checkbox-cell {
    .center-align;
}

.checkbox-cell-selected {
    .center-align;
    background-color: @table-cell-ok-lowc;
}

.transition-disabled {
    color: @text-base-lowc;
}

/* ------------------------------------------------------------------------ */
/* Review Work */

td.has-diff {
    /* we use !important so this overrides the bg color in striped tables */
    background-color: @table-cell-ok-lowc !important;
}

/* ------------------------------------------------------------------------ */
/* CharSuite Explorer */

.gs-char {
    font-size: 1.5em;
}

.gs-codepoint {
    font-size: 0.7em;
}

/* ------------------------------------------------------------------------ */
/* replace text validator */

.replace_check {
    height: 20em;
    width: 50em;
    .solid-border;
}

/* ------------------------------------------------------------------------ */
/* Completed Project Listings */

.book-title {
    .bold;
}

/* ------------------------------------------------------------------------ */
/* Task Center */

div.task-nav {
    padding: 0.5em 0;
}

div.task-comment-title a.perma {
    color: @text-base-lowc;
    font-size: small;
    text-decoration: none;
}

div.task-comment {
    border-left: thick solid @sidebar-background;
    padding-left: 1em;
    margin-bottom: 1em;
    .task-comment-body {
        margin-left: 1em;
        word-break: break-word;
    }
}

div.task-detail {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

table.task-detail-block {
    .solid-border;
    margin: 0 0.1em;
    width: 50%;
    flex-grow: 1;
    flex-basis: auto;
    tr {
        th, td {
            padding: 0.1em 0.5em 0.1em 0.5em;
            height: 1.5em;
        }
        th {
            background-color: @sidebar-background;
            white-space: nowrap;
        }
        td {
            background-color: @page-background;
            width: 100%;
        }
    }
}

/* For small enough screens, make the two columns as two rows instead. */
@media only screen and (max-width: 768px) {
    div.task-detail {
        flex-direction: column;
    }
    table.task-detail-block {
        margin: 0.1em 0;
        width: 100%;
    }
}

/* ------------------------------------------------------------------------ */
/* Mentoring */
/* Text colors and sizes for the message mentors see on the P2 round page */

p.mentor-recent {
    color: #339933;
    .bold;
    .center-align;
}

p.mentor-older {
    color: #ff6600;
    .large;
    .bold;
    .center-align;
}

p.mentor-oldest {
    color: #ff0000;
    .x-large;
    .bold;
    .center-align;
}

/* ------------------------------------------------------------------------ */
/* Diff styling */
/* Import diff styling from MediaWiki */

@import (inline) "../pinc/3rdparty/mediawiki/mediawiki.diff.styles.css";

/* ------------------------------------------------------------------------ */
