Dnk - Stil på Nettbutikk - Eksempel CSS

Eksempel CSS til bruk i Stil på Nettbutikk for menigheter i Dnk

I nettbutikken kan du endre stilen/utseendet til nettbutikken med CSS kode.
Koden under kan benyttes for enkelt oppsett av utseendet. Kopier hele teksten i boksen under, og lim inn i fanen "stil på nettbutikk" i oppsettet. CSS-koden under har fargekodene som benyttes av Den norske kirke. Fargekoder med mer finner du på Profilmanualen til DnK.
/*
=========================================================
Grunnfarger:
- Her defineres hovedfargene til hele løsningen.
- For å endre profil: juster hex-verdiene.
=========================================================
*/
:root {
    --solidus-hoved: #d90001;      /* Primærfarge (Dnk rød) */
    --solidus-kontrast: #ffffff;   /* Kontrastfarge (hvit) */
    --solidus-sekundar: #ebe7d6;   /* Sekundær farge (lys bakgrunn/Dnk beige) */
    --solidus-mork: #333333;       /* Mørk tekstfarge (Dnk grå*/

    --solidus-text: var(--solidus-mork);
    --solidus-bg: var(--solidus-hoved);
}

/*
=========================================================
Tilstandsfarger for knapper og komponenter:
- Definerer hvordan knappene og elementene ser ut i normal og valgt tilstand.
=========================================================
*/
:root {
    /* Knapper */
    --btn-bg-default: var(--solidus-hoved);
    --btn-text-default: var(--solidus-kontrast);
    --btn-bg-selected: var(--solidus-kontrast);
    --btn-text-selected: var(--solidus-hoved);

    /* Varer */
    --item-bg-default: var(--solidus-kontrast);
    --item-text-default: var(--solidus-hoved);
    --item-bg-selected: var(--solidus-hoved);
    --item-text-selected: var(--solidus-kontrast);

    /* Beløpsknapper */
    --amount-bg-default: var(--solidus-kontrast);
    --amount-text-default: var(--solidus-hoved);
    --amount-bg-selected: var(--solidus-hoved);
    --amount-text-selected: var(--solidus-kontrast);
}

/*
=========================================================
Grunnleggende tekst og bakgrunn
=========================================================
*/
body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--solidus-text);
    background-color: var(--solidus-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a { color: var(--solidus-hoved); }
h1, .solidusOrderItemHeader, .solidusOrderItemHeader2, p {
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight);
    font-style: normal;
}

/* Etiketter for skjemafelt */
.form-horizontal .solidusLabelLeft, .form-horizontal .solidusLabelRight {
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight);
    font-style: normal;
    font-size: 1em;
    padding-top: 0.5em;
    text-align: left;
}
/* Markering av obligatoriske felt */
.has-error>.solidusLabelLeft {
    color: var(--solidus-text);
    font-weight: 700 !important;
}
.has-error>.row>.solidusLabelRight {
    color: var(--solidus-text);
    font-weight: 700 !important;
}
/*
=========================================================
Generelle knapper (standard primary)
=========================================================
*/
.btn {
    border: 2px solid var(--solidus-hoved) !important;
    background-color: var(--btn-bg-default);
    color: var(--btn-text-default);
    transition: all 0.2s ease;
}

.btn:hover, .btn:focus, .btn:active, .btn.active {
    background-color: var(--btn-bg-selected);
    color: var(--btn-text-selected);
    border-color: var(--solidus-hoved) !important;
}

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    color: var(--btn-text-default);
    background-color: var(--btn-bg-default);
    border-color: var(--solidus-hoved) !important;
    pointer-events: none;
    opacity: 0.5;
}

/*
=========================================================
Beløpsknapper
=========================================================
*/
.btn-amount, .solidusOrderItemButtons .btn, .solidusOrderItemButtons button {
    border: 2px solid var(--solidus-hoved) !important;
    background-color: var(--amount-bg-default);
    color: var(--amount-text-default);
    transition: all 0.2s ease;
}

