gitea-custom/templates/custom/header.tmpl

<style>
    :root {
        --body-bg-color: #2E2E2E;
        --accent-bg-color: #d4d3d3;
        --button-accent-color: #3d3d3d;
        --selected-bg-color: #2E2E2E;
        --hover-bg-color: #555555;
        --card-border-radius: 0;
        --button-border-radius: 4px;
        --main-font-weight: 500;
        --cards-length: 80vw;

        --fonts-proportional: -apple-system,"Segoe UI",system-ui,"Roboto","Helvetica Neue","Arial";
        --fonts-monospace: "SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace,var(--fonts-emoji);
        --fonts-emoji: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla";
        --border-radius: var(--card-border-radius);
        --opacity-disabled: 1;
        --color-primary: #2E2E2E;
        --color-primary-dark-1: #3f3f3f;
        --color-primary-dark-2: #2E2E2E;
        --color-primary-dark-3: #202020;
        --color-primary-dark-4: #131313;
        --color-primary-dark-5: #0e0e0e;
        --color-primary-dark-6: #0c1a28;
        --color-primary-dark-7: #04080c;
        --color-primary-light-1: #2e2e2e;
        --color-primary-light-2: #3f3f3f;
        --color-primary-light-3: #4e4e4e;
        --color-primary-light-4: #626262;
        --color-primary-light-5: #777777;
        --color-primary-light-6: #a7a7a7;
        --color-primary-light-7: #f4f8fb;
        --color-primary-alpha-10: #2E2E2E;
        --color-primary-alpha-20: #2E2E2E;
        --color-primary-alpha-30: #2E2E2E;
        --color-primary-alpha-40: #2E2E2E;
        --color-primary-alpha-50: #2E2E2E;
        --color-primary-alpha-60: #2E2E2E;
        --color-primary-alpha-70: #2E2E2E;
        --color-primary-alpha-80: #2E2E2E;
        --color-primary-alpha-90: #2E2E2E;
        --color-secondary: #d4d3d3;
        --color-secondary-dark-1: #cecece;
        --color-secondary-dark-2: #bfbfbf;
        --color-secondary-dark-3: #a0a0a0;
        --color-secondary-dark-4: #909090;
        --color-secondary-dark-5: #818181;
        --color-secondary-dark-6: #717171;
        --color-secondary-dark-7: #626262;
        --color-secondary-dark-7: #525252;
        --color-secondary-dark-8: #434343;
        --color-secondary-dark-8: #333333;
        --color-secondary-dark-9: #242424;
        --color-secondary-dark-10: #141414;
        --color-secondary-dark-11: #040404;
        --color-secondary-light-1: #e5e5e5;
        --color-secondary-light-2: #ebebeb;
        --color-secondary-light-3: #f2f2f2;
        --color-secondary-light-4: #f8f8f8;
        --color-secondary-alpha-10: #dedede19;
        --color-secondary-alpha-20: #dedede33;
        --color-secondary-alpha-30: #dedede4b;
        --color-secondary-alpha-40: #dedede66;
        --color-secondary-alpha-50: #dedede80;
        --color-secondary-alpha-60: #dedede99;
        --color-secondary-alpha-70: #dededeb3;
        --color-secondary-alpha-80: #dededecc;
        --color-secondary-alpha-90: #dededee1;
        --color-red: #db2828;
        --color-orange: #f2711c;
        --color-yellow: #fbbd08;
        --color-olive: #b5cc18;
        --color-green: #21ba45;
        --color-teal: #00b5ad;
        --color-blue: #2185d0;
        --color-violet: #6435c9;
        --color-purple: #a333c8;
        --color-pink: #e03997;
        --color-brown: #a5673f;
        --color-grey: #888888;
        --color-black: #1b1c1d;
        --color-gold: #a1882b;
        --color-white: #ffffff;
        --color-diff-removed-word-bg: #fdb8c0;
        --color-diff-added-word-bg: #acf2bd;
        --color-diff-removed-row-bg: #ffeef0;
        --color-diff-added-row-bg: #e6ffed;
        --color-diff-removed-row-border: #f1c0c0;
        --color-diff-added-row-border: #e6ffed;
        --color-diff-inactive: #f2f2f2;
        --color-body: #d4d3d3;
        --color-text-dark: #080808;
        --color-text: #212121;
        --color-text-light: #555555;
        --color-text-light-2: #808080;
        --color-text-light-3: #a0a0a0;
        --color-box-header: #d4d3d3;
        --color-box-body: #d4d3d3;
        --color-footer: #d4d3d3;
        --color-timeline: #ececec;
        --color-input-text: #212121;
        --color-input-background: #ffffff;
        --color-input-border: #dedede;
        --color-input-border-hover: #cecece;
        --color-navbar: #d4d3d3;
        --color-light: #00000004;
        --color-light-border: #0000001d;
        --color-hover: #0000000f;
        --color-active: #00000014;
        --color-menu: #d4d3d3;
        --color-card: #d4d3d3;
        --color-markdown-table-row: #00000008;
        --color-markdown-code-block: #00000010;
        --color-button: #d4d3d3;
        --color-code-bg: #d4d3d3;
        --color-shadow: #00000030;
        --color-secondary-bg: #d4d3d3;
        --color-expand-button: #d4d3d3;
        --color-placeholder-text: #aaa;
        --color-editor-line-highlight: var(--color-primary-light-6);
        --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
        --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
    }

    .ui.table > thead > tr > th {
        background: #d4d3d3;
    }

    body {
        color: #2E2E2E;
        background: var(--body-bg-color);
        font-family: var(--fonts-regular);
        font-weight: var(--main-font-weight);
    }

    br {
        display: block;
        content: "";
        margin-top: 2px;
    }

    .wave-background {
        background-image: url(https://hippoz.xyz/res/wave.svg);
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    .page-content, .card {
        margin: 25px auto;
        padding: 20px;
        background: var(--accent-bg-color);
        border-radius: var(--card-border-radius);

        box-shadow: 2px -2px 38px 1px rgba(0,0,0,0.59);
    }

    .page-content, .card.layout-card {
        width: var(--cards-length);
    }

    .navigation-buttons {
        text-align: right;
    }

    .navigation-branding {
        float: left;
    }
    .navigation-branding-text {
        text-decoration: none;
        display: inline-block;
        padding: 8px;
        font-size: 18px;
        white-space: nowrap;
        margin-left: 10px;
        margin-right: 10px;
    }

    .noselect {
        user-select: none;
    }

    .item, .button, .button-default {
        display: inline-block;
        text-decoration: none;
        font-weight: 500;
        border: none;
        background-color: var(--accent-bg-color);
        border-radius: var(--button-border-radius);
        padding: 8px;
        font-size: 18px;
        white-space: nowrap;
        margin-left: 10px;
        margin-right: 10px;
        color: var(--button-accent-color);
        cursor: pointer;
        outline: none;
    }

    .button-default:hover:not(.button-selected) {
        color: var(--accent-bg-color);
        background-color: var(--hover-bg-color);
    }

    .button-selected, .button.active, .button-default.active {
        color: var(--accent-bg-color);

        background-color: var(--selected-bg-color);
    }

    .input {
        border: none;
        outline: none;
        border-radius: 2px;
        padding: 3px;
        margin: 8px;
    }

    @media screen and (max-width: 850px) {
        .page-content, .card.layout-card {
            width: 90vw;
        }
    }
</style>