// ==UserScript==
// @name Dark STV
// @namespace sangtaviet
// @version 5.6
// @description Remake item for SangTacViet
// @author @Undefined & @Jann
// @license GPL-3.0
// @icon64 https://sangtacviet.vip/favicon.png
// @match *://sangtacviet.vip/*
// @exclude *://sangtacviet.vip/surf.php
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
const css = `
:root {
--bg-item: #1d1d1d;
--bg-dark-darker: #101010;
--bg-dark: #121212;
--bg-darker: #1d1d1d;
--bg-opacity: #00000030;
--color: #e0e0e0;
--color-secondary: #b1b1b1;
--bg-secondary: #7f8c8d;
--primary-red: #ff5733;
--primary-red-dark: #432823;
--border-button: #676767;
}
html.touch *:hover {
all: unset !important;
}
#dlnametbcontent,
#upnamewd {
background-color: var(--bg-dark) !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: var(--color) !important;
}
.bg-light {
background-color: var(--bg-dark) !important;
}
.bg-dark {
background-color: var(--bg-dark) !important;
}
.table {
color: var(--color) !important;
border-collapse: collapse !important;
}
.table-light,
.table-light > td,
.table-light > th {
background-color: var(--bg-dark) !important;
}
table.dataTable tbody tr {
background-color: var(--bg-dark) !important;
}
.table-hover tbody tr:hover {
color: var(--color) !important;
background-color: var(--bg-darker) !important;
}
.table-light tbody + tbody,
.table-light td,
.table-light th,
.table-light thead th {
border-color: 1px solid var(--border-button) !important;
}
#share-option {
color: var(--color) !important;
background-color: var(--bg-darker) !important;
}
.dropdown-item:focus,
.dropdown-item:hover {
color: var(--color) !important;
background-color: var(--bg-dark) !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
background: var(--bg-dark) !important;
color: var(--color) !important;
}
.t-blue,
.text-dark {
color: var(--color) !important;
}
.t-gray {
color: var(--color-secondary) !important;
}
.badge-secondary {
color: var(--color) !important;
background-color: var(--bg-dark) !important;
}
.selected {
border-color: var(--primary-red) !important;
}
div[style*='color'] {
color: var(--color) !important;
}
div[style*='background-color: #ffffff;']:not(#thumb-lay) {
background-color: var(--bg-dark) !important;
background: var(--bg-dark) !important;
}
#book_name2 {
text-shadow: none !important;
}
div:has(> a[href*='the-luc']) {
gap: 1px !important;
}
a[href*='the-luc'],
a[onclick='leavefaction()'] {
background-color: var(--bg-dark) !important;
color: var(--color) !important;
flex-basis: 33% !important;
}
.sticky {
z-index: 9999 !important;
}
.shadow-lg {
box-shadow: none !important;
}
.card-header {
border-bottom: 1px solid var(--border-button) !important;
background-color: var(--bg-darker) !important;
}
#sidebar #comment-box .card-header {
border: 1px solid var(--bg-dark) !important;
}
#commentpane > #commentportion {
background: var(--bg-dark-darker) !important;
}
#commentportion {
background-color: var(--bg-dark-darker) !important;
background: var(--bg-dark-darker) !important;
color: var(--color) !important;
}
#commentportion .sec-bot {
color: var(--color) !important;
}
#commentportion .sec-top {
background-color: var(--bg-darker) !important;
color: var(--color) !important;
}
#commentportion button {
border: 1px solid #454545 !important;
}
.blk {
border: 1px solid var(--bg-dark) !important;
border-color: var(--border-button) !important;
}
.blk-top {
background: var(--bg-darker) !important;
color: var(--color) !important;
border-top: none !important;
}
.blk-body {
background: var(--bg-darker) !important;
color: var(--color) !important;
border: none !important;
}
.blk-body .blk-content {
color: var(--color) !important;
}
.blk-bot {
background: var(--bg-darker) !important;
color: var(--color) !important;
border: none !important;
padding-bottom: 5px !important;
}
.blk-arr {
background: var(--bg-darker) !important;
}
.blk-arr::before {
border-color: transparent transparent var(--bg-darker) transparent !important;
}
#tm-p-search-top + div {
background: var(--bg-darker) !important;
}
#tm-p-search-top + div .nb:hover {
background: var(--bg-dark) !important;
}
.page-link {
background: var(--bg-dark) !important;
}
.page-item.active .page-link {
border-color: var(--primary-red) !important;
}
.input-group-text {
background: var(--bg-dark-darker) !important;
color: var(--color) !important;
border: none !important;
}
.seloption:hover {
background: var(--bg-dark) !important;
}
a {
color: var(--color) !important;
}
a:hover {
color: var(--primary-red) !important;
}
a.text-dark:focus,
a.text-dark:hover {
color: var(--primary-red) !important;
}
#clicktoexp,
div[onclick='renewchapter(true);'] {
color: var(--color) !important;
background-color: var(--bg-dark) !important;
}
#commentpagebtn {
background-color: var(--bg-darker) !important;
}
#tabbar > #bookpagebtn,
#tabbar > #otherpagebtn,
#tabbar > #personpagebtn,
#tabbar > #commentpagebtn {
border: none !important;
}
#tabbar {
background-color: transparent !important;
}
#tabbar > div.active {
color: var(--color) !important;
border-bottom: 2px solid var(--bg-darker) !important;
}
#tabbar.sticked {
border: none !important;
}
.chaplastreaded {
background-color: var(--primary-red-dark) !important;
}
/* .listchapitem */
.chapreaded {
color: var(--color-secondary) !important;
}
#namewdf {
background-color: var(--bg-dark) !important;
}
.namepack .name {
color: var(--color) !important;
}
.section {
background-color: var(--bg-darker) !important;
border: none !important;
margin: 2px 0 !important;
}
label.open-modal {
color: var(--color-secondary) !important;
}
.bkr {
color: var(--color) !important;
}
.nowr:hover {
background-color: var(--bg-darker) !important;
}
.slider.round {
background-color: var(--bg-dark) !important;
border: 1px solid var(--color-secondary) !important;
}
input:checked + .slider {
background-color: var(--primary-red-dark) !important;
}
div[style*='background: #f7f7f7;'] {
background-color: var(--bg-dark) !important;
}
i.section-thumb img {
border-radius: 0 !important;
}
button,
div[onclick='openfilter()'],
div[channel],
#toolbar button,
a[href='javascript:supernamewindow()'],
a[href='javascript:khonamewindow()'],
a[href='javascript:namepackwindow()'],
a[href='javascript:opensettingwindow()'],
a[href='javascript:openitemwindow()'] {
color: var(--color) !important;
background-color: var(--bg-darker) !important;
color: var(--color) !important;
border-color: var(--border-button) !important;
}
.rd-tag {
color: var(--color) !important;
background-color: var(--bg-dark) !important;
}
.rd-tag[onclick] {
color: var(--color) !important;
background-color: var(--bg-darker) !important;
}
#tabbar > div.active {
background-color: var(--primary-red-dark) !important;
border-left: 2px solid var(--primary-red) !important;
}
#tabdiv > div > a {
background-color: var(--bg-dark) !important;
}
.hover-darken.w:hover {
background-color: var(--primary-red-dark) !important;
}
.hover-darken:hover {
filter: unset !important;
}
textarea,
input,
select {
background-color: var(--bg-darker) !important;
border: 1px solid var(--border-button) !important;
color: var(--color) !important;
}
textarea::placeholder,
input::placeholder,
select::placeholder {
color: var(--color-secondary) !important;
}
button,
textarea,
input,
select {
outline: none !important;
box-shadow: none !important;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background-color: var(--bg-darker) !important;
}
::-webkit-scrollbar-thumb {
background-color: var(--bg-secondary) !important;
}
#tm-bot-nav::-webkit-scrollbar {
height: 2px !important;
}
body {
font-family: nunito !important;
color: var(--color) !important;
background-color: var(--bg-dark) !important;
}
#full,
#inner {
background-color: var(--bg-dark) !important;
min-height: 100vh;
}
div[style*='background: #f7f7f7'] {
background-color: var(--bg-dark) !important;
}
#pushbg {
background: var(--bg-dark) !important;
}
div:has(> #tabdiv) {
background: var(--bg-dark) !important;
}
#tm-top-nav {
background-color: var(--bg-dark) !important;
}
#tm-top-nav .container,
#tm-top-nav a {
color: var(--color) !important;
}
#logo-stv {
color: var(--color) !important;
font-weight: bold !important;
font-size: 50px !important;
padding-left: 15px !important;
font-style: italic !important;
}
#notifmarker {
color: var(--color) !important;
}
#tm-user-avatar {
box-shadow: none !important;
}
input#id {
border-radius: 10px !important;
}
input#id:focus {
background-color: var(--bg-darker) !important;
border-radius: 10px !important;
}
#searchbox {
display: none !important;
}
#tm-btn-rescan,
#tm-btn-goto {
color: var(--color) !important;
background: transparent !important;
}
#tm-bot-nav {
background-color: transparent !important;
box-shadow: none !important;
text-align: center !important;
}
#naviga a {
color: var(--color) !important;
}
#inner > div[data-nosnippet].container {
border-left: 4px solid var(--primary-red) !important;
color: var(--color) !important;
background-color: var(--bg-darker) !important;
border-radius: 0 10px 10px 0 !important;
text-align: center !important;
}
.tm-reader-top-nav {
background: transparent !important;
border: 1px solid var(--border-button) !important;
border-width: 1px 0 !important;
}
#nsbox {
background: var(--bg-darker) !important;
border: 1px solid transparent !important;
}
#nsbox button,
#nsbox input {
margin: 1px;
}
button[onclick='showAddName()'] {
flex-grow: 1 !important;
}
#nsbox span[style*='background:green;'] {
background: var(--bg-darker) !important;
}
a.bg-light:focus,
a.bg-light:hover,
button.bg-light:focus,
button.bg-light:hover {
background-color: var(--bg-darker) !important;
}
.tusachsearcher {
border: 1px solid var(--bg-darker) !important;
background-color: var(--bg-darker) !important;
}
#tusach {
border: 1px solid var(--bg-darker) !important;
}
.roundblock {
background-color: var(--bg-darker) !important;
}
.roundblock .title {
color: var(--color) !important;
}
.roundblock .btngroup .btn {
background-color: var(--bg-dark) !important;
}
.d-md-block:has(> div > #totrans) {
display: flex !important;
max-height: 100% !important;
}
div:has(> #totrans) {
flex-grow: 1 !important;
padding-bottom: 8px !important;
flex-wrap: nowrap !important;
}
#totrans {
margin-right: 1px !important;
}
#menunavigator2 {
background-color: var(--bg-dark-darker) !important;
box-shadow: none !important;
z-index: 999999999999999;
}
#menunavigator2 a {
color: var(--color) !important;
padding: 0 6px !important;
}
#menunavigator2 ul span {
margin: 0 !important;
}
#menunavigator2 li:hover {
background-color: var(--bg-dark) !important;
}
#inner .tmc-home-section {
background: var(--bg-darker) !important;
margin-top: 20px !important;
border-radius: 16px;
color: var(--color) !important;
}
#inner .cap {
color: var(--color) !important;
font-family: nunito !important;
}
.bookthumb {
border: 2px solid transparent !important;
}
#tm-credit-section {
background-color: var(--bg-dark) !important;
}
#btnshowns {
background: #00000080 !important;
}
.fa-cogs.fas {
color: #ffffff80 !important;
}
.modal-content {
background-color: var(--bg-darker) !important;
}
.modal-header {
border-bottom: 1px solid var(--color-secondary) !important;
}
.modal-footer {
border-top: 1px solid var(--color-secondary) !important;
}
.noti {
border: 1px solid var(--color-secondary) !important;
}
#tm-credit-section {
height: 100px !important;
}
#tm-credit-text {
display: none !important;
}
#inner > div:nth-of-type(2) {
background: var(--bg-dark) !important;
color: var(--color) !important;
}
.actor .time {
color: var(--color-secondary) !important;
}
.actor > div:nth-child(3) {
color: var(--bg-dark) !important;
}
.actor .btag {
color: var(--bg-dark) !important;
background: var(--color) !important;
mix-blend-mode: unset !important;
}
#userpage .anh-bia {
background: none !important;
}
#userpage .user-home {
background: var(--bg-darker) !important;
}
#userpage .user-info-text {
color: var(--color) !important;
}
.user-sign-text.nip {
background-color: var(--bg-dark-darker) !important;
}
#userpage .user-stat .stat-title {
color: var(--color) !important;
font-weight: bold;
}
#userpage .stat-row span:first-child {
color: #a5a5a5 !important;
}
#userpage .stat-row span:nth-child(2) {
color: var(--color) !important;
font-weight: bold;
}
#ctxoverlay .contextmenu {
background-color: var(--bg-darker) !important;
color: var(--color) !important;
}
#userpage .tab-nav .tab-item.active {
background-color: var(--bg-dark-darker) !important;
color: var(--color) !important;
}
#userpage .tab-nav {
border: none !important;
}
.progress:has(.progress-bar.progress-bar-striped.bg-success) {
background-color: var(--bg-dark-darker) !important;
}
.progress-bar.progress-bar-striped.bg-success {
background-color: #4936ff !important;
color: var(--color) !important;
}
.progress-bar.progress-bar-striped.bg-success + span {
color: var(--color) !important;
}
.itemname {
color: #a096ff !important;
}
#nhunger-page {
background-color: var(--bg-dark-darker) !important;
}
.nb:hover {
background-color: var(--bg-darker) !important;
}
#item-page {
background-color: var(--bg-dark-darker) !important;
}
#item-page ul li {
color: #a5a5a5 !important;
}
.window {
font-family: nunito !important;
color: var(--color) !important;
background: var(--bg-opacity) !important;
}
.window .head {
background-color: var(--bg-darker) !important;
}
.window .body {
background-color: var(--bg-dark-darker) !important;
}
.window button.red {
background: #832020 !important;
border: none !important;
}
.window button.green {
background: #49832e !important;
border: none !important;
}
.window button {
background: var(--bg-dark-darker) !important;
border: none !important;
}
#friendlist-page {
background-color: var(--bg-dark-darker) !important;
}
#friendlist-page .friend {
border-bottom: 1px solid var(--bg-darker) !important;
}
#friendlist-page .friend:hover {
background-color: var(--bg-darker) !important;
}
#friendlist-page .friend img {
border: none !important;
}
.chat-box {
height: 460px !important;
}
.chat-msg .chat-msg-content {
background-color: var(--primary-red-dark) !important;
}
.chat-input-text {
background-color: var(--bg-dark-darker) !important;
}
#channelsmenu {
background-color: var(--bg-darker) !important;
}
.sticked {
border: none !important;
}
#content-container .contentbox {
background-color: var(--bg-darker) !important;
}
#navprevbot,
#navnextbot,
#navcenterbot {
padding: 0 !important;
}
#totranslate,
#maincontent {
background-color: var(--bg-darker) !important;
}
`;
GM_addStyle(css);
document.querySelector('#tm-nav-search-logo').parentElement.innerHTML = `<span id='logo-stv'>STV</span>`;
})();