shared.css

:root {
    /* Light Mode Colour Scheme: */
    --light-mode-0: #3700b3;
    --light-mode-1: #8a829bff;
    --light-mode-2: #bfbbc9ff;
    --light-mode-3: #d5d1dbff;
    --light-mode-4: #e0dde3ff;
    --light-mode-5: #f5f5f5ff;
    --failure: #f51925;
    --success: #13952d;
    
    /* Dark Mode Colour Scheme: */
    --dark-mode-1: #1c1f1f;
    --dark-mode-2: #2b3432;
    --dark-mode-3: #4c5351; 
    --dark-mode-4: #a9a9a9; 
    --dark-mode-5: #d0d0d0; 
}

button {
    padding: 3.5% 3.25%;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--light-mode-1); /* For light mode */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
button:hover {
    background-color: var(--light-mode-0);
    transform: scale(1.05);
}

/* Active state */
button:active {
    background-color: var(--light-mode-3);
    transform: scale(0.98);
}

/* Focus and Hover Shadow Effect */
button:hover, button:focus {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

textarea {
    white-space: pre; /* Preserve spaces and line breaks */ 
    overflow-wrap: normal;
    padding: 10px;
    border-radius: 5px;
    resize: vertical; /* Allow vertical resize but not horizontal */
    box-shadow: none; /* Remove any default browser shadow */
    outline: none; /* Remove the outline when focused */
    margin-top: 2px;
    margin-bottom: 2px;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: var(--light-mode-1) var(--light-mode-5); /* Thumb and track colors */
    scroll-margin-block-end: 20%;
}

textarea::-webkit-scrollbar {
    height: 8px;
}

textarea::-webkit-scrollbar-track {
    background: var(--light-mode-5);
    border-radius: 5px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: var(--light-mode-1);
    border-radius: 5px;
    border: 2px solid var(--light-mode-5);
}

textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--light-mode-0); /* Thumb color on hover */
}

/* Light mode (default) */
body {
    background-color: var(--light-mode-5);
    color: var(--dark-mode-3);
}

textarea, input {
    color: var(--dark-mode-3);
    border: 1px solid var(--light-mode-1);
}

textarea:focus {
    border-color:  var(--dark-mode-1); /* Change border color on focus */
}



:root.dark-mode {
    --failure: #ff6169;
    --success: #31be5e;
}

body.dark-mode {
    background-color: var(--dark-mode-1);
    color: var(--dark-mode-5);
}

body.dark-mode textarea {
    background-color: var(--dark-mode-2);
    color: var(--dark-mode-5);
    border: 1px solid var(--dark-mode-3);
    scrollbar-color: var(--dark-mode-3) var(--dark-mode-2);
}

body.dark-mode textarea:focus {
    border-color: var(--dark-mode-4); /* Change border color on focus */
}

body.dark-mode textarea::-webkit-scrollbar-track {
    background: var(--dark-mode-2);
}

body.dark-mode textarea::-webkit-scrollbar-thumb {
    background-color: var(--dark-mode-3);
    border: 2px solid var(--dark-mode-2);
}

body.dark-mode textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-mode-4);
}

body.dark-mode button {
    background-color: var(--dark-mode-2);
}

body.dark-mode button:hover {
    background-color: var(--dark-mode-3);
}

body.dark-mode button:active {
    background-color: var(--dark-mode-4);
}