Dark css for tiktok desktop version.
目前為
/* ==UserStyle==
// @name Dark Tiktok | CSS
// @description Dark css for tiktok desktop version.
// @version 0.3.0
// @license MIT
@namespace https://www.tiktok.com/*
@preprocessor stylus
@var checkbox timerEnable "Subtle video timer" 1
==/UserStyle== */
@-moz-document domain("tiktok.com"){
:root {
--violent-red: #812100;
--tiktok-red: #fe2c55;
--tiktok-Text: #808080;
--Tiktok-background:black;
--debug-1:#40bd56;
--debug-2:#bd4040;
}
/* _________Background coloring_________ */
Body{
background:var(--Tiktok-background)!important;
}
[class*=DivScrollContainer-StyledScroll] {
background:var(--Tiktok-background)!important;
}
[class*=DivContentContaine], [class*=DivCommentListContainer]{
background:var(--Tiktok-background)!important;
}
/* _________Video Comment styling_________ */
[class*=DivBottomCommentContainer]{
background:var(--Tiktok-background)!important;
}
/* _________Text styling_________ */
[class*=H2ShareTitle], H2 {
color: var(--tiktok-Text)!important;
}
Body{
color: var(--tiktok-Text)!important;
}
[class*=PUserDesc], [class*=H4UserTitle], [class*=H2CountInfos],[class*=StrongText],[class*=DraftEditor],[class*=ButtonCopyLink], p, a{
color: var(--tiktok-Text)!important;
}
[class*=InputElement]{
color: var(--tiktok-Text)!important;
}
/* _________Navbar_________ */
[class*=DivHeaderWrapperMain], [class*=DivHeaderContainer]{
background:var(--Tiktok-background)!important;
}
[class*=DivHeaderCenterContainer]{
background-color:#15151547;
border-radius:10px;}
[class*=StyledIcon],[class*=StyledInboxIcon],[class*=StyledUploadIcon]{
transition: .4s ease-in-out;
}
[class*=StyledIcon]:hover,[class*=StyledInboxIcon]:hover,[class*=StyledUploadIcon]:hover{
color: var(--violent-red)!important;
}
/* _________remove Tiktok Logo_________ */
[class*=StyledLinkLogo]{display:none !important;}
/* _________remove get app area_________ */
[class*=DivBottomContainer]{display:none !important;}
/* _________Cleanup side navbar_________ */
[class*=DivDiscoverContainer],
[class*=DivFooterContainer],
[class*=DivUserContainer]:last-child{
display:none !important;}
/* _________Video_________ */
[class*=DivReportText]{background:transparent}
if timerEnable {
[class*=DivVideoControlContainer], [class*=DivVideoControlTop]{
width: 100%;
height: 24px;
padding-inline: 16px;
position: absolute;
opacity: 1;
transition: opacity 0.3s ease 0s;
bottom: 28px;
cursor: initial;
display: flex;
-webkit-box-align: center;
align-items: center;
left: 50%;
transform: translateX(-50%);
max-width: 140vh;}
[class*=DivVideoControlContainer], [class*=DivVideoControlTop]{bottom: -12px;}
[class*=DivSeekBarTimeContainer]{Display:none;}
}
.tiktok-1jxhpnd-DivContainer {
background-color:transparent;
}
/* _________Link styling_________ */
h4{
transition: .4s ease-in-out;}
h4:hover {
color: var(--violent-red)!important;}
[class*=H2MainNavText],[class*=H2ShareTitle],[class*=SpanLiked],[class*=PPost],[class*=PShowMoreText],[class*=SpanUniqueId],[class*=StrongText],[class*=DivMainContent] > h4 > a,[class*=StyledUserLinkName]
,[class*=PReplyActionText]
{
transition: .4s ease-in-out;
}
[class*=H2MainNavText]:hover,[class*=H2ShareTitle]:hover,[class*=SpanLiked]:hover,[class*=PPost]:hover, [class*=PShowMoreText]:hover,[class*=SpanUniqueId]:hover,[class*=StrongText]:hover,[class*=DivMainContent] > h4 > a:hover,[class*=StyledUserLinkName]:hover,[class*=PReplyActionText]:hover{
color: var(--violent-red)!important;
}
/* */
[class*=DivBottomCommentContainer]{
background:#171717b5!important;
margin: 0px 0px;
padding: 0px 0px;}
[class*=DivInputAreaContainer]{
background:#17171736!important;
background-color:transparent!important;
border-radius:5px;
}
[class*=DraftEditor]{
color:white;
}
[class~=comment-input-outside-container]{
filter:invert(.065);
}
[class*=DivPostButton]{
color: rgb(254, 44, 85)!important;
width:40px;
line-height: 39px;
text-align: left;
padding-left:12px;
margin-right: 4px;
}
[class*=DivHeaderWrapperMain]{
background:var(--debug-2)!important;
top:-100px;
position:absolute}
[class*=DivHeaderContainer]{
background:transparent!important;
box-shadow: 0px 1px 1px #0000;
height:0px;}
[class*=DivScrollContainer-StyledScroll]{
top:0px;
left:500px;}
[class*=DivBodyContainer]{
margin-top: 0px;}
[class*=DivHeaderRightContainer]{
position:absolute;
top:130px;
left:1300px;}
[class*=DivHeaderCenterContainer]{
right:1050px;
top:145px
}
img[src*="like"] {
filter: saturate(5);
}
img[src*="unlike"] {
filter: brightness(5) saturate(0);
}
[class*=DivLikeWrapper]{
color:#fff6;}
}