@import url(theme-forgejo-light.css);

:root {
    /* General */
    --color-body: hsl(27 19% 97% / 1); /* Background for modals (and main page but not visible because of texture) */
    --color-active: rgb(238, 231, 227); /* For elements, such as tabs or buttons, that are 'active' */
    --color-footer: rgb(253, 248, 242);

    /* Colours */
    --color-primary: rgb(249, 73, 106); /* Hyperlinks and stuff */

    --color-primary-dark-1: lime;
    --color-primary-dark-2: var(--color-primary-dark-1);
    --color-primary-dark-3: var(--color-primary-dark-1);
    --color-primary-dark-4: var(--color-primary-dark-1);
    --color-primary-dark-5: var(--color-primary-dark-1);
    --color-primary-dark-6: var(--color-primary-dark-1);
    --color-primary-dark-7: var(--color-primary-dark-1);

    --color-primary-light-1: red;
    --color-primary-light-2: var(--color-primary-light-1); /* Used for text on hover w.r.t. label buttons */
    --color-primary-light-3: var(--color-primary-light-1);
    --color-primary-light-4: var(--color-primary-light-1);
    --color-primary-light-5: var(--color-primary-light-1);
    --color-primary-light-6: var(--color-primary-light-1);
    --color-primary-light-7: var(--color-primary-light-1);

    --color-primary-alpha-10: var(--color-primary);
    --color-primary-alpha-20: var(--color-primary);
    --color-primary-alpha-30: var(--color-primary);
    --color-primary-alpha-40: var(--color-primary);
    --color-primary-alpha-50: var(--color-primary);
    --color-primary-alpha-60: var(--color-primary);
    --color-primary-alpha-70: var(--color-primary);
    --color-primary-alpha-80: var(--color-primary);
    --color-primary-alpha-90: var(--color-primary);

    --color-secondary: rgb(220, 215, 215); /* Borders */
    --color-secondary-alpha-60: rgba(23, 23, 23, 0.6); /* Heatmap "no contributions" space */

    /* Buttons */
    --color-button: purple;
    --color-hover: yellow;

    /* Label buttons (e.g. Number side of Unwatch button or Star button on repository) */
    --color-light: rgba(255, 255, 255, 0.05); /* Background on hover */

    /* Boxes (e.g. repo list on homepage) */
    --color-box-header: rgba(255, 255, 255, 0.05); /* "Search code" and latest commit headers in file list on repos */
    --color-box-body: rgba(255, 255, 255, 0.08);

    /* Input boxes (e.g. Search repos... box on homepage) */
    --color-input-background: rgba(0, 0, 0, 0.25);
    --color-input-border: rgba(34, 36, 38, 0.15); /* <-- This is also used on buttons */

    /* Navbar */
    --color-nav-bg: var(--color-footer);
    --color-nav-hover-bg: #202020;
    --color-secondary-nav-bg: rgba(255, 255, 255, 0.02);

    /* Menus and paginators */
    --color-menu: rgb(255, 255, 255);

    /* Labels */
    --color-label-bg: #232323;
    --color-label-hover-bg: var(--color-hover);
    --color-label-text: var(--color-text);

    /* Text colours */
    --color-text: #444; /* All normal text */
    --color-text-light-2: rgb(150, 150, 150); /* Links on side-menus, e.g. any repo > Settings > Units dropdown menu links */
    --color-text-light-1: rgb(200, 200, 200); /* Aforementionled links, on hover */

    /* Tooltips (e.g. hovering over the 'Updated last month' text on a repository list) */
    --color-tooltip-bg: var(--color-label-bg);
    --color-tooltip-text: var(--color-label-text);

    /* Code (stuff like code boxes and line numbers, not the actual scripts themselves) */
    --color-code-bg: white;

    /* Timeline (on issues and PRs) */
    --color-timeline: #222;

    /* Fonts */
    --fonts-regular: Roboto;
    --fonts-proportional: Roboto;
}

/* Background image
body {
    background: url(background.png);
}*/

/* Line numbers in code listings */
.lines-num {
    background: rgba(255, 255, 255, 0.02);
}

/* Lock + avatar button on GPG labels */
.ui .sha.label > .button {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Lighten up names in lists like:
 *    - /explore/repos
 *    - /[username]?tab=repositories
 *    - /[username]?tab=stars
 */
div.flex-list .name {
    color: var(--color-primary-dark-5) !important;
}

/* TIMELINE FIX
 * Timeline items, such as comments, comment forms, and PR merge
 * boxes, are styled as boxes with the --color-box-body variable,
 * which is transparent.
 *
 * The vertical timeline 'strip' passes through these timeline items,
 * and since they're transparent, the strip is visible through the boxes.
 *
 * This fix hard-codes the colours of these timeline items to be
 * opaque, so that the timeline strip appears normally. */
.timeline-item.comment .content .comment-header {
    background: #0e0e0e !important;
}
.timeline-item.comment .content .comment-body {
    background: #151515 !important;
}
.timeline-item.comment .content {
    background: #000;
}

@font-face {
    font-family: Roboto;
    src: url('roboto.ttf');
}