Pururin - Deep Dark by xiggi

/* ==UserStyle==
@name         Pururin - Deep Dark
@version      20240401.08.49
@namespace    ?
==/UserStyle== */

@-moz-document domain("pururin.to") {
@import url('https://fonts.cdnfonts.com/css/roboto');

:root {
    --main-bg: rgb(12, 12, 12);
    --second-bg: rgb(21, 21, 21);
    --third-bg: #272727;
    --third-bg-dark: #1f1f1f;

    --red: #ff003e;
    --white: #fff;
}

body {
    background-color: var(--main-bg);
    font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}

.box {
    background-color: var(--second-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    color: #ccc;
    padding: 10px;
}

a {
    color: #d45776;
}

a:hover {
    color: #fff;
    text-decoration: none;
    transition: 0.2s;
}

select {
  -webkit-appearance: none;
  appearance: none;
    padding-left: 10px;
    padding-right: 10px;
}

input:focus-visible {
  outline: 1px solid #d45776;
  border-radius: 3px;
}

select:focus-visible {
  border: 1px solid #d45776;
  border-radius: 3px;
  outline: none;
}

:focus-visible {
    outline:1px solid #d45776;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px yellow inset;
}

input.my-input {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

input.my-input:-internal-autofill-selected {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
  }

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    background: var(--third-bg);
    color: #fff;
    padding: .3em .7em;
    border: 1px solid transparent;
    border-radius: 5px;
}

::marker {
    color: #ccc;
}

::selection {
    background: #d45776;
    color: #fff;
}

/** scrollbar **/
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--main-bg);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--third-bg);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--third-bg-dark);
}

/** blacklisted hider **/
.card-gallery.black-listed {
    display: none;
}

.gallery-preview > a img,
.gallery-preview,
button.btn.btn-pururin.btn-preview-load-more, button.btn.btn-pururin.btn-preview-view-all {
    display: none;
}

i.fa.fa-random,
i.fa.fa-rss,
i.fab.fa-facebook-f,
i.fab.fa-twitter {
    display: none;
}

.box-header .title,
.box .title,
.box .title-secondary {
    color: #fff;
}

.navbar-pururin {
    background-color: var(--second-bg);
}

.navbar-pururin .navbar-tools > .nav-item a {
    color: #ccc;
}

.breadcrumb {
    background: var(--main-bg);
    border-bottom: 1px solid transparent;
    border-radius: 0;
    border-top: 1px solid transparent;
    font-size: 13px;
    padding: 15px 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: center;
}

.breadcrumb .breadcrumb-item.active {
    font-weight: 600;
    color: #fff;
}

.navbar-pururin .navbar-collapse > .navbar-nav > .nav-item {
    background: #0d0d0d;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
}

a:hover.btn.btn-pururin.btn-favorite:before, a:hover.btn.btn-pururin.btn-like:before {
    color: #fff;
    transition: 0.2s;
}

.notification.active:before {
    background: var(--red);
    box-shadow: 1px 1px 10px var(--red);
    height: 12px;
    margin-left: 11px;
    position: absolute;
    width: 12px;
    outline: 1px solid var(--second-bg);
}

span.page-link:active {
    color: #fff;
    outline: 1px solid #fff;
}

.page-link {
    background-color: var(--second-bg);
    border: 1px solid transparent;
    color: #ccc;
    font-size: 14px;
    margin-left: 4px;
    padding: 5px 10px;
    border-radius: 5px;
}

.page-link:hover {
    background-color: var(--third-bg);
    border-color: transparent;
    outline: 1px solid #fff;
    color: #fff;
    transition: 0.2s;
}

a.page-link:hover {
    text-decoration: none;
}

li.page-item.disabled {
    background-color: var(--third-bg-dark);
    border: 1px solid transparent;
    border-radius: 5px;
    margin-left: 4px;
}

li.page-item.disabled:hover {
    background-color: var(--third-bg);
    border-color: transparent;
    outline: 1px solid #fff;
    color: #fff;
    transition: 0.2s;
}

li.page-item.active {
    font-weight: 600;
}

.page-item:last-child .page-link {
    border-radius: 5px;
    margin-right: 5px;  
}

.page-item.disabled .page-link {
    background-color: transparent;
    border-color: transparent;
}

.page-item:first-child .page-link {
    border-radius: 5px;
}

.card-gallery {
    border: none;
}

.card-gallery .ribbon-red {
    background-color: var(--main-bg);
    font-weight: bold;
    font-size: 12px;
    color: rgb(255 199 61 / 100%);;
}

.card-gallery .ribbon-blue {
    background-color: var(--main-bg);
    color: #3a87ad;
    font-weight: bold;
    font-size: 12px;
}

.card-gallery .meta {
    background-color: var(--main-bg);
}

.row-gallery-small > .card-gallery .meta > .title h2 {
    font-weight: 600;
}

