api-cds-search/cmd/ui/css/styles.css

:root {
    --base_length: 35px;
    --base_margin: 15px;
    --radius_large: 12px;
    --shadow: 0px 3px 5px #0003;

    --accent: #78aeed;

    --blue-1: #99c1f1;
    --blue-2: #62a0ea;
    --blue-3: #3584e4;
    --blue-4: #1c71d8;
    --blue-5: #1a5fb4;

    --green-3: #33d17a;
    --green-4: #2ec27e;
    --green-5: #26a269;

    --yellow-4: #f5c211;
    --yellow-5: #e5a50a;

    --default-margin: 8px var(--base_margin) 8px var(--base_margin);
}

@media (prefers-color-scheme: dark) {
    :root {
        --success: var(--green-4);
        --warning: var(--yellow-5);
        --border: #ffffff17;

        --brightness-mixin: #fff;
        --brightness-hover: 110%;
        --brightness-active: 130%;

        --background: #242424;
        --on_background: #fff;

        --card: #363636;
        --on_card: #fff;

        --osd: #000;
        --on_osd: #fff;

        --raised: #4a4a4a;
        --on_raised: #fff;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --success: var(--green-5);
        --warning: var(--yellow-4);

        --border: #0000001f;

        --brightness-mixin: #000;
        --brightness-hover: 90%;
        --brightness-active: 70%;

        --background: #fafafa;
        --on_background: #323232;

        --card: #fff;
        --on_card: #333333;

        --osd: #4c4c4c;
        --on_osd: #fff;

        --raised: #ebebeb;
        --on_raised: #2f2f2f;
    }
}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
    background-color: var(--background);
    color: var(--on_background);
}

.min-w2 {
    min-width: calc(2 * var(--base_length));
}

.min-w3 {
    min-width: calc(3 * var(--base_length));
}

.min-w5 {
    min-width: calc(5 * var(--base_length));
}

.min-w6 {
    min-width: calc(6 * var(--base_length));
}

.min-w8 {
    min-width: calc(8 * var(--base_length));
}

.min-w10 {
    min-width: calc(10 * var(--base_length));
}

.min-w12 {
    min-width: calc(12 * var(--base_length));
}

.min-w14 {
    min-width: calc(14 * var(--base_length));
}

.max-w1 {
    max-width: calc(1 * var(--base_length));
}

.max-w2 {
    max-width: calc(2 * var(--base_length));
}

.max-w3 {
    max-width: calc(3 * var(--base_length));
}

.max-w6 {
    max-width: calc(6 * var(--base_length));
}

.max-w8 {
    max-width: calc(8 * var(--base_length));
}

.max-w10 {
    max-width: calc(10 * var(--base_length));
}

.max-w16 {
    max-width: calc(16 * var(--base_length));
}

.max-w21 {
    max-width: calc(20 * var(--base_length));
}

.max-w24 {
    max-width: calc(24 * var(--base_length));
}

