/* ==UserStyle==
@name Kijiji Dark
@version 1.0.4
@author Hussein Esmail
@description `A dark theme for the website https://kijiji.ca`
@namespace https://github.com/hussein-esmail7/userstyles
@homepageURL https://github.com/hussein-esmail7/userstyles
@supportURL https://github.com/hussein-esmail7/userstyles/issues
@updateURL https://raw.githubusercontent.com/hussein-esmail7/userstyles/main/src/dark_kijiji.user.css
==/UserStyle== */
@-moz-document domain("kijiji.ca") {
:root {
--color-bg: #1A1A1B; /* Default background color */
--color-fg: #f8f8f8; /* Default text color */
--color-bg-secondary: #2e2e2e;
--color-bg-secondary: #2e2e2e;
--color-bg-active: #333333;
--color-bg-footer: #3e3e3e;
--color-fg-secondary: #c4c4c4;
--color-link: #32A7FF;
--color-link-hover: #328ED3;
--color-avatar: lightblue;
--color-bg-button: #6d6dee;
--color-bg-button-alert: #d54f4f;
color-scheme: dark; /* Used to get dark scroll bars */
}
html,
body,
div,
fieldset,
section,
.fes-pagelet,
.mainPageContent,
#MainContainer,
.sticky-inner-wrapper,
#SearchLocationPicker,
button,
a[class^="shareLink"],
table,
div.top-feature-bottom-bar,
li,
li[class^="selectedCategoryListItem"],
main,
nav,
tr,
time,
.container-346951201,
.container-4289908283, /* Ads on homepage */
.searchBar-3410584230
{
background-color: var(--color-bg) !important;
}
html,
body,
div,
fieldset,
label,
h1, h2, h3, h4, h5, h6,
[itemprop="name"],
li[class^="currentCrumb"],
span,
svg,
strong,
header,
h1[class^="headerTitle"],
div[class^="headerContainer"] *,
button[data-testid="pill-option"],
button[type="submit"]
{
color: var(--color-fg) !important;
}
.headerContainer-471773205
{
color: var(--color-bg) !important;
}
[class^="radioLabelDescription"],
.small-print,
[class^="postingLocationTip"],
[class^="postingLocationContent"]
{
color: var(--color-fg-secondary) !important;
}
textarea,
input,
select,
.checkbox-label,
div[class^="defaultMessages"],
div[class^="container__success"],
button[class^="searchSubmit"],
button[class^="titleButton"],
div[class^="outerWrapper"],
li.highlight,
.button-task,
.file-upload-button,
div[class^="mergedPillWrapper"] *,
.pageButton-1493263986 /* Page button */
{
background-color: var(--color-bg-secondary) !important;
color: var(--color-fg) !important;
}
div[class^="generalOverlay"],
div[class^="editButtonContentWrapper"],
div[class^="previewContent"],
div[class^="column"],
div[class^="scrollToContainer"],
button[class^="scrollToButton"],
button[aria-label="My Account"],
div[class^="socialMediaIcons"],
a[aria-label="Notifications"],
button[class^="favouriteButton"],
svg[class^="favouriteButtonIcon__default"],
div.fes-favourite,
div.fes-pagelet,
div[data-fes-id^="favouriteButton"],
[class^="logo"],
div[class^="text__fullBleed"],
.filterButtonCounter-2365943836 /* Ad count in Active/Inactive tabs on My Ads page */
{
background-color: transparent !important;
}
a:link,
[role="link"],
a[tabindex="0"],
a.tabLink-189954566 /* Profile page tab links */
{
color: var(--color-link) !important;
}
a:link:hover,
[role="link"]:hover,
a[tabindex="0"]:hover,
.editSaveButton-3459322140:focus,
.editSaveButton-3459322140:hover,
.deleteLink-2900055035:hover,
.link-2543719473:hover
{
color: var(--color-link-hover) !important;
text-decoration: none !important;
}
footer,
footer > *,
header,
div[class^="menuWrapper"],
div[class^="nameL1"],
li.menuItemL1-3907961876 /* Homepage categories tabs */
{
/* For the header and footer and all elements inside them */
background-color: var(--color-bg-footer) !important;
}
div[class^="cardContainer"]
{
border: 5px var(--color-fg-secondary) !important;
border-style: solid;
}
div[class^="avatar"]
{
border: 1px var(--color-link) solid;
}
div[class^="text__fullBleed"] > *
{
/* Places where black text is still required */
color: black !important;
}
button[data-qa-id="adPromoteButton"] *,
a[data-qa-id="header-link-post-ad"],
button[class^="actionButton"],
a#browseKijiji,
button[type="submit"],
div[class^="messageRow"] *
{
/* Buttons with coloured background like the Post and Repost buttons */
background-color: var(--color-bg) !important;
border: 1px solid var(--color-link) !important;
}
button[data-qa-id="adRepostButton"],
button[data-qa-id="adRepostButton"] *
{
/* Repost buttons will be red because it requires your attention (and has a deadline) */
background-color: var(--color-bg-button-alert) !important;
}
span[class^="promoteButtonTextTablet"]
{
background-color: transparent !important;
}
.container__success-2527921021,
.container__tip-199291752,
.myAdsLeaderboard-2491395477,
a.adChoices-1817877223, /* AdChoices button on homepage */
.fadeOut-1831393242,
div.L1MoveLinkWrapper-2968708715, /* Kijiji Auto URL on homepage menubar */
.moduleWrapper-4029973050, /* Self-advertisement at top of homepage */
.top-feature-bottom-bar, /* Related to ads on a search results page */
div.search-item.embedded, /* Ad to promote your own ad */
div.container-results table.utility-row, /* Ad promotion prices */
div.container-results div.inline-banner, /* Ad in search results */
.promoteAd-3470154555, /* Ad to promote ads on My Ads page */
.searchIcon-1865170271, /* Search icon in search bar on My Ads page */
.headerContainer-471773205:before, /* Line at very top of page */
.button__active-3917108357:after, /* Green underline for selected */
div[class^="shareLinkBar"], /* Social media share buttons */
.detailsContainer-3691285501, /* Promote Ad options at the top of your own ad's page */
.performanceIcon-3760865162, /* Uneccessary icon beside "My Ad's Status" text */
button[data-qa-id="adPromoteButton"],
svg[aria-labelledby^="icon-edit-title"],
svg[aria-labelledby^="icon-delete-title"],
.soldIcon-1743761422, .statsIcon-1743761422,
.externalLink-548392708,
.separator-1183999717,
div#StickyBottomBar
{
/* Hidden elements */
/* 2527921021: "Ad has been successfully reposted" banner popup */
/* 199291752: "Ad should be reposted within # days" banner */
display: none !important;
}
.showMoreButton-2571466895
{
background-color: red !important;
}
section header.widget-header /* "Current Matches" item on sidebar */
{
padding-left: 5px !important;
}
.copyright-2418027893, /* All Rights Reserved text */
footer div div ul li.columnItem-372683642, /* List items in footer column */
.title-698598903,
.wrapper-1943089324,
.safetyText-133708707,
.container-191245672, /* Price radio buttons */
.controlRow-3158116936, /* Extra space below Title input */
#MainForm .container-info ul.post-ad-layout,
.input-1276203865 /* Ad title and tags input boxes */
{
margin: 0px;
}
.image-192629248, /* Images on ads on homepage */
button[type="submit"]
{
border: none;
}
.myAdsTable-2912248069 tbody tr /* To make My Ads page more compact */
{
row-gap: 5px !important;
}
.search-966517926, /* Search bar on My Ads page */
.button__medium-1066667140 /* Active/Inactive tab buttons on My Ads page */
{
padding: 0;
height: inherit;
}
.button__active-3917108357 * /* Selected button of Active/Inactive on My Ads page */
{
background-color: var(--color-bg-active) !important;
}
nav div ul li a
{
padding: 0 !important;
padding-left: 5px !important;
padding-right: 5px !important;
margin: 0 !important;
}
.tabListItem-3110987691
{
align-items: unset !important
}
.tabLink-189954566,
.locationModalTrigger-555572005
{
height: unset;
}
.headerContainer-4071916628,
.input-2398582227, /* Ad title and tags input boxes */
.input-485887610, /* Condition select box */
.tabLink-189954566, /* Tab bar for profile (Ads/Messages/Favs/etc.) */
.myAdsHeadingContainer-1233939527, /* "My Ads" title on My Ads page */
.itemAttributeList-1090551278,
footer div.linkContainer-2510787684, /* First section of footer */
footer div.linkContainer-2510787684 div, /* Columns */
.copyright-2418027893, /* All Rights Reserved text */
.menuListL1-3326828024, /* Homepage categories tab */
li.menuItemL1-3907961876, /* Homepage categories tabs */
section header.widget-header, /* "Current Matches" item on sidebar */
aside.sidebar-759360815, /* Right sidebar on homepage */
.breadcrumbs-320621489,
.safetyWarningContainer-148731728,
.label-2246511109
{
padding: 0px !important;
}
.input-2398582227, /* Ad title and tags input boxes */
.input-485887610 /* Condition select box */
{
padding-left: 5px;
}
a.tabLink__selected-1951076254 /* Selected tab on profile page */
{
background-color: var(--color-bg-active);
border-bottom: none;
}
div[class^="mapContainer"],
ul.post-ad-layout li#WebsiteUrl, /* Add website for $5 near photo browse */
ul.post-ad-layout li label[for="YouTubeURL"], /* Add YouTube video near photo browse */
.bottomToolTipContainer-945034715, /* "Don't see the city you want to post in?" block */
svg.icon-459822882.icon-791659943.itemIcon-690035833.dropdownSelectedIcon-2556449783 /* Uneccessary categories icon in search bar */
{
display: none;
}
@media (min-width: 760px) {
.selectPostingLocationContainer-798311495,
.postingLocationContainer-809359957
{
padding: 0px;
}
}
.input-2398582227, /* Ad title and tags input boxes */
.input-485887610 /* Condition select box */
{
height: 30px;
}
.arrowIcon-909064759 /* Condition select box arrow */
{
height: 30%;
bottom: unset;
}
.moduleContainer-3330263826, /* Sections of ad post */
.myAdsHeadingContainer-1233939527,
.myAdsPage-2053857446
{
margin-top: 0px;
}
.formGroup-3340560223, /* Condition/Title/Description lines */
.tagContainer-1994054405, /* Tags input bar */
.breadcrumbs-320621489
{
margin-top: 5px !important;
}
.moduleContainer-3330263826,
form#PostAdMainForm div.container-info
{
padding-bottom: 0px;
padding-right: 0px;
}
div#StickyBottomBar,
div#StickyBottomBar div,
div#StickyBottomBar div div
{
background-color: transparent !important;
}
.myAdStatus-3720145982
{
padding: 5px;
flex-direction: row;
width: unset;
align-items: unset;
border-right: none;
}
.myAdStatusHeading-3487863985,
.adStatusHeadingContainer-1564113045
{
padding: 0px;
margin: 0px;
}
.myAdStatusHeading-3487863985
{
text-align: unset;
}
.myAdStatus-3720145982,
.tabListItem-3110987691,
.adStatusHeadingContainer-1564113045
{
display: unset;
}
.counterContainer-3998546652
{
margin: unset;
min-height: unset;
}
.counterItem-911711643
{
align-items: unset;
flex-direction: row;
}
.count-2019825095
{
padding-left: 5px;
font-size: unset;
line-height: unset;
}
.container-1895484246
{
max-width: 285px;
margin: 0px;
}
.myAdStatus-3720145982,
.counterItem-911711643
{
border-right: unset;
}
.link-2543719473, /* "Edit Ad" button at top of an individual ad page */
.buttonText-2417803520 /* "Edit Ad" button in each row in the "My Ads" page */
{
border: orange 1px solid;
background-color: orange;
color: white;
border-radius: 5px;
margin-top: 5px;
padding: 0px 5px;
}
.deleteLink-2900055035, /* "Delete" ad button at top of an individual ad page */
.buttonText-2570028822 /* "Delete" button in each row in the "My Ads" page */
{
border: red 1px solid;
background-color: red !important;
color: white;
border-radius: 5px;
margin-top: 5px;
margin-left: 5px;
padding: 0px 5px;
}
.link-2543719473:hover, /* "Edit Ad" button at top of an individual ad page */
.deleteLink-2900055035:hover /* "Delete" ad button at top of an individual ad page */
{
background-color: transparent !important;
}
.headerWrapper-3599732097
{
padding-bottom: 0px;
}
.searchBar-3410584230
{
flex-wrap: unset;
}
.label-2246511109
{
line-height: unset;
}
.searchSubmit-1336592678
{
flex-basis: 70px;
}
.searchBarWrapper-3397949630
{
margin-top: 5px;
}
.attributeListWrapper-2108313769
{
margin: 0px;
flex-wrap: unset;
}
.imageTag-3961382373 /* Thumnails on the "My Ads" page */
{
width: unset;
}
.thumbnailCell-291832188
{
padding-left: 0px;
}
/* ============== */
/* Why am I changing the padding of these elements? The way this site is */
/* built, if you press the border of the element, the button */
/* doesn't actually press, so I am making the links (not the link text) bigger */
.listItem-3079336677 /* The elements in the dropdown menu when you press profile picture */
{
padding: 0px;
}
.link-3344611369 /* The elements in the dropdown menu when you press profile picture */
{
padding: 13px 20px;
}
/* ============== */
.myAdsTable-2912248069
{
margin-top: 15px;
}
.myAdsTable-2912248069 tbody tr
{
row-gap: 2px !important;
}
.actionsContainer-1685284565
{
justify-content: left;
}
.button__medium-1066667140
{
line-height: unset;
}
}