.card-gallery img:hover,
.sidebar-coverlist img:hover,
.gallery-wrapper > .cover-wrapper .cover:hover {
    opacity: 50%;
    transition: 0.2s;
}

.card-gallery.favorite > .meta {
    background-color: var(--main-bg) !Important;
}

.box .title > span.id {
    color: #ccc;
}

.modal-open .modal {
    background: rgb(0 0 0 / 80%);
}

.modal-content,
.modal-content .modal-body,
.modal-content .modal-footer {
    background: var(--second-bg);
    border: 1px solid transparent;
}

.modal-content .modal-header .modal-title {
    color: #fff;
}

.btn-pururin {
    background: var(--third-bg);
    color: #ccc;
    box-shadow: none;
    border: 1px solid transparent;
    text-shadow: none;
    border-radius: 5px;
    margin-right: 5px;
    line-height: inherit;
}

.btn-pururin:hover {
    background: var(--red);
    border: 1px solid transparent;
    color: #fff;
    transition: 0.2s;
}

.fa,
.fas {
    margin-right: 5px;
}

i.fa.fa-envelope {
    margin-right: 0;
}

i.fas.fa-search {
    margin-right: 0;
}

i.fas.fa-filter {
    margin-right: 0;;
}

i.fas.fa-angle-double-right {
    margin-right: 0;
    margin-left: 5px;
}

.hr {
    border-bottom: 1px solid var(--third-bg);
}

.footer-links > li:after {
    color: #ccc;
    content: "•";
    padding-left: 5px;
    padding-right: 5px;
}

.box-header > .meta ul.list-inline.custom > li:after  {
    color: transparent;
    margin-right: 5px;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-collection tbody tr:nth-child(odd) {
    background: var(--second-bg);
}

.table-collection tbody td {
    border-color: transparent;
}

.table-pururin thead th a {
    color: #ccc;
}

.table-pururin thead th a:hover {
    color: #fff;
    transition: 0.2s;
}

.card-gallery.bookmark > .meta {
    text-shadow: 0 0 #fff;
    background: var(--main-bg) !important;
}

.card-gallery.white-listed {
    border-bottom: 2px solid var(--red);
}

.card-gallery.bookmark {
    border-bottom: 2px solid rgb(255 199 61 / 100%)!important;
}

.card-gallery.white-listed > .meta {
    background: var(--main-bg) !important;
}

.card-gallery .meta .title > div > h2 {
    color: #ccc;
}

.table-info > tbody > tr td:first-child {
    color: #fff;
}

.table-info .contribute-info {
    color: #ccc;
    margin-bottom: 5px;
}

.table-info .list-inline > li:after {
    content: ", ";
    color: transparent;
    margin-left: 5px;
}

.table-info .list-inline a {
    color: #ccc;
}

.table-info .list-inline a:hover {
    color: #fff;
    transition: 0.2s;
}

.navbar-pururin .dropdown-menu > .dropdown-item {
    background: var(--second-bg);
    border-top: none;
    color: #ccc;
    padding: .45rem 1rem;
}

.dropdown-item:active,
.dropdown-item:focus,
.navbar-pururin .dropdown-menu > .dropdown-item:hover {
    background: var(--third-bg);
    text-shadow: none;
    color: #fff;
    transition: 0.2s;
}

.navbar-pururin .dropdown-menu {
    background: transparent;
    border-left: none;
    border-right: none;
    border: 1px solid var(--third-bg);
    box-shadow: 1px 1px 5px var(--third-bg);
}

.navbar-pururin .navbar-toggler a {
    color: #ccc;
}

.navbar-pururin .dropdown-menu>.dropdown-item:last-child {
    border-bottom: none;
}

.list-group > .list-group-item {
    background: var(--second-bg);
    border-color: var(--third-bg);
    border-radius: 0!important;
    color: #ccc;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 15px!important;
}

.list-group > .list-group-item.active,
.list-group > .list-group-item:hover {
    background: var(--third-bg);
    color: #fff;
    transition: 0.2s;
}

.list-group > .list-group-item.active {
    color: #fff;
    text-shadow: none;
    border-left: 5px solid #fff;;
}

.btn-outline-pururin {
    background: var(--third-bg);
    color: #ccc;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 5px;
}

.btn-outline-pururin:hover {
    border: 1px solid transparent;
    background: var(--red);
    color: #fff;
    transition: 0.2s;
}

.user-statistic > .level,
.user-statistic > .level-name {
    background: var(--main-bg);
    border: 2px solid transparent;
}

.box .title-secondary {
    font-size: 17px;
    margin-bottom: 10px;
    text-align: center;
    margin-top: 10px;
}

.box .title>h1 {
    text-align: center;
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(212, 87, 118, .5);
}

.box.img-reader .img-meta .img-menu h1 {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
}

.img-menu {
    margin-bottom: 20px;
}

.table a.active,
ul.custom .active {
    font-weight: 600;
    color: #fff;
}

.navbar-pururin .navbar-collapse > .navbar-nav > .nav-item > a:...