.btn-amount:hover, .solidusOrderItemButtons .btn:hover, .solidusOrderItemButtons button:hover,
.btn-amount:focus, .solidusOrderItemButtons .btn:focus, .solidusOrderItemButtons button:focus,
.btn-amount:active, .solidusOrderItemButtons .btn:active, .solidusOrderItemButtons button:active,
.btn-amount.active, .solidusOrderItemButtons .btn.active, .solidusOrderItemButtons button.active {
    background-color: var(--amount-bg-selected);
    color: var(--amount-text-selected);
    border-color: var(--solidus-kontrast) !important;
}

/*
=========================================================
Varekort (produkter)
=========================================================
*/
.solidusOrderItemFrame {
    border: 2px solid var(--solidus-hoved) !important;
    background-color: var(--item-bg-default);
    color: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 5px;
    margin: 5px;
    min-height: 70px;
    transition: all 0.2s ease;
}

.solidusOrderItemFrame:hover, .solidusOrderItemFrameSelected {
    background-color: var(--item-bg-selected);
    color: var(--item-text-selected);
    border-color: var(--solidus-hoved) !important;
}

/*
=========================================================
Beløpsfeltet inne i varen
=========================================================
*/
.solidusOrderItemFrame .input-group-addon {
    background-color: var(--amount-bg-default);
    color: var(--amount-text-default);
    border: 2px solid var(--solidus-hoved) !important;
    border-radius: 8px 0 0 8px;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.solidusOrderItemFrame:hover .input-group-addon, .solidusOrderItemFrameSelected .input-group-addon {
    border: 2px solid var(--solidus-kontrast) !important;
}

/*
=========================================================
Betalingsvalg (kort, vipps, etc)
=========================================================
*/
.solidusCardFrame {
    border: 2px solid var(--solidus-hoved) !important;
    background-color: var(--item-bg-default);
    color: var(--item-text-default);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 5px;
    margin: 5px;
    min-height: 70px;
    transition: all 0.2s ease;
}

.solidusCardFrame:hover, .solidusCardFrameSelected {
    background-color: var(--item-bg-selected);
    color: var(--item-text-selected);
    border-color: var(--solidus-hoved) !important;
}

.solidusCardFrame .btn {
    border: 2px solid var(--solidus-hoved) !important;
}

.solidusCardFrame:hover .btn, .solidusCardFrameSelected .btn {
    border: 2px solid var(--solidus-kontrast) !important;
}

/* Kontrast på varsler og feilmeldinger inne i betalingsvalg */
.solidusRed {
    color: var(--solidus-hoved);
}

.solidusCardFrame:hover .solidusRed, .solidusCardFrameSelected .solidusRed {
    color: var(--solidus-kontrast);
}

/*
=========================================================
Skjema generelt
=========================================================
*/
.solidusOrderFormClass {
    background-color: var(--solidus-kontrast);
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    border-radius: 4px;
    margin: 2% auto;
    padding: 5%;
}

.k-input-solid { color: #000; background-color: #fff; }
.k-input::selection, .k-textarea::selection, .k-textbox::selection {
    color: var(--btn-text-default);
    background-color: var(--btn-bg-default);
}

/* Skjul border på disabled input-felt for bedre WCAG fokus */
input.k-input:disabled, input.k-input[disabled], textarea.k-textarea:disabled, textarea.k-textarea[disabled] {
    border: none;
}


/* Skru på at beløpsknapper alltid er synlige */
.solidusOrderItemAutoHide {
    opacity: 100%;
}
/*
=========================================================
Valgfrie kontrollblokker for enkel tilpasning
=========================================================
Ta bort det som står under dersom du ønsker å vise bilder på varene, for eksempel ved flere prosjekter i samme nettbutikk, eller flere beløpsvalg på en vare.  
*/



/* Skjul forhåndsbestemte beløpsknapper (ikke fritt beløp) */
.btn-group-vertical {
    display: none;
}


/* Skjul bilde på varen */
.solidusOrderItemImageFrame {
    display: none;
}