Changes default CSS for both light/dark theme
Mój styl wykop.pl by wojtekxtx
Details
Authorwojtekxtx
LicenseMIT
Categorywykoppl
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Currently only light-mode is usable. Dark mode is in the works.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Wykop mod by wojtekxtx
@version 1.0
@namespace userstyles.world/user/wojtekxtx
@description Stylowanie, jakie pokochali użytkownicy
@author wojtekxtx
@license MIT
==/UserStyle== */
@-moz-document domain("wykop.pl") {
[data-night-mode],
[data-night-mode] aside.left-panel>section.links>.content ul li.bucket.new:after,
[data-night-mode] header.header>.right>nav>ul>li>a.new:after,
[data-night-mode] li.account>a>a {
--whitish: #7c7b7b;
--porcelain: #1c1c1c;
--steelBluish: #9292c1;
--gullGray: #696c6c;
--tuna: #7b8dd8;
--abbey: #c4c8c9;
--squeeze: rgba(var(--blackishRGB), 0.025)
}
[data-night-mode] article.link-article,
[data-night-mode] aside.left-panel>section.buttons>.content ul li a:before,
[data-night-mode] ul.menu-dropdown,
[data-night-mode] section.editor>header>ul>li.lenny-face ul.menu-dropdown {
border: 1px var(--whitish) thin;
}
[data-night-mode] .form-elements p:not(.popper).or span,
[data-night-mode] aside.profile-top>section>figure,
[data-night-mode] header.header>.right>nav>ul>li.dropdown>section,
[data-night-mode] header.header>.right>nav>ul>li.dropdown>ul,
[data-night-mode] li>section section.notifications>.stream>.content>.notify,
[data-night-mode] li>section section.notifications>.stream>.content>.read,
[data-night-mode] li>section section.stream>.content,
[data-night-mode] li>section section.stream>.content>section,
[data-night-mode] li>section section.stream>.content>section.item:hover,
[data-night-mode] section.editor>header>ul>li.lenny-face ul.menu-dropdown li:hover,
[data-night-mode] section.editor>header>ul>li.lenny-face ul.menu-dropdown li:hover:nth-child(2n),
[data-night-mode] section.entry.reply:nth-child(odd),
[data-night-mode] section.notifications section.stream>.content>section.notify:before,
[data-night-mode] section.search-input form>input[type=search],
[data-night-mode] section.user-info,
[data-night-mode] ul.dropdown:not(.clear-styles) ul.actions {
background: #9292c1 !important
}
[data-night-mode] header.header {
background: #3c3c3c !important;
color: #0000 !important
}
[data-night-mode] header.header>.left>nav.main>ul li a+strong {
background: #f75e2c;
-webkit-box-shadow: 1px var(--gullGray);
box-shadow: 1px #9292c1;
}
[data-night-mode] li.home.active span {
color: #3c3c3c !important
}
[data-night-mode] .switch label strong i:nth-child(2),
[data-night-mode] header.header>.left>nav.main>ul li.active a,
[data-night-mode] header.header>.right>nav>ul>li.dropdown>a:hover,
[data-night-mode] section.entry-content .wrapper button,
[data-night-mode] section.entry-content .wrapper button:hover {
background: #505050 !important
}
[data-night-mode] section.search-input form>label {
background: #c4c8c9
}
[data-night-mode] section.search-input form>input[type=search]::placeholder {
color: #c4c8c9
}
[data-night-mode] section.entry-content .wrapper a {
color: #72aed8
}
[data-night-mode] section.entry>article>header>div.right>div span {
display: inline-block
}
[data-night-mode] section.entry>article>header>div.right>div span time {
color: #767676
}
[data-night-mode] li.reply {
color: #767676 !important
}
[data-night-mode] li.reply:hover {
color: #cad0d0 !important
}
[data-night-mode] li.reply::after,
[data-night-mode] li.reply::before {
background: #767676 !important
}
[data-night-mode] li.favourite path.border {
fill: #767676 !important
}
[data-night-mode] header>.right path {
fill: #cad0d0
}
[data-night-mode] .right .username>span {
font-weight: 700;
font-size: 14px
}
[data-night-mode] .last .username>span {
font-size: 12px;
color: #7b7b7b !important
}
[data-night-mode] li.account>ul>li:hover a,
[data-night-mode] li>section section.notifications>.stream>.content>.notify:hover,
[data-night-mode] section.entry.reply>article,
[data-night-mode] section.notifications section.stream>.content>section.notify:hover:before,
[data-night-mode] ul.dropdown:not(.clear-styles) ul.actions li:hover {
background: rgba(var(--blackishRGB), .025) !important
}
[data-night-mode] li>section section.stream>.content>section.item:not(.unread) {
opacity: 1
}
[data-night-mode] header.header>.right>nav>ul>li.dropdown.active>a,
[data-night-mode] header.header>.right>nav>ul>li.dropdown.active>a:hover {
background: rgba(255, 255, 255, .2)
}
[data-night-mode] section.editor,
[data-night-mode] section.editor.inner,
[data-night-mode] section.editor:focus-within {
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important
}
[data-night-mode] section[data-label^="ad: "] {
display: none !important
}
[data-night-mode]::-webkit-scrollbar {
width: auto
}
[data-night-mode] section.entry,
[data-night-mode] section.entry:hover {
-webkit-box-shadow: none !important;
box-shadow: none !important
}
[data-night-mode] section.entry>.comments {
margin: 22px 0 0 32px
}
[data-night-mode] .v--modal-box,
[data-night-mode] section.modal>footer {
background-color: #2c2c2c
}
[data-night-mode] section.file .upload.over,
[data-night-mode] section.file .upload:hover {
background: #313131 !important
}
[data-night-mode] article.link-article>footer:before,
[data-night-mode] section.entry-photo figure:after {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--whitishRGB), 0)), to(#1c1c1c));
background: linear-gradient(to bottom, rgba(var(--whitishRGB), 0) 0, #1c1c1c 100%) !important
}
[data-night-mode] section.entry-content .wrapper code {
border: 1px solid #1c1c1c;
background: #1c1c1c
}
[data-night-mode] section.entry>article:hover,
[data-night-mode] section.link-block>section>article section.info>span:after {
background: 0 0
}
[data-night-mode] .entries-sidebar a time.date,
[data-night-mode] .entry-voters a.username,
[data-night-mode] section.entry-voters ul,
[data-night-mode] section.entry-voters ul li a.username span,
[data-night-mode] section.settings-page>nav ul li a,
[data-night-mode] section.settings-page>nav ul li+li a {
color: #7b7b7b
}
[data-night-mode] li.account>ul>li:last-of-type a,
[data-night-mode] section.embed-ghost {
border-top: 1px solid #1c1c1c
}
[data-night-mode] .form-elements p:not(.popper).or:before {
background: #424f59 !important
}
[data-night-mode] section.entry.reply:nth-child(odd).highlighted {
background: rgb(60 60 60)
}
[data-night-mode] .switch input:checked+label strong i:first-child,
[data-night-mode] section.entry.reply.highlighted,
[data-night-mode] section.entry-stream-skeleton>.comments>article:nth-child(odd) {
background: #3c3c3c !important
}
[data-night-mode] .edit-wrapper>.content>section.entry-content>.wrapper blockquote,
[data-night-mode] .phone input,
[data-night-mode] .settings-page input,
[data-night-mode] .settings-page select,
[data-night-mode] .settings-page textarea,
[data-night-mode] section.editor>header>ul>li.lenny-face ul.menu-dropdown,
[data-night-mode] section.editor>header>ul>li.lenny-face ul.menu-dropdown li:nth-child(2n) {
background: #1c1c1c !important
}
[data-night-mode] section.editor>header>ul>li.lenny-face ul.menu-dropdown,
[data-night-mode] section.editor>header>ul>li.lenny-face ul.menu-dropdown {
height: auto
}
[data-night-mode] section.entry-voters ul {
padding: 0 0 0 60px
}
[data-night-mode] button.toggle-to-favourite:not(.active) .svg-inline svg .body,
[data-night-mode] section.entry.reply:nth-child(odd):not(.highlighted)>article .edit-wrapper>footer section.actions button.toggle-to-favourite:not(.active) .svg-inline svg .body {
fill: #313131
}
[data-night-mode] section.entry.reply.highlighted .edit-wrapper>footer section.actions button.toggle-to-favourite:not(.active) .svg-inline svg .body {
fill: #414141 !important
}
[data-night-mode] section.entry>.comments+section.editor,
[data-night-mode] section.entry>section.editor {
margin: 6px 0 9px 31px;
width: calc(100% - 23px);
background: #1c1c1c
}
[data-night-mode] .messages-page section.entry-content .wrapper blockquote,
[data-night-mode] section.entry-content[data-v-725caa02] .wrapper code,
[data-night-mode] .phone .vue-tel-input,
[data-night-mode] section.entry>section.editor textarea,
[data-night-mode] section.violations-block>section {
background: #1c1c1c
}
[data-night-mode] section.entry-content[data-v-725caa02] .wrapper code {
border: none
}
[data-night-mode] aside.tag-top>.content>header aside ul li:before {
background: #cad0d0 !important
}
[data-night-mode] .vue-simple-spinner {
border-color: #cad0d0 #2c2c2c #2c2c2c !important
}
[data-night-mode] .entry.reply section.entry-photo figure,
[data-night-mode] .entry.reply section.entry-photo figure figcaption {
background: #313131 !important;
border: none !important
}
[data-night-mode] .entry section.entry-photo figure,
[data-night-mode] .entry section.entry-photo figure figcaption {
background: #2c2c2c !important;
border: none !important;
color: var(--tuna)
}
[data-night-mode] .editor.expand.inner .switch label strong i:first-child {
background: #2c2c2c
}
[data-night-mode] .links>.content .buckets>.bucket:after,
[data-night-mode] .messages-page section.message>article.me>div.content,
[data-night-mode] .notifications.dropdown>a:after {
border: none !important
}
[data-night-mode] section.link-block {
box-shadow: 0 0 0 1px #1c1c1c !important;
-webkit-box-shadow: 0 0 0 1px #1c1c1c !important
}
[data-night-mode] section.settings-page>nav ul li a:before {
background: #7b7b7b
}
[data-night-mode] section.images figure.bac...