Custom CSS for the `JSON Viewer Pro` browser extension.

custom.css

/**Write your CSS style **/
/* Dracula Theme */
body {
    background-color: #282A36;
}

.property {
    color: #FF79C6;
}

.json-literal-numeric {
    color: #BD93F9;
}

.json-literal-url {
    color: #8BE9FD;
}

.json-literal-string {
    color: #50FA7B;
}

.json-literal {
    color: #F1FA8C;
}

.json-literal-boolean {
    color: #FFB86C;
}


/* Alternative button group style */
.action-area {
    background-color: #44475a !important;
    padding: 4px !important;
    border-radius: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    right: 20px !important;
}

.menus {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
}

.menus li {
    margin: 0 !important;
}

.menus li a {
    color: #f8f8f2 !important;
    text-decoration: none !important;
    padding: 10px 15px !important;
    /* border: 1px solid #44475a !important; */
    border: none !important;
    transition: background-color 0.3s, color 0.3s !important;
    display: block !important;
    height: 100%;
    box-sizing: border-box;
}

.menus li:first-child a {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.menus li:last-child a {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.menus li:not(:first-child) a {
    border-left: none !important;
}

.menus li.active a {
    background-color: #bd93f9 !important;
    color: #282a36 !important;
}

.menus li a:hover {
    background-color: #6272a4 !important;
    color: #f8f8f2 !important;
}

.option-menu {
    display: flex !important;
    align-items: center !important;
}

.action-area>ul.menus>li>a.option-menu {
    padding: 7px 11px !important;
    height: max-content;
}

#option-menu-icon {
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.3s !important;
}

.option-menu:hover #option-menu-icon {
    transform: rotate(90deg) !important;
}