.boxed-list {
    background-color: var(--card);
    color: var(--on_card);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-radius: var(--radius_large);
    min-width: fit-content !important;
    border: 1px;
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.boxed-list > * {
    width: 100%;
    display: inline;
    border: none;
    border-radius: 12px;
}

.boxed-list > * > * {
    align-self: center;
}

.boxed-list > * > .title {
    padding-right: 15px;
    margin-left: 15px;
    margin-right: auto;
    color: var(--on_card);
}

.boxed-list > * > .title > * {
    color: color-mix(in srgb, var(--on_card) 50%, var(--card) 50%);
}

.boxed-list > * > .prefix {
    margin: 0px 0px 0px var(--base_margin);
}

.boxed-list > * > .suffix {
    margin: 0px var(--base_margin) 0px var(--base_margin);
}

.boxed-list > *:not(:last-child):not(.expander),
.boxed-list > .expander:has(> .expander-state:checked),
.boxed-list
    > .expander:not(:has(> .expander-state:checked)):has(
        + .expander-content:not(:last-child)
    ) {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: var(--border);
}

.boxed-list > *:not(:first-child) {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.boxed-list > *:focus {
    z-index: 1;
    outline: solid blue 2px;
}

.boxed-list > * {
    height: 55px;
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-content: center;
    transition: background-color 0.15s;
}

.boxed-list > .active:hover {
    background-color: color-mix(
        in srgb,
        var(--card) 98%,
        var(--brightness-mixin) 2%
    );
}

.boxed-list > .active:active {
    background-color: color-mix(
        in srgb,
        var(--card) 95%,
        var(--brightness-mixin) 5%
    );
}

.boxed-list > * > .prefix {
    float: left;
}

.round {
    border-radius: 5px;
}

.pill {
    border-radius: 1000px;
}

.raised {
    background-color: var(--raised);
    color: var(--on_raised);
}

.flat {
    background-color: inherit;
    color: inherit;
}

.suggested-action {
    background-color: var(--blue-3);
    color: #fff;
}

.success {
    background-color: color-mix(in srgb, currentColor 15%, transparent);
    color: var(--success);
}

.warning {
    background-color: color-mix(in srgb, currentColor 15%, transparent);
    color: var(--warning);
}

input {
    border: none;
}

button {
    height: var(--base_length);
    width: inherit;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition:
        filter 0.15s,
        outline-offset 0.1s ease-in-out,
        outline-color 0.1s ease-in-out;
}

button:hover {
    filter: brightness(var(--brightness-hover));
}

button:active {
    filter: brightness(var(--brightness-active));
}

* {
    outline-offset: 1px;
    outline-style: solid;
    outline-width: 2px;
    outline-color: transparent;
    transition:
        outline-offset 0.1s ease-in-out,
        outline-color 0.1s ease-in-out;
}

*:focus-visible {
    outline-offset: -1px;
    outline-color: color-mix(in srgb, var(--accent) 50%, transparent);
    z-index: 1;
}

.adw-radio input[type="radio"] {
    appearance: none;
    height: calc(var(--base_length) * 0.6);
    width: calc(var(--base_length) * 0.6);
    border-radius: 50%;
    border: 2px var(--raised) solid;
    transition: box-shadow 0.3s ease;
}

.adw-radio input[type="radio"]:checked {
    border: 2px var(--blue-3) solid;
    background-color: var(--blue-3);
}

.adw-radio input[type="radio"]:before {
    content: "";
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}

.adw-radio input[type="radio"]:checked:before {
    background: #fff;
}

.card {
    overflow: hidden;
    margin: var(--base_margin);
    border-radius: var(--radius_large);
    border: 1px solid var(--border);
    color: var(--on_card);
    background-color: var(--card);
    box-shadow: var(--shadow);
    margin: var(--base_length);
}

.navigation {
    min-width: fit-content;
    max-height: calc(var(--base_length) * 1.5);
    width: 80%;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background-color: var(--background);
    color: var(--on_background);
    border-radius: var(--radius_large);
    display: inline-flex;
}

.navigation > * {
    margin: 10px;
    max-height: 32px;
    align-self: center;
}

.tag {
    height: var(--base_length);
    text-align: center;
    align-content: center;
    font-weight: bold;
    font-size: 12px;
}

.label {
    margin: var(--default-margin);
    font-size: var(--base_margin);
}

.heading {
    font-weight: bold;
    font-size: var(--base_margin);
}

.title-1 {
    font-size: x-large;
    font-weight: bold;
}

.expander-state {
    position: relative;
    width: 0%;
    height: 0%;
    margin: 0%;
    visibility: hidden;
}

.boxed-list > .expander {
    border-bottom-color: transparent !important;
    transition: border-bottom 0.15s steps(1, end);
}

.expander:has(> .expander-state:checked) {
    border-bottom: 1px solid var(--border) !important;
    transition: border-bottom 0.15s steps(1, start);
}

.expander-content {
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 0;
    transition: max-height 0.15s ease-in-out;
    box-sizing: border-box;
    height: auto;
    display: block;
}
.expander:has(> .expander-state:checked) + .expander-content {
    max-height: 500px;
}

.container-center {
    display: inline-flex;
    justify-content: center;
    min-width: 100%;
}

table {
    margin: var(--default-margin);
    width: 100%;
}

th {
    color: color-mix(in srgb, var(--on_card) 50%, var(--card) 50%);
    font-size: var(--base_margin);
}

.table-field-right {
    text-align: right;
}

.table-field-left {
    text-align: left;
}

.monospaced {
    font-family: monospace;
    font-size: var(--base_margin);
}

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

.placeholder-image {
    color: color-mix(in srgb, currentColor 60%, transparent);
    width: 10em;
    height: 10em;
    mask-position: center;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-size: 100%;
    margin: var(--base_margin);
}

.placeholder-image.loupe {
    mask-image: url("/ui/svg/loupe.svg");
}

.linked-horizontal > *:not(:first-child) {
    margin-left: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
.linked-horizontal > *:not(:last-child) {
    margin-right: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

input {
    color: var(--on_background);
    background-color: color-mix(in srgb, currentColor 10%, transparent);
    min-height: var(--base_length);
    padding-left: var(--base_margin);
    margin: var(--default-margin);
    font-size: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
}

button {
    margin: var(--default-margin);
    position: relative;
}