Skip to content

OpenBooru by dgck81lnn

Screenshot of OpenBooru
Write a review Install Get Stylus

Details

Authordgck81lnn

LicenseNo License

Categoryderpibooru philomena

Created

Updated

Size42 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Derpibooru April Fool's 2022 theme

Notes

Due to Derpibooru's strict CSP settings, this style may not work — see this post for solutions.

Hexagonal avatars, yay!

Enable the “Fun” option for the OpenBooru banner and logo:

Disable the “Make the user dropdown menu more compact” option for an ugly menu:

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           OpenBooru
@namespace      https://github.com/DGCK81LNN
@version        0.3.0
@description    Derpibooru 2022 April fools joke
@author         DGCK81LNN
@preprocessor   stylus
@var  checkbox  fun "Fun — OpenBooru banner and logo, Make Fungible, etc" 0
@var  checkbox  compactUserMenu "Make the user dropdown menu more compact" 1
==/UserStyle== */

@-moz-document domain("derpibooru.org"), domain("trixiebooru.org") {

body {
  background-color: #fff;
  color: #333;
}
pre {
  background-color: #f5f5f5;
  border: 1px solid #bbb;
}
a,
a:active,
a:visited {
  color: #419cd9;
}
a:hover {
  color: #9273d0;
}
.table,
table {
  border: 1px solid #d9e7f1;
}
.table > thead > tr,
table > thead > tr {
  background: #fff;
}
.table > tbody,
table > tbody {
  border: 1px solid #d9e7f1;
}
.table > tbody > tr:nth-child(odd),
table > tbody > tr:nth-child(odd) {
  background: #f2f8fc;
}
.table > tbody > tr:nth-child(2n),
table > tbody > tr:nth-child(2n) {
  background: #fff;
}
.table > tbody > tr:nth-child(odd).success,
.table > tbody > tr:nth-child(odd) .success,
table > tbody > tr:nth-child(odd).success,
table > tbody > tr:nth-child(odd) .success {
  background: #c8f1b0;
}
.table > tbody > tr:nth-child(2n).success,
.table > tbody > tr:nth-child(2n) .success,
table > tbody > tr:nth-child(2n).success,
table > tbody > tr:nth-child(2n) .success {
  background: #e3f6d9;
}
.table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd).success,
.table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd) .success,
.table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd).success,
.table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd) .success,
table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd).success,
table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd) .success,
table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd).success,
table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd) .success {
  background: #c8f1b0;
}
.table > tbody > tr:nth-child(odd).warning,
.table > tbody > tr:nth-child(odd) .warning,
table > tbody > tr:nth-child(odd).warning,
table > tbody > tr:nth-child(odd) .warning {
  background: #f1ebb3;
}
.table > tbody > tr:nth-child(2n).warning,
.table > tbody > tr:nth-child(2n) .warning,
table > tbody > tr:nth-child(2n).warning,
table > tbody > tr:nth-child(2n) .warning {
  background: #f3f0d0;
}
.table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd).warning,
.table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd) .warning,
.table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd).warning,
.table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd) .warning,
table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd).warning,
table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd) .warning,
table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd).warning,
table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd) .warning {
  background: #f1ebb3;
}
.table > tbody > tr:nth-child(odd).danger,
.table > tbody > tr:nth-child(odd) .danger,
table > tbody > tr:nth-child(odd).danger,
table > tbody > tr:nth-child(odd) .danger {
  background: #f3c8c2;
}
.table > tbody > tr:nth-child(2n).danger,
.table > tbody > tr:nth-child(2n) .danger,
table > tbody > tr:nth-child(2n).danger,
table > tbody > tr:nth-child(2n) .danger {
  background: #f0dcd9;
}
.table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd).danger,
.table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd) .danger,
.table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd).danger,
.table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd) .danger,
table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd).danger,
table > tbody > tr:nth-child(2n) .table > tbody > tr:nth-child(odd) .danger,
table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd).danger,
table > tbody > tr:nth-child(2n) table > tbody > tr:nth-child(odd) .danger {
  background: #f3c8c2;
}
.border-vertical {
  border-top: 2px solid #d9e7f1;
}
.background-success {
  background-color: #d2f0c0;
}
.background-warning {
  background-color: #f4f1d4;
}
.background-danger {
  background-color: #f0cfcb;
}
hr {
  background: #d9e7f1;
}
#error_explanation {
  background: #f4f1d4;
  border: 1px solid #eee9bc;
}
.rule h2 {
  background: #f2f8fc;
  border: 1px solid #d9e7f1;
}
.rule h2.important {
  background: #f0cfcb;
  border-color: #ebc0bb;
}
blockquote {
  border: 1px dotted #333;
}
.spoiler-revealed:before,
.spoiler:before {
  background-color: #e88585;
}
.spoiler {
  background-color: #e88585;
}
.spoiler,
.spoiler a {
  color: #e88585;
}
.spoiler:not(:hover) > .image-show-container {
  background: #e88585;
}
.spoiler-revealed,
.spoiler:hover {
  background-color: #f7d4d4;
  color: #333;
}
.spoiler-revealed a,
.spoiler:hover a {
  color: #419cd9;
}
.spoiler-revealed a:hover,
.spoiler:hover a:hover {
  color: #1e6696;
}
.spoiler-revealed code,
.spoiler:hover code,
code {
  background-color: #f5f5f5;
  border: 1px solid #bbb;
  padding: 0 4px;
}
.label--success {
  background: #d2f0c0;
  border: 1px solid #bde9a3;
}
.label--danger {
  background: #f0cfcb;
  border: 1px solid #ebc0bb;
}
.label--warning {
  background: #f4f1d4;
  border: 1px solid #eee9bc;
}
.commit-sha,
.label--purple {
  background: #eeceed;
  border: 1px solid #e3b0e2;
}
.label--primary {
  background: #d8eefb;
  border: 1px solid #c1e4f9;
}
i.favicon-home {
  display: inline-flex;
  height: 2.5rem;
  min-width: 2.5rem;
  vertical-align: -70%;
}
i.favicon-home + span {
  vertical-align: bottom;
}
i.favicon-home + span::after {
  vertical-align: bottom;
}
.sparkline {
  border-bottom: 1px solid #77b3de;
}
.barline__bar {
  fill: #77b3de;
}
.block .success {
  background-color: #bde9a3;
}
.block .warning {
  background-color: #eee9bc;
}
.block .danger {
  background-color: #ebc0bb;
}
.block__content,
.block__tab {
  background: #fff;
  border-left: 1px solid #d9e7f1;
  border-right: 1px solid #d9e7f1;
  padding: 6px;
}
.block__content:first-child {
  border-top: 1px solid #d9e7f1;
}
.block__content:last-child,
.block__tab:not(.hidden) {
  border-bottom: 1px solid #d9e7f1;
}
.block__content--destroyed {
  background-color: #ffdcdc !important;
}
.block__header,
.block__header--single-item,
.block__header--sub {
  background: #d5e7f5;
  color: #333;
}
.block__header--single-item a,
.block__header--sub a,
.block__header a,
a.block__header--single-item {
  color: #2887cb;
}
.block__header--single-item a:hover,
.block__header--sub a:hover,
.block__header a:hover,
a.block__header--single-item:hover {
  background: #b6d5eb;
  color: #266a9b;
}
.block__header--single-item a,
.block__header--sub a,
.block__header a,
.header__span {
  background: #d5e7f5;
}
.block__header--js-tabbed,
.block__header--js-tabbed .header__span,
.block__header--js-tabbed a,
.block__header--light,
.block__header--light .header__span,
.block__header--light a {
  background: #e4eef5;
}
.block__header--js-tabbed a,
.block__header--light a {
  color: #498aba;
}
.block__header--js-tabbed a:hover,
.block__header--light a:hover {
  background: #d1dfe9;
  color: #396f97;
}
.block__header--js-tabbed {
  background: transparent;
  border-bottom: 1px solid #d9e7f1;
}
.block__header--js-tabbed a {
  border-bottom: 1px solid #e4eef5;
  border-top: 1px solid #d9e7f1;
  margin-bottom: -1px;
}
.block__header--js-tabbed a:hover {
  border-color: #d1dfe9;
}
.block__header--js-tabbed a:first-child {
  border-left: 1px solid #d9e7f1;
}
.block__header--js-tabbed a:last-child {
  border-right: 1px solid #d9e7f1;
}
.block__header--js-tabbed a.selected,
.block__header--js-tabbed a.selected:hover {
  background: #fff;
  border-color: #e4eef5;
  border-bottom: 1px solid #fff;
  color: #333;
}
.block--fixed {
  background: #fff;
  border: 1px solid #d9e7f1;
}
.block--success {
  background: #d2f0c0;
  border-color: #bde9a3;
}
.block--warning {
  background: #f4f1d4;
  border-color: #eee9bc;
}
.block--danger {
  background: #f0cfcb;
  border-color: #ebc0bb;
}
.block--primary {
  background: #d8eefb;
  border-color: #c1e4f9;
}
.block--assistant {
  background: #eeceed;
  border-color: #e3b0e2;
}
.block__header__dropdown-tab:hover > a {
  background-color: #b6d5eb;
  color: #266a9b;
}
.block__list {
  border-bottom: 1px solid #d9e7f1;
}
.block__list a.block__list__link {
  background: #fff;
  border: 1px solid #d9e7f1;
}
.block__list a.block__list__link.primary {
  background: #d8eefb;
  border-color: #c1e4f9;
}
.block__list a.block__list__link.active,
.block__list a.block__list__link:hover {
  background: #d2f0c0;
  border-color: #bde9a3;
}
.block__list a.block__list__link.active:hover {
  background: #f0cfcb;
  border-color: #ebc0bb;
}
.block__content--top-border {
  border-top: 1px solid #d9e7f1;
}
.button,
.toggle-box + label {
  background-color: hsla(0, 0%, 96%, 0.2);
  border: 1px solid #bbb;
  color: #333;
}
.button:hover,
.toggle-box + label:hover {
  background-color: #e1ecf3;
  border-color: #8bbee3;
}
.button:active,
.button:hover,
.button:visited,
.toggle-box + label:active,
.toggle-box + label:hover,
.toggle-box + label:visited {
  color: #333;
}
.button--link {
  color: #419cd9;
}
.button--link:hover {
  color: #9273d0;
}
.button--link:visited {
  color: #419cd9;
}
.button--state-primary {
  background-color: #d8eefb;
  border-color: #9cd4f5;
}
.button--state-primary:hover {
  background-color: #c1e4f9;
  border-color: #85caf3;
}
.button--state-success ...

Reviews

No reviews yet.