Klasyczny styl dla strony wykop.pl
Wykop Classic by stasiu
Details
Authorstasiu
LicenseNo License
Categorywykop.pl
Created
Updated
Size28 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
W ramach tego stylu będę starał się przywrócić jak najwięcej wyglądu ze starego dobrego wykopu sprzed zmian w styczniu 2023 roku.
Lista zmian
1.1.0
- poprawiono widok wykopaliska w trybie nocnym
- poprawiono szczegółowy widok wykopaliska w trybie nocnym
- poprawiono przycisk do głosowania w trybie nocnym
1.0.9
- dodano pierwsze zmiany w trybie nocnym
1.0.8
- usunięto odstępy i margines w mobilnym widoku nawigacji
- naprawiono szczegółowy widok wykopaliska bez miniatury
- naprawiono odstępy szczegółowego widoku wykopaliska na różnych szerokościach ekranu
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 Classic
@namespace userstyles.world/user/stasiu
@version 1.1.0
@description Klasyczny styl dla strony wykop.pl
@author stasiu
@preprocessor less
==/UserStyle== */
@-moz-document domain("wykop.pl") {
@comments-margin-right: 40px;
@entry-padding: 16px;
@entry-padding-mobile: 8px;
@link-block-article-padding-top: 16px;
@survey-padding-vertical: 8px;
@survey-padding-horizontal: 5px;
@survey-padding-double: @survey-padding-horizontal * 2;
/* =============================================================================== */
/* === Font ====================================================================== */
/* === This is old wykop font. Put here selectors you want this font to apply. === */
/* =============================================================================== */
section.search-input form > input,
header.header > .left > nav.main > ul li a,
header.header > .right > nav > ul > li,
aside.left-panel,
aside.tag-top > .content > header > div h1,
section.vote-box,
section.vote-box .dig button,
section.link-block > section > article > header h2,
section.link-block > section > article section.info > p,
section.link-block > section > article section.info > span,
section.link-block.detailed button.toggle-to-favourite {
font-family: Arial, "Liberation Sans", "Droid Sans", Tahoma, "Lucida Sans",
"Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana,
Helvetica, sans-serif;
}
/* ================= */
/* === Scrollbar === */
/* ================= */
::-webkit-scrollbar {
width: auto;
}
/* ============== */
/* === Header === */
/* ============== */
header.header > .right > nav > ul > li,
header.header > .left > nav.main > ul li a {
font-size: 13px !important;
font-weight: bold !important;
}
/* ================== */
/* === Left panel === */
/* ================== */
body[data-night-mode],
body:not([data-night-mode]) {
aside.left-panel {
height: calc((var(--vh, 1vh) * 100) - 48px);
top: 48px;
margin-left: 0;
border-radius: 0;
}
aside.left-panel.mobile {
top: 0;
bottom: 0;
left: 0;
}
aside.left-panel > section.links > .content ul li a {
font-size: 15px;
}
aside.left-panel > section.links > .content ul li a > span {
border-radius: 3px;
}
aside.left-panel > footer {
border-radius: 0;
top: calc(100% - 40px);
}
}
/* ================ */
/* === Wide top === */
/* ================ */
main.main > aside.tag-top.wide-top {
margin-top: 0;
}
aside.tag-top > * + * {
margin-top: 0 !important;
}
aside.tag-top > figure img {
border-radius: 0 !important;
}
aside.tag-top > .content {
border-radius: 0 !important;
}
aside.tag-top > .content > header > div h1 {
font-size: 24px !important;
font-weight: normal !important;
}
/* ================ */
/* === Vote Box === */
/* ================ */
section.vote-box .dig button {
text-transform: lowercase !important;
font-weight: normal !important;
font-size: 11px !important;
line-height: 20px;
padding: 0 !important;
width: 49px !important;
}
section.vote-box .dig p span {
font-size: 13px !important;
line-height: 34px !important;
}
/* ============== */
/* === Stream === */
/* ============== */
section.stream > .content > * + * {
margin-top: 10px !important;
}
section.stream > .content > section.entry.reply:not(:first-child) {
margin-top: 8px !important;
}
/* ============== */
/* === Avatar === */
/* ============== */
a.avatar figure img {
border-radius: 2px 2px 0px 0px !important;
}
/* ================== */
/* === Link block === */
/* ================== */
section.link-block {
border-radius: 3px !important;
a.comment-counter {
&:after {
content: " komentarzy";
white-space: pre;
}
}
}
section.link-block > section {
min-height: 175px !important;
}
section.link-block > section > article {
padding: @link-block-article-padding-top 16px 17px 236px !important;
}
section.link-block > section > article figure {
border-radius: 0 !important;
top: @link-block-article-padding-top !important;
left: 0 !important;
}
section.link-block > section > article > header {
margin-top: 0 !important;
}
section.link-block.detailed > section > article {
padding-left: 316px !important;
padding-right: 16px !important;
}
section.link-block.detailed.mobile > section > article {
padding: 0 8px 8px 8px !important;
}
body > section.is-mobile section.link-block.detailed:not(.no-thumbnail):not(.mobile) > section > article {
padding-left: 236px !important;
padding-right: 16px !important;
@media (max-width: 767px) {
padding-left: 146px !important;
}
@media (max-width: 896px) and (min-width: 768px) {
padding-left: 236px !important;
}
@media (max-width: 1024px) and (min-width: 897px) {
padding-left: 316px !important;
}
@media (max-width: 1140px) and (min-width: 1025px) {
padding-left: 146px !important;
}
}
body > section.open-left-panel:not(.is-mobile) section.link-block.detailed:not(.no-thumbnail) > section > article {
@media (max-width: 1350px) {
padding-left: 146px !important;
padding-right: 16px !important;
}
@media (max-width: 1440px) and (min-width: 1351px) {
padding-left: 236px !important;
padding-right: 16px !important;
}
}
section.link-block.detailed.no-thumbnail > section > article {
padding-left: 0 !important;
}
/* ================== */
/* === Light mode === */
/* ================== */
body:not([data-night-mode]) {
/* =============================================================================== */
/* === Font ====================================================================== */
/* === This is old wykop font. Put here selectors you want this font to apply. === */
/* =============================================================================== */
a.username span,
section.custom-sidebar > header,
section.tags ul li,
section.entry,
section.entry button,
section.entry-photo figure figcaption,
section.entry-content,
section.entry-content .wrapper button,
section.entry-voters ul,
section.rating-box > ul li,
section.rating-box > ul li.plus:before,
section.actions > ul > li,
span.comment-counter,
a.comment-counter,
footer.footer {
font-family: Arial, "Liberation Sans", "Droid Sans", Tahoma, "Lucida Sans",
"Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana,
Helvetica, sans-serif;
}
/* ============== */
/* === Button === */
/* ============== */
div.button .target, section.add-to-bucket-btn > button {
text-transform: none;
}
section > button {
color: rgb(149, 165, 166);
text-transform: none;
&:after {
background: rgb(149, 165, 166);
}
}
/* ================ */
/* === Username === */
/* ================ */
a.username span {
font-weight: bold;
}
time.date {
color: rgb(193, 195, 196);
}
/* ================ */
/* === Wide top === */
/* ================ */
main.main > aside.tag-top.wide-top {
border-bottom: 1px solid rgb(218, 226, 228);
border-left: 1px solid rgb(229, 234, 236);
border-right: 1px solid rgb(229, 234, 236);
}
aside.tag-top > .content {
background: rgb(248, 250, 251);
}
aside.tag-top > .content > header > div h1 {
color: rgb(0, 0, 0);
}
/* ================ */
/* === Vote Box === */
/* ================ */
section.vote-box .dig {
button {
border: 1px solid #3b6f92;
}
&:hover {
opacity: initial;
button {
background-color: #4b8bb7;
}
}
}
/* ================== */
/* === Link block === */
/* ================== */
section.link-block {
box-shadow: none;
border-bottom: 1px solid rgb(218, 226, 228);
border-left: 1px solid rgb(229, 234, 236);
border-right: 1px solid rgb(229, 234, 236);
a.comment-counter {
color: #c1c3c4;
&:before {
background: #c1c3c4;
}
}
section.actions > ul > li.tag {
...