jfrome1 / NTW2029

https://ntw-2029.vercel.app
0 stars 1 forks source link

Fix styling issues with nutshell dropdowns. #14

Closed JojokCreator closed 1 week ago

JojokCreator commented 1 week ago

Code blocks. image

Fix

.nutshell-bubble code {
    background: #ddd;   <--- Remove this
    border-radius: 5px;
    /*font-weight:100;*/
    padding: 0 5px;
}
JojokCreator commented 1 week ago

add this

.nutshell-bubble code {
    background: var(--sl-color-accent-low);
    color: var(--sl-color-white);
    border-radius: 5px;
    /*font-weight:100;*/
    padding: 0 5px;
}
JojokCreator commented 1 week ago

When you add colors use the variables from here. As the will then switch in Dark Mode.

/* Dark mode colors. */
:root {
    --sl-color-accent-low: #131e4f;
    --sl-color-accent: #3447ff;
    --sl-color-accent-high: #b3c7ff;
    --sl-color-white: #ffffff;
    --sl-color-gray-1: #eceef2;
    --sl-color-gray-2: #c0c2c7;
    --sl-color-gray-3: #888b96;
    --sl-color-gray-4: #545861;
    --sl-color-gray-5: #353841;
    --sl-color-gray-6: #24272f;
    --sl-color-black: #17181c;
}

/* Light mode colors. */
:root[data-theme='light'] {
    --sl-color-accent-low: #c7d6ff;
    --sl-color-accent: #364bff;
    --sl-color-accent-high: #182775;
    --sl-color-white: #17181c;
    --sl-color-gray-1: #24272f;
    --sl-color-gray-2: #353841;
    --sl-color-gray-3: #545861;
    --sl-color-gray-4: #888b96;
    --sl-color-gray-5: #c0c2c7;
    --sl-color-gray-6: #eceef2;
    --sl-color-gray-7: #f5f6f8;
    --sl-color-black: #ffffff;
}
JojokCreator commented 1 week ago

image

Another on /course-ntw2029/schedule#x-videos

.nutshell-bubble {

    /* Gon' stretch out */
    display: inline-block;
    width: 100%;
    background-color: var(--sl-color-black) !important; < ---- Add
    color: var(--sl-color-white) !important; < ---- Add
}

image