Skip to content

Minesweeper.online Dark by Rurex

Screenshot of Minesweeper.online Dark
Write a review Install Get Stylus

Details

AuthorRurex

LicenseNo License

Categoryminesweeper.online

Created

Updated

Size27 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Includes:

  • Entire website is dark, with highly contrasting colors
  • Darkened board
  • Colored chat: separate colors for your own messages, GMs and admins.

Notes

  • SET THE WEBSITE TO LIGHT MODE WHEN USING! The styles get messed up when combined with website's built-in dark theme.
  • Tested on Google Chrome only.

Changelog:
1.0.0 (7 Sep 2023) Initial version
1.0.1 (9 Sep 2023) Included suggestions from MoCol: No tampering with GM icons, dark gray text in some of the news messages is now gold, axis labels on economy charts are now brighter.
1.0.2 (11 Sep 2023) More suggestions from MoCol: Pop-ups, tooltips, dialog windows and dropdown lists now have a visible border.
1.0.3 (13 Sep 2023) Fix regarding creation of marketplace exchange.
1.0.4 (21 Sep 2023) Better visible "last read" line in chat.
1.0.5 (24 Sep 2023) Upper border of chat is now the same as all others. Fixed a white square appearing when both vertical and horizontal scroll bars are present on the chat. Fixed "visited" arena run links on leaderboards reverting to wrong colours.
1.1.0 (27 Nov 2023) Fix for newly added mentions in the chat. Minor tweaks.
1.2.0 (30 May 2024) Fix for newly added Elite Minesweeper Club content. Minor tweaks.
1.2.1 (19 Jul 2024) Fix for ascended gear colour in player's profile page.
1.2.2 (04 Sep 2024) Fix for result box changing name in HTML.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name Minesweeper Dark by Rurex
@namespace minesweeper.online
@version 1.2.2
@description Dark mode for minesweeper.online
@author Rurex
==/UserStyle== */

