CSS-Styles/MediaArts DB Classic Colors.css

/* ==UserStyle==
@name           MediaArtsDB Classic Colors
@namespace      userstyles.world/user/nes370
@version        2024.08.02
@description    Restoring the colorful classic look of MADB.
@author         Nes
@license        no license
@preprocessor   stylus
@var select theme "Theme" ["dark:Dark theme", "light:Light theme"]
==/UserStyle== */

@-moz-document domain("mediaarts-db.artmuseums.go.jp") {

    :root {
        
        if theme == light {
            --fg:  #000;
            --fga: rgba(0,0,0,0.7);
            --bg:  #FFF;
            --primary:   #000;
            --tertiary:  #333;
        } else {
            --fg:  #FFF;
            --fga: rgba(255,255,255,0.7);
            --bg:  #000;
            --primary:   #fff;
            --tertiary:  #bbb;
        }
        --red:    #ea2a5d;
        --yellow: #f6a248;
        --green:  #009349;
        --blue:   #00a6d4;
        --purple: #8b4bbc;
    }
    
    body {
        color: var(--fg);
        background-color: var(--bg);
        font-family: Ubuntu, Meiryo, sans-serif;
    }
    
    /* header */
    svg { fill: var(--fg); }
    
    .header[data-v-7a76677a] { border-bottom-color: var(--secondary); }
    .header .lang-input:checked + .label[data-v-7a76677a] { color: var(--fg); }    
    .header__language[data-v-7a76677a] { color: var(--primary); }    
    
    /* search bar */
    .search[data-v-66df0642] { background-color: var(--primary); }
    .search__button[data-v-66df0642] { 
        color: var(--bg);
        background-color: var(--primary); 
        if theme == dark {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA4LTAxVDIyOjU5OjA1LTA3OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wOC0wMVQyMjo1OTo1MS0wNzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wOC0wMVQyMjo1OTo1MS0wNzowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0ZjkwY2Q3Yi0wY2M5LTQzNDAtYWM3MS04MThmYzlmOGY0ODIiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiYjk2NmQ1Zi0wMDRhLTMzNDYtYjczYS1lMjJhY2M5MGRjYjAiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5Y2NhMGZkNS01MWY3LWZlNDAtYjNmYS0zN2E2ZjM1YmM5MjkiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjljY2EwZmQ1LTUxZjctZmU0MC1iM2ZhLTM3YTZmMzViYzkyOSIgc3RFdnQ6d2hlbj0iMjAyNC0wOC0wMVQyMjo1OTowNS0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjb252ZXJ0ZWQiIHN0RXZ0OnBhcmFtZXRlcnM9ImZyb20gYXBwbGljYXRpb24vdm5kLmFkb2JlLnBob3Rvc2hvcCB0byBpbWFnZS9wbmciLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjRmOTBjZDdiLTBjYzktNDM0MC1hYzcxLTgxOGZjOWY4ZjQ4MiIgc3RFdnQ6d2hlbj0iMjAyNC0wOC0wMVQyMjo1OTo1MS0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnyBkfIAAAMESURBVHja7ZxhecQgDIY/CUg4CUhAQiVUQiXUQSUg4SRUQiVUQiV0f7it67Y2gQC5tXme/NpucC8khJAM67ri1p96QzgDk0keAFoAA4ARwAxg/UPn8DsDgA6ARQXJCcaGL3cEgapz+Fv2ncG0YcXXTDqHMd4GjBPaHSoASYAxAJ4Fgex1DD5MFZgGwFIRykuX4KhVgBkUANmrrw3GK4Ty0imYd3EwXsgveAD9Tn342VIbDheMR7k4xAa/MdeAwwEzRO6MRsDkXWRs5HODaSJOiRwxRkys1OUCY5g2/5RwfidxE9ekbQ4wnOBtKHjPa5n+RhSMYwzeory0ueZ3BmZWuFNi4SwcEz8C0zJ8Sm2h+pxeAswovQqZHfJEjKeSwFjFfuXoKKfMuUkBQwnmRugTikn5FDCzFPnCYonmHwXmIWmrFYTiG10MGMppNCgGQ5l/HwOG4l+sYjAPCf/4GxjKVtQuU6or+A3MjPc7jWJOJzaYYnnVjNLXANP/EzDuimDcDeYGw5KuBpj/4nwNF8xZfveyx/VZgLe8AZgsAR6FtuYrgcl1JaBcwrorXiIpOQ3NaQfKc08TA4aaqHIKoVBu1qRL8BVTm88UMJZIXtOuoc65SQFDNacZOp5PqHmk5OcTqnfXEgn3KPjgRt01td+XqAso9kTLGbQWHAt6iQor9qKUgYxK4bQMKOJlIK/YgFM45As45B4KCoeo+Y39CrlMpsOtxYuKtzjFiTEVm17owvlAWhmtzwmGcp0/WrUWvJp/Ez4j1afgc4IxCXC2ZrYtfnZBO3wVQU+oXFIfUxluMk5cTb9BbC+Bge5+gmQ4qW05naIvO0rCkWjkspVNa9qcfF4KjmTrHycSzdm8JQJHulnUhJMlZ2/kHMYwgjGXzw1mK00YUGoXPcGr+0uCU6oh3YVVHkFPgI3hM03CuNFwSoE5ArbVHJfPKDi1wWhKkn+DcxUwXDjTlcBQ4UwAzNXAnMH5bDC9Ipi/4Hzrur0qmD2cH63IVwaDTe7HnEa+t97/o4qkH/dCOh5njM12AAAAAElFTkSuQmCC");
        }
    }
    .search__inner[data-v-66df0642] {
        border: 1px solid var(--fg);
        background: var(--bg);
    }
    .search__input[data-v-66df0642] {
        color: var(--fg);
        background: var(--bg);
    }
    .search__detail[data-v-66df0642] { color: var(--bg); }
    .search__detail .arrow path[data-v-66df0642] { fill: var(--bg); }
    .search__conditions__item[data-v-06993a98] {
        background-color: var(--secondary);
        color: var(--fg);
    }
    
    /* detailed search */
    .detail-search__outer[data-v-66df0642] {
        border-color: var(--secondary);
        background-color: var(--bg);
    }
    .detail-search__title[data-v-66df0642] { color: var(--fg); }
    .detail-search__header[data-v-66df0642] { border-bottom-color: var(--primary) }
    .detail-search__genres[data-v-66df0642] { background-color: var(--secondary); }
    .g-checkbox + .label { color: var(--fga); }
    .g-checkbox + .label::before { 
        border-color: var(--tertiary);
        background-color: var(--bg);
    }
    .g-checkbox:checked + .label::after { background-color: var(--tertiary); }
    .inputs > .label[data-v-63b1d8f1]::before {
        border-color: var(--tertiary);
        background-color: var(--bg);
    }
    .g-button {
        border-color: var(--bg);
        background-color: var(--tertiary);
        color: var(--fg);
    }
    .g-input {
        border-color: #D5D5D5;
        background-color: var(--secondary);
    }
    .g-select--white, .g-select--gray {
        border-width: 1px;
        border-style: solid;
        border-color: #D5D5D5;
        background-color: var(--secondary);
        if theme == dark {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF8WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTA4LTAxVDIyOjI0OjI5LTA3OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wOC0wMVQyMjoyNToxOC0wNzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wOC0wMVQyMjoyNToxOC0wNzowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpjNmI1NDY4ZS1lMmQwLTAxNDQtYjk3NC1iZDI0ZjNjNTYwN2YiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDowNjA2NTQ4Ny05NjBmLTkxNGEtODE5MS1jY2M4ODQ3Yjk0YWUiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxYjU1MzFlNy01ZDhmLTgxNDktYmNkOS0zMTZlNTllYjc1MDUiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjFiNTUzMWU3LTVkOGYtODE0OS1iY2Q5LTMxNmU1OWViNzUwNSIgc3RFdnQ6d2hlbj0iMjAyNC0wOC0wMVQyMjoyNDoyOS0wNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjNmI1NDY4ZS1lMmQwLTAxNDQtYjk3NC1iZDI0ZjNjNTYwN2YiIHN0RXZ0OndoZW49IjIwMjQtMDgtMDFUMjI6MjU6MTgtMDc6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMi4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6E5VApAAAAn0lEQVRYw+3VMQqAMAwF0A5FvHFH6+h1dFBPFysoYkCs6RdEfuCP0kdNEyci7ktxBBFEEEEEEfQuyBsO8W+B2pQppX7wTZXSp3RoUJSjclE7Zq+IBAU51x1KY9Zq0L8sF2XGWJpao2aFWjGDFWN99leoYkzJHIrq4HGLPG1i5GDUN1V0M6hJHZAY1OoIKAxyl0Vrz3DbE0QQQQQR9DfQArNDZJKfkCpJAAAAAElFTkSuQmCC")
        }
    }
        
    /* navigation bar */
    .navigation[data-v-74ceb9b1] { background-color: var(--secondary); }
    .navigation__item.all[data-v-74ceb9b1] { border-bottom-color: var(--purple); }
    .navigation__item.manga[data-v-74ceb9b1] { border-bottom-color: var(--red); }
    .navigation__item.animation[data-v-74ceb9b1] { border-bottom-color: var(--yellow); }
    .navigation__item.game[data-v-74ceb9b1] { border-bottom-color: var(--green); }
    .navigation__item.mediaart[data-v-74ceb9b1] { border-bottom-color: var(--blue); }
    .navigation__item .count[data-v-74ceb9b1] {
        color: var(--bg);
        padding: 0 6px;
        border: none;
    }
    .navigation__item.all > .count { background-color: var(--purple); }
    .navigation__item.manga > .count { background-color: var(--red); }
    .navigation__item.animation > .count { background-color: var(--yellow); }
    .navigation__item.game > .count { background-color: var(--green); }
    .navigation__item.mediaart > .count { background-color: var(--blue); }
    .navigation__item.inactive[data-v-74ceb9b1] {
        color: var(--fga);
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    
    /* filter & sort */
    .g-radio + .label { color: var(--fga); }
    .g-radio + .label::before {
        background-color: var(--bg);
        border-color: var(--tertiary)
    }
    .g-radio:checked + .label::after { background-color: var(--tertiary); }
    
    .category__header .sort__select[data-v-2be76fe9] {
        background-color: var(--secondary);
        color: var(--fga);
    }
    
    /* search results */
    .results__link .circle[data-v-91d37d7d] {
        width: 45px;
        height: 45px;
    }
    .results__link .detail[data-v-91d37d7d] {
        color: var(--fga);
        border-color: var(--bg);
    }
    .results__link .circle.game[data-v-91d37d7d]:not(.collection) {
        background-color: rgba(0, 0, 0, 0);
        filter: invert(69%) sepia(50%) saturate(6771%) hue-rotate(144deg) brightness(97%) contrast(102%);
        height: 30px;
        width: 60px;
    }
    .results__link .circle.manga[data-v-91d37d7d]:not(.collection) {
        background-color: rgba(0, 0, 0, 0);
        filter: invert(72%) sepia(70%) saturate(3578%) hue-rotate(330deg) brightness(90%) contrast(102%);
    }
    .results__link .circle.animation[data-v-91d37d7d]:not(.collection) {
        background-color: rgba(0, 0, 0, 0);
        filter: invert(25%) sepia(81%) saturate(2182%) hue-rotate(331deg) brightness(101%) contrast(92%);
    }
    .results__link .circle.mediaart[data-v-91d37d7d]:not(.collection) {
        background-color: rgba(0, 0, 0, 0);
        filter: invert(60%) sepia(98%) saturate(842%) hue-rotate(160deg) brightness(94%) contrast(101%);
    }
    .results__link .circle.collection[data-v-91d37d7d]::after { border-color: var(--bg); }
    .results__link .genre__inner[data-v-91d37d7d] { 
        background-color: var(--bg); 
        border-color: var(--fga);
        color: var(--fga);
    }
    .results__link .title[data-v-91d37d7d] { color: var(--primary); }
        
    .show-more__button[data-v-2be76fe9], .show-more__button[data-v-1590dc32], .show-more__button.hide[data-v-1590dc32] {
        border-color: var(--fga);
        background-color: var(--bg);
    }
    
    /* footer */
    .pagination__item[data-v-60677b97] {
        color: var(--fga);
        background-color: var(--bg);
        box-shadow: 0 3px 6px var(--fga);
    }
    .pagination__item.current[data-v-60677b97] {
        color: var(--fga);
        background-color: var(--tertiary);
    }
    svg > path[data-v-60677b97] { fill: var(--fga); }
    
    /* other pages */
    #news .information, .basic-page[data-v-5983441a], #news-list .about-box, .about-box[data-v-5c6c68ae] { color: var(--fga); }
    
}
@-moz-document url-prefix("https://mediaarts-db.artmuseums.go.jp/all") {
    :root {     
        --primary:   #8b4bbc;
        if theme == light { 
            --secondary: #e6dcf0; 
        } else { 
            --secondary: #322938; 
        }
        --tertiary:  #8572e8;
    }
}
@-moz-document url-prefix("https://mediaarts-db.artmuseums.go.jp/manga") {
    :root {
        --primary:   #ea2a5d;
        if theme == light {
            --secondary: #f5d8e1;
        } else {
            --secondary: #433236;
        }
        --tertiary:  #e469ba;
    }
}
@-moz-document url-prefix("https://mediaarts-db.artmuseums.go.jp/animation") {
    :root {
        --primary:   #f6a248;
        if theme == light {
            --secondary: #fbeede;
        } else {
            --secondary: #423c34;
        }
        --tertiary:  #eac026;
    }
}
@-moz-document url-prefix("https://mediaarts-db.artmuseums.go.jp/game") {
    :root {    
        --primary:   #009349;
        if theme == light {
            --secondary: #d3ebdf;
        } else {
            --secondary: #313d37;
        }
        --tertiary:  #91c349;
    }
}
@-moz-document url-prefix("https://mediaarts-db.artmuseums.go.jp/mediaart") {
    :root {
        --primary:   #00a6d4;
        if theme == light {
            --secondary: #d2eef6;
        } else {
            --secondary: #2e3639;
        }
        --tertiary:  #5ad1e4;
    }
}