Greasy Fork is available in English.

SangTacViet Custom Theme Icon Weapon

Dark Theme and Customizable Theme for SangTacViet

// ==UserScript==
// @name           SangTacViet Custom Theme Icon Weapon
// @namespace      sangtaviet
// @version        1.0.14
// @description    Dark Theme and Customizable Theme for SangTacViet
// @author         @HyperBeam & @RenjiYuusei
// @license        GPL-3.0
// @icon64         https://sangtacviet.vip/favicon.png
// @match          *sangtacviet.vip/*
// @match          *sangtacviet.com/*
// @match          *sangtacviet.pro/*
// @match          *14.225.254.182/*
// @match          *sangtacviet.me/*
// @grant          GM_addStyle
// ==/UserScript==
!function(){const n="'https://i.imgur.com/nLn4Hy3.png'",o="'https://i.imgur.com/oKb3DRf.png'";GM_addStyle(`\n    @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800;6..12,900;6..12,1000&display=swap');\n \n    :root {\n        /* Color Settings */\n        --bg-color: ${"#1f2129"};\n        --bg-secondary-color: ${"#1b1b22"};\n        --title-color: ${"#c0c2cc"};\n        --font-color: ${"#83848f"};\n        --bg-content-color: ${"#1f2129"};\n        --font-reader-color: ${"#83848f"};\n        --border-color: ${"#6b6c75"};\n        --link-color: ${"#557ffc"};\n        --chapter-color: ${"#4a5f9b"};\n        --progressbar-color: #557ffc;\n        --bg-btn: ${"#283760"};\n        --bg-item: ${"#383e4d"};\n \n        /* Name Settings */\n        --op-name: url('link here');\n        --ts-op-name: 0 0 16px #000;\n        --cl-op-name: #000;\n \n        /* Display Name Styles */\n        --cl-luyen-dao: gray;\n        --ts-luyen-dao: 0 0 3px gray;\n \n        --cl-huyen-dao: blue;\n        --ts-huyen-dao: 0 0 12px blue;\n \n        --cl-phong-vuong: #e661fa;\n        --ts-phong-vuong: 0 0 12px #e661fa;\n \n        --hu-hoang: url('https://media.giphy.com/media/3qXi5eIvcgCmTDObOU/giphy.gif');\n        --ts-hu-hoang: 0 0 16px #ffff00;\n \n        --chan-de: url('http://giphygifs.s3.amazonaws.com/media/5xtDarBgMErSWLOFHAA/giphy.gif');\n        --ts-chan-de: 0 0 16px #ff0000;\n \n        --hien-thanh: url("/vothanh.gif");\n        --ts-hien-thanh: 0 0 12px #3bffcb;\n \n        --thong-than: url('https://media.giphy.com/media/xThtaklgRUvTMs1xmM/giphy.gif');\n        --ts-thong-than: 0 0 12px #af1cd5;\n \n        --dao-ton: url('https://media0.giphy.com/media/3o7bud4Ujk6S6MrKGQ/giphy.webp');\n        --ts-dao-ton: 0 0 12px #eeeeee;\n \n        --thu-dao: url('https://media.giphy.com/media/ceCgIb3Pw5xbq/giphy.gif');\n        --ts-thu-dao: 2px 2px 2px #ffffff1f, -2px -2px 4px #ffffff1f, 2px -2px 4px #ffffff1f, -2px 2px 2px #ffffff1f;\n \n        --hon-don: url('https://media.giphy.com/media/3oxRmmENQPekq4N02c/giphy.gif');\n        --ts-hon-don: 0 4px 16px purple;\n \n \n        /* Item Settings */\n        --uy-vong-lenh: url(${"'https://i.imgur.com/ziBhmwM.png'"});\n        --cong-phap: url(${n});\n        --vu-ky: url(${o});\n        --linh-thach: url(${"'https://i.imgur.com/UwFWB8A.png'"});\n        --tu-khi-dan: url(${"'https://i.imgur.com/9fFhmvH.png'"});\n        --tu-linh-dan: url(${"'https://i.imgur.com/nD4iPjk.png'"});\n        --tay-tuy-dan: url(${"'https://i.imgur.com/sDoEGWp.png'"});\n        --thien-van-dan: url(${"'https://i.imgur.com/xUsGH9z.png'"});\n        --thiep-bia: url(${"'https://i.imgur.com/B82IFsX.png'"});\n \n        --item-hoa: url(${"'https://i.imgur.com/RxONA8q.png'"});\n        --item-thuy: url(${"'https://i.imgur.com/fzbNwgp.png'"});\n        --item-kim: url(${"'https://i.imgur.com/ZYvya8T.png'"});\n        --item-moc: url(${"'https://i.imgur.com/ix78fH5.png'"});\n        --item-tho: url(${"'https://i.imgur.com/u07vg2x.png'"});\n        --item-phong: url(${"'https://i.imgur.com/Qgh69Yi.png'"});\n        --item-loi: url(${"'https://i.imgur.com/TM14FjM.png'"});\n        --item-quang: url(${"'https://i.imgur.com/7ZUU3lf.png'"});\n        --item-bang: url(${"'https://i.imgur.com/PjoInRi.png'"});\n        --item-am: url(${"'https://i.imgur.com/POQz5nx.png'"});\n \n        --item-kim-qb: url(${"'https://i.imgur.com/sK5kXVg.png'"});\n        --item-moc-qb: url(${"'https://i.imgur.com/1Pn8jkd.png'"});\n        --item-thuy-qb: url(${"'https://i.imgur.com/ht34H6a.png'"});\n        --item-hoa-qb: url(${"'https://i.imgur.com/r4OdKJc.png'"});\n        --item-tho-qb: url(${"'https://i.imgur.com/eW1kdMw.png'"});\n        --item-phong-qb: url(${"'https://i.imgur.com/NqS2exd.png'"});\n        --item-loi-qb: url(${"'https://i.imgur.com/P4VxZqg.png'"});\n        --item-bang-qb: url(${"'https://i.imgur.com/faeaqo4.png'"});\n        --item-quang-qb: url(${"'https://i.imgur.com/upp8Bim.png'"});\n        --item-am-qb: url(${"'https://i.imgur.com/zmphh7H.png'"});\n \n        /* Predefined Colors */\n        --silver-primary: #c0c2cc;\n        --grey-primary: #83848f;\n        --blue-primary: #557ffc;\n        --red-primary: #eb1551;\n        --red-secondary: #af2a2a;\n        --yellow-primary: #ffc152;\n        --orange-primary: #ff7329;\n        --green-primary: #39cca0;\n        --violet-primary: #6a4ce2;\n        --light-hover: rgba(255, 255, 255, .1);\n        --light-hover-secondary: rgba(255, 255, 255, .2);\n        --black: #000;\n        --white: #fff;\n        --opacity-black: rgba(255, 255, 255, .1);\n        --opacity-black-bold: rgba(0, 0, 0, .8);\n        --opacity-white: rgba(255, 255, 255, .5);\n        --opacity-white-bold: rgba(255, 255, 255, .8);\n        --opacity: #0000;\n        --text-black: rgba(18, 18, 23, .9);\n        --text-grey: rgba(18, 18, 23, .6);\n    }\n \n    /* General Styles */\n    html {\n        font-family: 'Nunito Sans', sans-serif;\n    }\n \n    body {\n        font-family: 'Nunito Sans', sans-serif;\n        color: var(--text-black);\n    }\n \n    #full {\n        overflow: hidden !important;\n    }\n \n    /* User Avatar */\n    \n        #inner > .container:nth-child(2),\n        #inner > div:nth-child(2) > center {\n            background: none;\n        }\n    \n \n    #tm-user-avatar {\n        box-shadow: none;\n    }\n \n    /* User Display Name */\n    #dsname {\n        \n \n        \n \n        \n \n        \n \n        \n \n        \n \n        \n \n        \n \n        \n \n        \n \n        \n \n        \n \n        \n \n        \n    }\n \n    /* Other Styles */\n    hr {\n        border-top: 1px solid var(--border-color) !important;\n    }\n \n    .progress-bar[role="progressbar"] {\n        background-color: var(--progressbar-color) !important;\n        line-height: 16px;\n    }\n \n    div:has( > #avatar) {\n        margin: 50px auto 30px !important;\n    }\n \n    #dsname ~ span {\n        color: var(--text-grey) !important;\n        font-weight: 400;\n    }\n \n    #tochangename {\n        width: 100%;\n    }\n \n    #infobox {\n        margin-top: 50px;\n        font-weight: 700;\n    }\n \n    #infobox a {\n        font-weight: 400;\n    }\n \n    #infobox > span {\n        display: inline-block;\n        font-size: 14px !important;\n        margin-left: 5%;\n        margin-top: 15px;\n        margin-bottom: 15px;\n        font-weight: 400;\n    }\n \n    #tainfo {\n        margin-top: 30px;\n        margin-bottom: 30px;\n    }\n \n    #infobox .d91 {\n        margin-top: 30px;\n        margin-bottom: 30px;\n        border-radius: 0;\n        font-weight: 400;\n    }\n \n    #infobox .d91 > span {\n        color: var(--text-black) !important;\n    }\n \n    #infobox .d91 span + span {\n        color: var(--blue-primary) !important;\n    }\n \n    div:has( > button[onclick^="dotpha"]) {\n        border: none !important;\n        color: var(--text-grey) !important;\n    }\n \n    button[onclick^="dotpha"] {\n        margin: 10px 0;\n    }\n \n \n    #commentportion {\n        font-weight: 400;\n    }\n \n    #infobox .d91 > span:last-of-type + hr {\n        display: none;\n    }\n \n    /* User Item Styles */\n    .item {\n        margin: 3px;\n        border-width: 3px !important;\n        border-style: solid !important;\n        border-color: transparent !important;\n        background-size: contain !important;\n        background-repeat: no-repeat !important;\n        background-position: center !important;\n        background-color: var(--bg-item);\n        outline: 2px solid var(--grey-primary) !important;\n    }\n \n    .item[n]:after {\n        content: attr(n);\n        position: absolute;\n        right: -2px;\n        bottom: -3px;\n        font-size: 12px;\n        line-height: 12px;\n        text-shadow: 1px 1px 1px var(--black);\n        color: var(--white);\n    }\n \n    a.item[ac="true"][onclick="openitem(this)"] {\n        outline: 2px dashed var(--red-primary) !important;\n        border-width: 3px !important;\n        border-style: solid !important;\n        border-color: transparent !important;\n    }\n \n    a.item[l^="5"]:not([l="5"]):not([tag="1"]):after {\n        width: 32px;\n        height: 32px;\n    }\n \n    a.item[l^="5"]:not([l="5"]):not([tag="1"]):after {\n        position: relative;\n        top: -3px;\n        left: -3px;\n    }\n \n    a.item[l^="4"]:not([l="4"]):not([tag="1"]):after,\n    a.item[l^="3"]:not([l="3"]):not([tag="1"]):after,\n    a.item[l^="2"]:not([l="2"]):not([tag="1"]):after,\n    a.item[l^="1"]:not([l="1"]):not([tag="1"]):after {\n        width: 30px;\n        height: 30px;\n        position: relative;\n        top: -2px;\n        left: -2px;\n        border-radius: 50%;\n    }\n \n    a.item[l^="4"]:not([l="4"]):not([tag="1"]):after {\n        background: radial-gradient( transparent, transparent, var(--orange-primary));\n    }\n \n    a.item[l^="3"]:not([l="3"]):not([tag="1"]):after {\n        background: radial-gradient( transparent, transparent, var(--violet-primary));\n    }\n \n    a.item[l^="2"]:not([l="2"]):not([tag="1"]):after {\n        background: radial-gradient( transparent, transparent, var(--yellow-primary));\n    }\n \n    a.item[l^="1"]:not([l="1"]):not([tag="1"]):after {\n        background: radial-gradient( transparent, transparent, var(--silver-primary));\n    }\n \n    .item[l="2"]:not([tag="1"]) {\n        outline: 2px solid var(--green-primary) !important;\n    }\n \n    .item[l="3"]:not([tag="1"]) {\n        outline: 2px solid var(--blue-primary) !important;\n    }\n \n    .item[l="4"]:not([tag="1"]) {\n        outline: 2px solid var(--violet-primary) !important;\n    }\n \n    .item[l="5"]:not([tag="1"]) {\n        outline: 2px solid var(--orange-primary) !important;\n    }\n \n    .item[l="6"]:not([tag="1"]) {\n        outline: 2px solid var(--yellow-primary) !important;\n    }\n \n    .item[l="7"]:not([tag="1"]) {\n        outline: 2px solid var(--green-primary) !important;\n    }\n \n    .item[l="8"]:not([tag="1"]) {\n        outline: 2px solid var(--blue-primary) !important;\n    }\n \n    .item[l="9"]:not([tag="1"]) {\n        outline: 2px solid var(--violet-primary) !important;\n    }\n \n    a.item[l^="1"]:not([l="1"]):not([tag="1"]) {\n        outline: 2px solid var(--silver-primary) !important;\n        border-radius: 0;\n    }\n \n    a.item[l^="2"]:not([l="2"]):not([tag="1"]) {\n        outline: 2px solid var(--yellow-primary) !important;\n    }\n \n    a.item[l^="3"]:not([l="3"]):not([tag="1"]) {\n        outline: 2px solid var(--violet-primary) !important;\n    }\n \n    a.item[l^="4"]:not([l="4"]):not([tag="1"]) {\n        outline: 2px solid var(--orange-primary) !important;\n    }\n \n    a.item[l^="5"]:not([l="5"]):not([tag="1"]) {\n        outline: 2px solid var(--red-primary) !important;\n    }\n \n    .item[style="background-image:url(/game/asset/item/uy-vong-lenh.png)"] {\n        background-image: var(--uy-vong-lenh) !important;\n    }\n \n    .item[tag="1"] {\n        background-image: var(--linh-thach);\n    }\n \n    .item[tag="2"] {\n        border-width: 4px !important;\n    }\n \n    .item[tag="2"][ac="true"][onclick="openitem(this)"] {\n        border-width: 4px !important;\n    }\n \n    .item[tag="2"][e="1"] {\n        background-image: var(--tu-khi-dan);\n    }\n \n    .item[tag="2"][e="2"] {\n        background-image: var(--tu-linh-dan);\n    }\n \n    .item[tag="2"][e="3"] {\n        background-image: var(--tay-tuy-dan);\n    }\n \n    .item[tag="2"][e="10"] {\n        background-image: var(--thien-van-dan);\n    }\n \n    .item[tag="3"] {\n        background-image: var(--cong-phap);\n    }\n \n    .item[tag="3"][l="50"] {\n        background-image: var(--cong-phap);\n    }\n \n    .item[tag="4"] {\n        background-image: var(--vu-ky);\n    }\n \n    .item[itn="thiep-bia-2023"] {\n        background-image: var(--thiep-bia) !important;\n    }\n \n    /* Item Border Width */\n    \n \n    /* Item Background Images */\n    .item[e="19"] {\n        background-image: var(--item-hoa);\n    }\n \n    .item[e="20"] {\n        background-image: var(--item-thuy);\n    }\n \n    .item[e="21"] {\n        background-image: var(--item-kim);\n    }\n \n    .item[e="22"] {\n        background-image: var(--item-moc);\n    }\n \n    .item[e="23"] {\n        background-image: var(--item-tho);\n    }\n \n    .item[e="24"] {\n        background-image: var(--item-phong);\n    }\n \n    .item[e="25"] {\n        background-image: var(--item-loi);\n    }\n \n    .item[e="26"] {\n        background-image: var(--item-quang);\n    }\n \n    .item[e="27"] {\n        background-image: var(--item-bang);\n    }\n \n    .item[e="28"] {\n        background-image: var(--item-am);\n    }\n \n    /* Pháp Tắc Styles */\n    \n \n    /* Item Info Styles */\n    .item .iinfo {\n        top: 125%;\n        left: -3px;\n        background-color: var(--opacity-black-bold);\n        border-radius: 5px;\n        padding: 5px;\n        color: var(--opacity-white-bold);\n        animation: fadeIn 0.2s ease-out;\n    }\n \n    @keyframes fadeIn {\n        0% {\n            opacity: 0;\n        }\n        100% {\n            opacity: 1;\n        }\n    }\n \n    .item[tag="2"] .iinfo {\n        top: 133%;\n    }\n \n    .activeitem {\n        margin: 10px 0;\n    }\n \n    .activeitem .item {\n        margin-right: 10px !important;\n    }\n \n    .activeitem .itemname {\n        color: var(--font-color) !important;\n    }\n \n    .activeitem .item .iinfo {\n        top: -5px;\n        left: 145%;\n    }\n\t\t.activeitem .item[tag="2"] .iinfo {\n        top: -5px;\n        left: 158%;\n    }\n \n    .item[sel="true"]:before {\n        width: unset;\n        height: unset;\n        text-shadow: none;\n        color: var(--danger);\n        top: 50%;\n        right: 50%;\n        transform: translate(50%, -50%);\n    }\n \n    [selected] {\n        outline: 2px solid var(--red-primary) !important;\n    }\n \n    [selected]:before {\n        width: unset;\n        height: unset;\n        text-shadow: none;\n        color: var(--danger);\n        top: -7%!important;\n        left: 17%!important;\n    }\n \n    .item[tag="2"][selected]:before {\n        width: unset;\n        height: unset;\n        text-shadow: none;\n        color: var(--danger);\n        top: -12%!important;\n        left: 14%!important;\n    }\n \n    #content-container .contentbox {\n        padding-top: 50px !important;\n        padding-bottom: 50px !important;\n    }\n \n    if theme_style==dark {\n        body {\n            background-color: var(--bg-color);\n            color: var(--title-color);\n        }\n \n        a {\n            color: var(--link-color);\n        }\n \n        a:hover {\n            transition: 0s;\n        }\n \n        #full {\n            background-color: var(--bg-color) !important;\n        }\n \n        /*top*/\n        #tm-top-nav {\n            color: transparent;\n            background-color: var(--bg-color);\n        }\n \n        #tm-top-nav-home,\n        #tm-top-nav-fanpage {\n            color: var(--title-color) !important;\n        }\n \n        #mainbar {\n            background-color: var(--bg-color) !important;\n        }\n \n        if logo_white {\n            #tm-nav-search-logo,\n            img[src="/favicon.png"] {\n                filter: brightness(999);\n            }\n        }\n \n        #menunavigator2 ul > span:first-child {\n            color: var(--text-black);\n        }\n \n        input#id {\n            background: var(--bg-secondary-color);\n            color: var(--title-color);\n        }\n \n        input#id::placeholder {\n            color: var(--font-color);\n        }\n \n        input#id:focus {\n            border-radius: 20px;\n            background-color: var(--bg-secondary-color);\n            outline: none;\n            box-shadow: none;\n        }\n \n        #searchbox {\n            display: none !important;\n        }\n \n        #notifmarker,\n        #tm-btn-rescan,\n        #tm-btn-goto {\n            color: var(--title-color);\n        }\n \n        #tm-bot-nav {\n            background-color: var(--bg-color) !important;\n            box-shadow: none;\n        }\n \n        #naviga a {\n            color: var(--title-color);\n        }\n \n        div[style$="4px solid red"],\n        div[style$="4px solid blue"] {\n            background-color: var(--bg-secondary-color) !important;\n            color: var(--title-color) !important;\n            border-width: 1px !important;\n        }\n \n        /*foot*/\n        #tm-credit-section {\n            background-color: var(--bg-color) !important;\n        }\n \n        #tm-credit-text {\n            color: var(--font-color) !important;\n        }\n \n        #tm-credit-text a:first-child {\n            margin-bottom: 10px;\n        }\n \n        #tm-credit-text a:first-child div {\n            display: none !important;\n        }\n \n        #tm-credit-text a:first-child img {\n            margin-bottom: 20px !important;\n        }\n \n        #tm-credit-text div a {\n            display: inline-block;\n            color: var(--link-color) !important;\n            padding: 2px;\n        }\n \n        #tm-credit-text span {\n            display: none !important;\n        }\n \n        /*modal*/\n        .modal-content {\n            background-color: var(--bg-secondary-color);\n            border: none;\n            color: var(--font-color);\n        }\n \n        .modal-header {\n            border-bottom: 1px solid var(--border-color);\n            color: var(--title-color);\n        }\n \n        .modal-header .close {\n            color: var(--link-color);\n            text-shadow: none;\n        }\n \n        .modal-body b {\n            color: var(--title-color);\n        }\n \n        .modal-body input {\n            background: var(--bg-color);\n            border: 1px solid var(--border-color);\n            color: var(--title-color);\n        }\n \n        .modal-body input:focus {\n            outline: none;\n            background: var(--bg-color);\n            border: none;\n            box-shadow: none;\n            color: var(--title-color);\n        }\n \n        .modal-body input::placeholder {\n            color: var(--font-color);\n        }\n \n        .modal-body textarea {\n            background: var(--bg-color);\n            border: 1px solid var(--border-color);\n            color: var(--title-color);\n        }\n \n        .modal-body textarea {\n            outline: none;\n        }\n \n        .modal-footer {\n            border-top: 1px solid var(--border-color);\n        }\n \n        .modal-footer .btn.btn-info {\n            color: var(--title-color);\n            background-color: var(--bg-btn);\n            border: none;\n        }\n \n        .modal-footer .btn.btn-info:active:focus,\n        .modal-footer .btn.btn-info:focus {\n            box-shadow: none;\n        }\n \n        .modal-footer .btn.btn-info:active {\n            color: var(--title-color);\n            background-color: var(--bg-btn);\n            opacity: 0.8;\n        }\n \n        .modal-footer #btnDrop {\n            color: var(--title-color);\n            background-color: var(--red-secondary);\n            border: none;\n        }\n \n        .modal-footer #btnDrop:active:focus,\n        .modal-footer #btnDrop:focus {\n            box-shadow: none;\n        }\n \n        .modal-footer #btnDrop:active {\n            color: var(--title-color);\n            background-color: var(--red-secondary);\n            opacity: 0.8;\n        }\n \n        a:first-child > .noti {\n            border-width: 0;\n        }\n \n        .noti {\n            border: solid var(--border-color);\n            border-width: 1px 0 0;\n            color: var(--title-color) !important;\n            height: unset !important;\n            padding: 10px;\n        }\n \n        .noti h6 {\n            color: var(--font-color);\n            margin: 0 0 6px;\n        }\n \n        .noti h6 + b {\n            font-weight: normal !important;\n            color: var(--title-color) !important;\n        }\n \n        .noti h6 span {\n            color: var(--font-color) !important;\n        }\n \n        #notification {\n            color: var(--black) !important;\n        }\n \n        /*comment*/\n        #commentportion {\n            background-color: var(--bg-color) !important;\n            color: var(--title-color) !important;\n        }\n \n        #cmtx {\n            color: var(--title-color);\n            background-color: var(--bg-secondary-color);\n            border: none;\n        }\n \n        #cmtx:focus {\n            box-shadow: none;\n        }\n \n        #cmtx::placeholder {\n            color: var(--font-color);\n        }\n \n        #commentportion button[onclick="sendcmt()"],\n        #commentportion button[onclick="loadCmt()"] {\n            background-color: var(--bg-btn);\n            color: var(--title-color);\n            border: none;\n        }\n \n        #commentportion button[onclick="sendcmt()"]:focus,\n        #commentportion button[onclick="loadCmt()"]:focus {\n            box-shadow: none;\n        }\n \n        #commentportion button[onclick="sendcmt()"]:active,\n        #commentportion button[onclick="loadCmt()"]:active {\n            background-color: var(--bg-btn);\n            color: var(--title-color);\n            opacity: 0.8;\n        }\n \n        #commentportion .sec-top {\n            border: none;\n            background-color: var(--bg-secondary-color);\n        }\n \n        .sec-top {\n            color: var(--title-color);\n        }\n \n        .sec-top span {\n            color: var(--link-color);\n        }\n \n        .sec-bot div {\n            color: var(--font-color);\n        }\n \n        .sec-bot div a {\n            color: var(--title-color) !important;\n        }\n \n        .sec-bot div span:not([onclick]) {\n            color: var(--font-color);\n        }\n \n        .sec-bot div span[onclick] {\n            color: var(--title-color);\n        }\n \n        #repcmtta {\n            background: var(--bg-color);\n            border: 1px solid var(--border-color);\n            color: var(--title-color);\n        }\n \n        #repcmtta:focus {\n            outline: none;\n        }\n \n        button[onclick="sendreply()"],\n        button[onclick="sendreply()"]:hover {\n            background-color: var(--bg-btn);\n            color: var(--title-color);\n            border: none;\n        }\n \n        button[onclick="sendreply()"]:focus {\n            box-shadow: none !important;\n            outline: none !important;\n        }\n \n        button[onclick="sendreply()"]:active {\n            background-color: var(--bg-btn) !important;\n            color: var(--title-color) !important;\n            opacity: 0.8;\n        }\n \n \n        /*home*/\n        .btn,\n        .roundblock .btngroup .btn {\n            color: var(--title-color);\n            background-color: var(--bg-btn);\n            border: none !important;\n        }\n \n        .btn:hover {\n            color: var(--title-color);\n            background-color: var(--bg-btn);\n        }\n \n        .btn:active:focus,\n        .btn:focus {\n            box-shadow: none !important;\n        }\n \n        .btn:active {\n            color: var(--title-color) !important;\n            background-color: var(--bg-btn) !important;\n            opacity: 0.8 !important;\n        }\n \n        .tusachsearcher {\n            background-color: var(--bg-secondary-color);\n            color: var(--title-color);\n            border: none;\n        }\n \n        .tusachsearcher:focus {\n            outline: none;\n        }\n \n        .tusachsearcher::placeholder {\n            color: var(--font-color);\n        }\n \n        #tusach {\n            border: none !important;\n        }\n \n        #tusach .roundblock {\n            background-color: var(--bg-secondary-color);\n            margin: 4px 0;\n        }\n \n        #tusach .roundblock .title {\n            color: var(--font-color);\n        }\n \n        div:has( > #totrans,\n        > #translated) {\n            padding: 0 !important;\n        }\n \n        #totrans,\n        #translated {\n            background: var(--bg-secondary-color) !important;\n            border: 1px solid var(--border-color) !important;\n            color: var(--title-color) !important;\n            font-size: 14px;\n            flex: 1;\n            flex-basis: unset !important;\n            margin: 0 1px;\n        }\n \n        #totrans:focus,\n        #translated:focus {\n            outline: none;\n        }\n \n        .tmc-home-section {\n            background: var(--bg-color) !important;\n            color: var(--title-color) !important;\n        }\n \n        .tmc-home-section a,\n        .tmc-home-section i {\n            color: var(--link-color) !important;\n        }\n \n        .tmc-home-section i:focus,\n        button[onclick="newrandombook()"]:focus {\n            outline: none !important;\n        }\n \n        .tmc-home-section > div > a[href] {\n            margin-top: 0 !important;\n        }\n \n        .bookthumb {\n            border: none;\n            border-radius: 4px;\n            overflow: hidden;\n            margin-bottom: 5px;\n        }\n \n        .bookthumb img {\n            transition: transform .3s ease-out, -webkit-transform .3s ease-out;\n        }\n \n        .bookthumb img:hover,\n        .bookthumb img:active {\n            transform: scale(1.1);\n        }\n \n        .bookthumb + b {\n            color: var(--title-color) !important;\n        }\n \n        .book-list-item {\n            background-color: var(--bg-secondary-color);\n        }\n \n        .book-list-item > a b {\n            color: var(--title-color) !important;\n        }\n \n        .book-list-item span.cap {\n            color: var(--font-color) !important;\n        }\n \n        /*user*/\n        #inner:has(#infobox) {\n            background-color: var(--bg-color);\n        }\n \n        #dsname ~ span {\n            color: var(--font-color) !important;\n        }\n \n        button[onclick="savenewname()"],\n        button[onclick="savenewname()"]:hover {\n            background-color: var(--bg-btn);\n            color: var(--title-color);\n        }\n \n        button[onclick="savenewname()"]:focus {\n            box-shadow: none;\n        }\n \n        button[onclick="savenewname()"]:active {\n            background-color: var(--bg-btn);\n            color: var(--title-color);\n            opacity: 0.8;\n        }\n \n \n        #infobox {\n            color: var(--title-color);\n            background-color: var(--bg-color) !important;\n        }\n \n        /*khai sinh*/\n        #infobox > span {\n            color: var(--font-color) !important;\n        }\n \n        div:has( > a[href^="/comment/"]):has( > a[href^="/nhunger/"]) {\n            border-color: var(--border-color) !important;\n            border-style: solid !important;\n            border-width: 1px 0 !important;\n        }\n \n        a[href^="/comment/"],\n        a[href^="/nhunger/"] {\n            color: var(--link-color);\n        }\n \n        a[href^="/comment/"]:hover,\n        a[href^="/nhunger/"]:hover {\n            background-color: var(--light-hover);\n        }\n \n        #tainfo {\n            border: 1px solid var(--border-color);\n            color: var(--font-color);\n            background-color: var(--bg-color) !important;\n            border-radius: 0 !important;\n        }\n \n        #tainfo:focus {\n            outline: none;\n        }\n \n        #infobox .d91 > span {\n            color: var(--font-color) !important;\n        }\n \n        div:has( > button[onclick^="dotpha"]) {\n            color: var(--font-color) !important;\n        }\n \n        button[onclick^="dotpha"]:focus,\n        button[onclick="usemany()"]:focus,\n        button[onclick="saveinfo()"]:focus,\n        button[onclick="fixactive()"]:focus {\n            outline: none;\n        }\n \n        button[onclick^="dotpha"] {\n            background: var(--bg-color);\n            color: var(--font-color);\n            border: 1px solid var(--border-color);\n        }\n \n        button[onclick="usemany()"],\n        button[onclick="saveinfo()"],\n        button[onclick="fixactive()"] {\n            position: relative;\n            top: -10px;\n            background: var(--bg-color);\n            color: var(--font-color);\n            border: 1px solid var(--border-color);\n        }\n \n        /*Book*/\n        div:has( + #ctxoverlay) {\n            background-color: var(--bg-color) !important;\n        }\n \n        #book_name2 {\n            color: var(--title-color) !important;\n            text-shadow: none !important;\n        }\n \n        #book_name2 + br + i i {\n            color: var(--font-color) !important;\n        }\n \n        #book_name2 + br + i h2 {\n            color: var(--font-color) !important;\n            font-style: normal;\n        }\n \n        .blk-top {\n            background-color: var(--bg-secondary-color) !important;\n            color: var(--title-color) !important;\n            border: 1px solid var(--border-color) !important;\n            border-bottom: 0 !important;\n            border-radius: 0 !important;\n            padding: 4px 12px !important;\n        }\n \n        .blk-top span {\n            color: var(--title-color) !important;\n        }\n \n        .blk-top span[onclick] {\n            cursor: pointer;\n        }\n \n        .blk-body {\n            background-color: var(--bg-secondary-color) !important;\n            color: var(--font-color) !important;\n            border: 1px solid var(--border-color) !important;\n            border-radius: 0 !important;\n        }\n \n        .blk-body ~ .blk-body {\n            border-top: 0 !important;\n        }\n \n        .blk-body img {\n            box-shadow: none !important;\n        }\n \n        .blk-body span {\n            color: var(--title-color) !important;\n        }\n \n        .blk-body i,\n        .blk-body a {\n            color: var(--link-color) !important;\n        }\n \n        .blk-body .listchapitem {\n            color: var(--chapter-color) !important;\n            border-bottom: 1px dashed var(--border-color);\n        }\n \n        .blk-body .listchapitem:hover {\n            color: var(--link-color) !important;\n        }\n \n        .blk-body .listchapitem.vip:before,\n        .blk-body .listchapitem.unvip:before {\n \n            filter: invert(.9);\n        }\n \n        .blk-body .chapreaded {\n            color: var(--font-color) !important;\n        }\n \n        .blk-body .chaplastreaded {\n            background-color: var(--light-hover);\n            color: var(--title-color) !important;\n        }\n \n        .blk-bot:has( > div[onclick]) {\n            color: var(--title-color) !important;\n            background-color: var(--bg-secondary-color) !important;\n            border-bottom: none !important;\n            border-radius: 0 !important;\n        }\n \n        .blk-bot div[onclick] {\n            background-color: var(--bg-btn) !important;\n        }\n \n        /**/\n        #breadcum {\n            background-color: var(--bg-secondary-color) !important;\n            color: var(--title-color) !important;\n        }\n \n        #booknameholder {\n            color: var(--title-color) !important;\n        }\n \n        #bookchapnameholder {\n            color: var(--font-color) !important;\n        }\n \n        .tm-reader-top-nav {\n            background-color: var(--bg-secondary-color) !important;\n            padding: 6px 0 !important;\n        }\n \n        #navprevtop,\n        #navnexttop,\n        #navcentertop,\n        #navprevbot,\n        #navnextbot,\n        #navcenterbot {\n            color: var(--link-color) !important;\n            padding: 0 !important;\n        }\n \n        #content-container .contentbox {\n            color: var(--font-reader-color) !important;\n            background-color: var(--bg-content-color) !important;\n        }\n \n        #content-container .contentbox span:first-child {\n            color: var(--link-color) !important;\n        }\n \n        #btnshowns,\n        #fbtn-0 {\n            background: var(--light-hover) !important;\n            box-shadow: none !important;\n        }\n \n        #btnshowns:active i,\n        #fbtn-0:active i {\n            color: var(--link-color) !important;\n        }\n \n        #btnshowns:focus,\n        #fbtn-0:focus {\n            outline: none !important;\n        }\n \n        #btnshowns i,\n        #fbtn-0 i {\n            color: var(--font-reader-color) !important;\n        }\n \n        #content-container .contentbox i[style="color: red;"] {\n            color: var(--link-color) !important;\n        }\n \n        #nsbox {\n            background-color: var(--bg-secondary-color) !important;\n            border: none;\n        }\n \n        #nsbox > .row > span {\n            background-color: var(--bg-secondary-color) !important;\n        }\n \n        #nsbox > .row > input[id] {\n            background-color: var(--bg-color) !important;\n            color: var(--title-color) !important;\n            border: none !important;\n        }\n \n        #nsbox > .row > input[id]::placeholder {\n            color: var(--font-color) !important;\n        }\n \n        #nsbox > .row > input[id]:focus {\n            outline: none !important;\n        }\n \n        #nsbox .btn.btn-info,\n        #nsbox .btn.btn-danger {\n            border-radius: 0;\n        }\n \n        #nsbox .btn.btn-danger[style^="position:"] {\n            display: none !important;\n        }\n \n        #nsbox .btn.btn-info[onclick="openmodvp()"] {\n            width: 78px !important;\n        }\n \n        #nsbox .btn.btn-danger[onclick="hideNb(this);"] {\n            background-color: var(--red-secondary) !important;\n        }\n \n        #nsbox .btn.btn-info[onclick="showAddName()"] {\n            flex: 1;\n        }\n \n        .select-editable {\n            background-color: var(--bg-color);\n            border: 1px solid var(--bg-color);\n        }\n \n        .select-editable select {\n            background-color: var(--bg-color);\n            color: var(--title-color);\n            border: none;\n        }\n \n        button[onclick="deleteName()"],\n        button[onclick^="addSuperName"],\n        button[onclick="movehantomean()"],\n        button[onclick="movemeaning()"],\n        button[onclick="g('modifyvpboxip3').value='';"],\n        button[onclick="openselectvp();"],\n        button[onclick="removeoddvp();"] {\n            border-radius: 0;\n            border: none;\n            background-color: var(--bg-btn);\n            color: var(--title-color);\n        }\n \n        button[onclick="deleteName()"]:active:focus,\n        button[onclick="deleteName()"]:focus,\n        button[onclick^="addSuperName"]:active:focus,\n        button[onclick^="addSuperName"]:focus,\n \n        button[onclick="movehantomean()"]:active:focus,\n        button[onclick="movehantomean()"]:focus,\n        button[onclick="movemeaning()"]:active:focus,\n        button[onclick="movemeaning()"]:focus,\n        button[onclick="g('modifyvpboxip3').value='';"]:active:focus,\n        button[onclick="g('modifyvpboxip3').value='';"]:focus,\n        button[onclick="openselectvp();"]:active:focus,\n        button[onclick="openselectvp();"]:focus,\n        button[onclick="removeoddvp();"]:active:focus,\n        button[onclick="removeoddvp();"]:focus {\n            box-shadow: none;\n            outline: none;\n        }\n \n        button[onclick="deleteName()"]:active,\n        button[onclick^="addSuperName"]:active,\n        button[onclick="movehantomean()"]:active,\n        button[onclick="movemeaning()"]:active,\n        button[onclick="g('modifyvpboxip3').value='';"]:active,\n        button[onclick="openselectvp();"]:active,\n        button[onclick="removeoddvp();"]:active {\n            background-color: var(--bg-btn);\n            color: var(--title-color);\n            opacity: 0.8;\n        }\n \n        select[onchange="settransmode(this.value)"],\n        select[onchange="settranslang(this.value)"],\n        #originbutton,\n        #detnamebutton {\n            background-color: var(--bg-btn) !important;\n        }\n \n        ::selection {\n            color: var(--link-color);\n            background: var(--light-hover);\n        }\n \n        .item {\n            outline: 1px solid var(--grey-primary) !important;\n            background-color: transparent;\n        }\n \n        a.item[ac="true"][onclick="openitem(this)"] {\n            outline: 1px dashed var(--red-primary) !important;\n        }\n \n        .item[l="2"]:not([tag="1"]) {\n            outline: 1px solid var(--green-primary) !important;\n        }\n \n        .item[l="3"]:not([tag="1"]) {\n            outline: 1px solid var(--blue-primary) !important;\n        }\n \n        .item[l="4"]:not([tag="1"]) {\n            outline: 1px solid var(--violet-primary) !important;\n        }\n \n        .item[l="5"]:not([tag="1"]) {\n            outline: 1px solid var(--orange-primary) !important;\n        }\n \n        .item[l="6"]:not([tag="1"]) {\n            outline: 1px solid var(--yellow-primary) !important;\n        }\n \n        .item[l="7"]:not([tag="1"]) {\n            outline: 1px solid var(--green-primary) !important;\n        }\n \n        .item[l="8"]:not([tag="1"]) {\n            outline: 1px solid var(--blue-primary) !important;\n        }\n \n        .item[l="9"]:not([tag="1"]) {\n            outline: 1px solid var(--violet-primary) !important;\n        }\n \n        a.item[l^="1"]:not([l="1"]):not([tag="1"]) {\n            outline: 1px solid var(--silver-primary) !important;\n        }\n \n        a.item[l^="2"]:not([l="2"]):not([tag="1"]) {\n            outline: 1px solid var(--yellow-primary) !important;\n        }\n \n        a.item[l^="3"]:not([l="3"]):not([tag="1"]) {\n            outline: 1px solid var(--violet-primary) !important;\n        }\n \n        a.item[l^="4"]:not([l="4"]):not([tag="1"]) {\n            outline: 1px solid var(--orange-primary) !important;\n        }\n \n        a.item[l^="5"]:not([l="5"]):not([tag="1"]) {\n            outline: 1px solid var(--red-primary) !important;\n        }\n \n        [selected] {\n            outline: 1px solid var(--red-primary) !important;\n        }\n\t\t\t\t`)}();