@-moz-document domain("minesweeper.online") {
/* global colors */
:root {
    --msd_black: #000;
    --msd_dark: #111;
    --msd_darkgray: #555;
    --msd_lightgray: #aaa;
    --msd_bright: #fdfde2;

    --msd_red: #f00;
    --msd_red_inactive: #500;
    --msd_red_dark: #a00;
    --msd_red_light: #f88;
    --msd_green: #0f0;
    --msd_green_inactive: #050;
    --msd_green_dark: #0a0;
    --msd_green_light: #8f8;
    --msd_blue: #08f;
    --msd_blue_inactive: #002b57;
    --msd_blue_dark: #005aaa;
    --msd_blue_light: #8cf;
    --msd_orange: #f80;
    --msd_orange_inactive: #572b00;
    --msd_orange_dark: #aa5a00;
    --msd_orange_light: #fc8;

    --msd_yellow: #ff0;
    --msd_pink: #f0f;
    --msd_cyan: #0ff;

    --msd_magenta: #f08;
    --msd_lime: #8f0;
    --msd_violet: #80f;
    --msd_mint: #0f8;

    --msd_gold: #fc0;
    --msd_gold_light: #ffe680;

    --msd_link: #87d5ff;
    --msd_player_message: #9f9;
    --msd_admin_message: #fbb;
    --msd_gm_message: #ffe066;
    --msd_so_message: #ffaad8;

    --msd_common: var(--msd_lightgray);
    --msd_uncommon: var(--msd_lime);
    --msd_rare: var(--msd_blue);
    --msd_epic: var(--msd_pink);
    --msd_legendary: var(--msd_orange);
    --msd_perfect: var(--msd_red);

    --msd_topaz: var(--msd_orange);
    --msd_ruby: var(--msd_red);
    --msd_sapphire: var(--msd_blue);
    --msd_amethyst: var(--msd_pink);
    --msd_diamond: var(--msd_bright);
    --msd_onyx: var(--msd_lightgray);
    --msd_aquamarine: var(--msd_cyan);
    --msd_emerald: var(--msd_green);
    --msd_garnet: var(--msd_magenta);
    --msd_jade: var(--msd_mint);
}

/* ---------- PAGE SETTINGS ---------- */
/* upper bar */
.navbar-desktop,
.navbar-default,
navbar-header {
    background-color: var(--msd_dark);
}
/* site background */
body {
    background-color: var(--msd_dark);
    color: var(--msd_bright);
}
hr,
td.help-table-middle-column {
    border-color: var(--msd_lightgray);
}
/* middle */
.main-content {
    background-color: var(--msd_dark);
    box-shadow: none
}
/* navigation bar on the left */
.sidebar-nav ul li a {
    color: var(--msd_bright);
}
/* stats after a finished game */
.result-block-box {
    border: 1px solid var(--msd_darkgray);
    background-color: var(--msd_dark);
    color: var(--msd_bright);
}
/* popup windows, for example when buying in marketplace */
.modal-body,
.modal-footer,
.modal-header {
    background-color: var(--msd_dark);
}
.modal-content {
    border: 2px solid var(--msd_lightgray);
}
/* scrollbars */
::-webkit-scrollbar {
    background-color: var(--msd_dark);
}
::-webkit-scrollbar-thumb {
    background-color: var(--msd_darkgray);
    border: 4px solid var(--msd_dark);
    border-radius: 20px;
}
::-webkit-scrollbar-corner {
    background-color: var(--msd_dark);
}
/* logo */
.brand-logo {
    filter: invert(1) brightness(140%) sepia(1) saturate(50%);
}
.brand-text,
.navbar-brand {
    text-shadow: none!important;
    color: var(--msd_bright)!important;
    /* adjusted to the brand logo */
}
/* navigation bars, for example chat channels */
.nav-tabs > li.chat-tab > a {
    border: 1px solid var(--msd_darkgray);
    margin-bottom: 4px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--msd_link);
    background-color: var(--msd_dark);
    border: 1px solid var(--msd_link);
    cursor: default;
    z-index: 1;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background-color: var(--msd_dark);
    border: 1px solid var(--msd_bright);
    cursor: default;
}
/* dropdown lists */
.dropdown-menu {
    color: var(--msd_bright);
    background-color: var(--msd_black);
    border: 2px solid var(--msd_lightgray);
}
.dropdown-menu > li > a {
    color: var(--msd_bright);
    background-color: var(--msd_dark);
}
.dropdown-menu > li > a:hover {
    color: var(--msd_bright);
    background-color: var(--msd_darkgray);
}
.market-price-small,
.market-amount-small {
    border-color: var(--msd_darkgray);
}
.market-price-small.has-error,
.market-amount-small.has-error {
    border-color: var(--msd_red);
}
.dropdown-menu > li > a > span.blue {
    color: var(--msd_link);
}
.tooltip-inner {
    color: var(--msd_bright);
    background-color: var(--msd_dark);
    border: 2px solid var(--msd_lightgray);
}
/* page selection, for example under leaderboards */
.pagination > .disabled > a {
    color: var(--msd_bright);
    background-color: var(--msd_dark);
    border-color: var(--msd_darkgray);
    opacity: .5;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    color: var(--msd_link);
    background-color: var(--msd_dark);
    border: 1px solid var(--msd_link);
}
.pagination > li > a:hover {
    color: var(--msd_bright);
    background-color: var(--msd_dark);
    border: 1px solid var(--msd_bright);
}
.pagination > li > a,
.pagination > li > span {
    color: var(--msd_bright);
    background-color: var(--msd_dark);
    border: 1px solid var(--msd_darkgray);
}
/* tables */
.pagination > li > a,
.table td,
.table th {
    color: var(--msd_bright);
    background-color: var(--msd_dark);
}
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border: 1px solid var(--msd_darkgray);
}
.stat-my-row td {
    background-color: var(--msd_green_inactive);
    color: var(--msd_green_light);
}
/* for example when table is filtered by 3BV/s */
.bg-warning {
    color: var(--msd_orange_light)!important;
    background: var(--msd_dark)!important;
}
.bg-info {
    color: var(--msd_blue_light)!important;
    background: var(--msd_dark)!important;
}
.bg-danger {
    color: var(--msd_red_light)!important;
    background: var(--msd_dark)!important;
}
/* for example when creating a marketplace exchange */
.bg-success {
    color: var(--msd_green_light)!important;
    background: var(--msd_dark)!important;
}
/* input fields, for example in marketplace */
input,
.form-control {
    color: var(--msd_bright);
    background-color: var(--msd_dark);
    border-color: var(--msd_darkgray);
}
/* popups, for example when hovering over player name */
.popover-title {
    background-color: var(--msd_dark);
    color: var(--msd_bright)!important;
}
.popover {
    background-color: var(--msd_dark);
    color: var(--msd_bright);
    border: 2px solid var(--msd_lightgray);
}
.storage-popover-table td,
.gems-popover-table td,
.score-popover-table td,
.player-popover-table td,
.equipment-popover-table td {
    background-color: var(--msd_dark)!important;
}
/* maintenance timer */
.maintenance-line-active {
    background: var(--msd_red_dark);
    color: var(--msd_bright);
}
/* a bar under payment method logos */
.payment-info {
    background-color: var(--msd_lightgray);
    border: 5px solid var(--msd_lightgray);
}
/* TOP SECRET tag for events that feature global quests */
.top-secret {
    color: var(--msd_red);
    border-color: var(--msd_red);
}
/* removing various annoying bars */
.navbar-desktop.hidden-xs.hidden-sm {
    box-shadow: none;
}
.pull-left.main-column {
    box-shadow: none;
}
.pull-left.result-block-right-column {
    box-shadow: none;
}
.footer-hr {
    color: var(--msd_darkgray);
}
/* for example when marketplace transaction is successful */
.alert-success {
    color: var(--msd_green_light);
    background-color: var(--msd_green_inactive);
    border-color: var(--msd_green_dark);
}
.alert-primary {
    color: var(--msd_blue_light);
    background-color: var(--msd_blue_inactive);
    border-color: var(--msd_blue_dark);
}
.alert-danger {
    color: var(--msd_red_light);
    background-color: var(--msd_red_inactive);
    border-color: var(--msd_red_dark);
}
/* for example in spectator mode */
.alert-warning {
    color: var(--msd_orange_light);
    background-color: var(--msd_orange_inactive);
    border-color: var(--msd_orange_dark);
}
/* icon when the hint is free */
.hint-free-absolute {
    color: var(--msd_green_dark)!important;
    border-color: var(--msd_green_dark);
    background-color: var(--msd_dark);
}
/* data point tooltip on economy charts in store */
.apexcharts-tooltip,
.apexcharts-tooltip-title {
    background: var(--msd_black)!important;
}
.apexcharts-text {
    fill: var(--msd_bright);
}
.apexcharts-series > path {
    stroke: var(--msd_blue);
    stroke-width: 2;
}
/* color all links */
a.active,
a,
a:hover,
table.chat-message > tbody > tr > td > span > a,
div.form-text > span > a,
table.chat-message > tbody > tr > td > span > span > a,
table.chat-message > tbody > tr > td > span > span > span > a,
.black-link,
.black-link:active,
.black-link:hover,
.black-link:visited {
    color: var(--msd_link);
}
.dotted-underline,
.dotted-underline:active,
.dotted-underline:hover,
.dotted-underline:visited {
    border-bottom: 1px dotted var(--msd_link);
}
/* headlines */
.events-title {
    color: var(--msd_bright)!important
}
.main-page h1,
.main-page h2,
.main-page h3,
.help-content h3,
.help-content h4 {
    color: var(--msd_bright);
}
.thumbnail {
    background-color: var(--msd_dark);
}
/* fields 1-8 used for explaining patterns in help section */
.help-num1,
.help-num2,
.help-num3,
.help-num4,
.help-num5,
.help-num6,
.help-num7,
.help-num8 ...

Reviews

No reviews yet.