סקריפט לשיפור הנראות באתר הניהול (הישן) - אשמח לעזרת המשתמשים

[CUBASE]

אני באמצע כתיבת סקריפט ל-Tampermonkey ב-ChatGPT לשיפור המראה של אתר הניהול, יש כמה דברים שלא הצלחתי לגרום לג'י פי טי לטפל בהם כמו הצבע של הכפתורים וגם הצבע של הטקסט בכפתורים, אשמח לעזרת המשתמשים שמבינים ב-JavaScript

// ==UserScript==
// @name         Yemot UI Enhancer
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  שיפור עיצוב אתר ימות המשיח למראה מודרני ונעים יותר
// @author       Jonny
// @match        https://www.call2all.co.il/ym/*
// @match        https://private.call2all.co.il/ym/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=call2all.co.il
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const customStyles = `
        body {
            background-color: #f8f9fa !important;
            color: #212529 !important;
            font-family: "Segoe UI", "Rubik", "Alef", sans-serif !important;
            font-size: 15px !important;
            line-height: 1.6 !important;
        }

        h1, h2, h3, h4, h5 {
            font-family: "Rubik", "Alef", sans-serif !important;
            color: #0d6efd !important;
        }

        input[type="text"], input[type="password"], select, textarea {
            border: 1px solid #ced4da !important;
            border-radius: 6px !important;
            padding: 6px 10px !important;
            font-size: 14px !important;
            font-family: inherit !important;
            box-shadow: none !important;
        }

        /* סגנון מודרני לכפתורים בכל האתר */
        .ui-button, button, .button {
            background-color: #007bff !important;
            border: 2px solid #007bff !important;
            color: white !important;
            padding: 12px 24px !important;
            border-radius: 30px !important;
            font-size: 16px !important;
            font-weight: bold !important;
            cursor: pointer !important;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3) !important;
            transition: all 0.3s ease !important;
            text-transform: uppercase !important;
        }

        .ui-button:hover, button:hover, .button:hover {
            background-color: #0056b3 !important;
            border-color: #0056b3 !important;
            box-shadow: 0 6px 15px rgba(0, 86, 179, 0.4) !important;
            transform: translateY(-2px) !important;
        }

        .ui-button:active, button:active, .button:active {
            background-color: #004085 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
            transform: translateY(2px) !important;
        }

        /* סגנון לכפתור רכישת מספר משנה */
        #buy-did {
            background-color: #007bff !important;
            border: 2px solid #007bff !important;
            color: white !important;
            padding: 12px 24px !important;
            border-radius: 30px !important;
            font-size: 16px !important;
            font-weight: bold !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3) !important;
        }

        #buy-did:hover {
            background-color: #0056b3 !important;
            border-color: #0056b3 !important;
            box-shadow: 0 6px 15px rgba(0, 86, 179, 0.4) !important;
            transform: translateY(-2px) !important;
        }

        #buy-did:active {
            background-color: #004085 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
            transform: translateY(2px) !important;
        }

        #buy-did .ui-button-text {
            margin-right: 10px !important;
        }

        #buy-did .ui-button-icon-secondary {
            font-size: 18px !important;
            margin-left: 10px !important;
        }

        table {
            border-collapse: collapse !important;
            width: 100% !important;
        }

        table th, table td {
            padding: 10px !important;
            border: 1px solid #dee2e6 !important;
            text-align: right !important;
        }

        table th {
            background-color: #e9ecef !important;
            font-weight: bold !important;
        }

        li.ui-state-default.ui-corner-top {
            background-color: #f1f3f5 !important;
            border-radius: 8px 8px 0 0 !important;
            margin-left: 4px !important;
            margin-right: 4px !important;
            padding: 0 !important;
            transition: background-color 0.3s ease, color 0.3s ease !important;
        }

        li.ui-state-default.ui-corner-top a.ui-tabs-anchor {
            display: block !important;
            padding: 10px 16px !important;
            color: #495057 !important;
            font-weight: 500 !important;
            text-decoration: none !important;
            border-radius: 8px 8px 0 0 !important;
        }

        li.ui-state-default.ui-corner-top:hover {
            background-color: #e2e6ea !important;
        }

        li.ui-state-default.ui-corner-top a.ui-tabs-anchor:hover {
            color: #0d6efd !important;
        }

        li.ui-tabs-active {
            background-color: #ffffff !important;
            border-bottom: 2px solid #0d6efd !important;
        }

        li.ui-tabs-active a.ui-tabs-anchor {
            font-weight: 600 !important;
            color: #0d6efd !important;
        }

        li.ui-state-default.ui-corner-top.ui-state-active {
            background-color: #cfe2ff !important;
            color: #004085 !important;
        }

        li.ui-state-default.ui-corner-top.ui-state-active a.ui-tabs-anchor {
            color: #004085 !important;
        }

        li.ui-state-default.ui-corner-top.ui-state-active:hover {
            background-color: #b6d0ff !important;
        }

        .ui-state-highlight {
            background-color: #d1e7dd !important;
            color: #0f5132 !important;
            border: 1px solid #badbcc !important;
            padding: 10px !important;
            border-radius: 6px !important;
        }

        .ui-state-error {
            background-color: #f8d7da !important;
            color: #842029 !important;
            border: 1px solid #f5c2c7 !important;
            padding: 10px !important;
            border-radius: 6px !important;
        }

        .ui-dialog {
            border-radius: 10px !important;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
        }

        a {
            color: #0d6efd !important;
            text-decoration: none !important;
        }

        a:hover {
            text-decoration: underline !important;
        }
    `;

    const styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = customStyles;
    document.head.appendChild(styleSheet);
})();