iNat Dark by yymir

/* ==UserStyle==
@name         iNat Dark
@version      20240914.15.48
@namespace    https://userstyles.world/user/yymir
@description  Dark mode for iNaturalist
@author       yymir
@license      none
==/UserStyle== */

@-moz-document domain("inaturalist.org") {
:root {
    /* Background Colors */
    --bg-color-dark: #181818;
    --bg-color-medium: #202020;
    --bg-color-light: #303030;
    --bg-color-lighter: #393939;
    --bg-color-lightest: #494949;
    --bg-color-alt: #282828;
    --bg-color-hover: #2c2c2c;
    --bg-color-notice: #897909;
    --bg-color-alert: #372b0a;
    --bg-color-box: #053105;
    --bg-color-quiet-box: #1c2703;
    --bg-color-thumbnails: rgba(24, 24, 24, 0.49);

    /* Border Colors */
    --border-color-default: #5b5b5b;
    --border-color-hover: #2c2c2c;
    --border-color-alert: #eea236;
    --border-bottom-color: #585858;
    --timeline-border-color: #282828;

    /* Text Colors */
    --text-color-light: #eaecf0;
    --text-color-darker: #bbb;
    --text-color-muted: #d4d4d4;
    --text-color-strong: #e7e7e7;
    --text-color-black: #000;

    /* Accent Colors */
    --link-color: #5ba6dd;
    --accent-color: #74ac00;
    --bg-color-hover-alt: #6d6d6d;

    /* Shadows */
    --shadow-color: rgba(74, 74, 74, 0.77);
    --shadow-inset: rgba(174, 174, 174, 0.2);

    /* Panel Background */
    --panel-bg-color: rgba(17, 68, 17, 0.27);
}

/* ---- BACKGROUNDS ---- */
/* Dark Background */
html,
.form,
#ObservationShow .top_row,
.img,
.image-gallery-slide,
.panel,
.inlineblock.taxonomy-complete-notice,
.form-control,
.ac,
.bootstrap .table-striped > tbody > tr:nth-of-type(2n + 1),
.ac-view,
.col-sm-4,
.col-sm-8,
.col-md-12,
.list-group-item,
.img-thumbnail,
.thumbnail,
.btn-default,
.info,
.tab-content,
.bootstrap .nav-tabs > li.active > a,
.data_quality_assessment,
.obs,
.dropdown-menu,
.ui-widget-content,
.ui-widget-header,
.ui-multiselect-checkboxes,
.ac-chooser .searchclear.glyphicon,
.ui-tooltip-content,
#sidenav,
.modal-content,
.scaledimg,
.StatsHeader .stats-tab button,
.LeaderboardPanel,
.btn-white,
.photo,
.FlexGrid,
.panel-footer,
.tree ul.nested li:last-child::before,
.ActivityItem.withdrawn .panel-body,
button.left-nav-item {
    background-color: var(--bg-color-dark) !important;
}

/* Brighter Background */
#hero,
#results,
.quiet.box,
.for_idents,
.timeline-heading,
.upper,
#footer,
.panel-heading,
.tab-content textarea,
#ObservationShow .comment_id_panel ul.nav-tabs a:hover,
.QualityMetrics thead,
tr.improve,
.more_from,
.breadcrumb,
input.text,
.ObservationModal .modal-dialog .modal-content .right-col,
.ObservationModal .inat-tabs,
.Content,
textarea.text,
.latlonfields.status,
.clear.identification.yours.current {
    background-color: var(--bg-color-medium) !important;
}

#bodywrapper,
#wrapper {
    background: var(--bg-color-dark) !important;
}

.ui-widget-content {
    background: var(--bg-color-medium);
}

/* Even Brighter Background */
#header,
.main-col,
#filter-dropdown,
.input-group-addon,
.btn-default.active,
.btn-default:hover,
td.sorting,
.sortable-table th.sorting,
#ObservationShow .comment_id_panel ul.nav-tabs,
[role='dialog'] .dropdown-menu > li > a:hover,
.ObservationModal .right-col .tools,
.well {
    background-color: var(--bg-color-light) !important;
}

/* Top Bright Background */
.btn-default.active:hover {
    background-color: var(--bg-color-lighter) !important;
}

/* Brightest Background */
#filters-footer,
#stats-container,
.SideBar .hide-button,
.SideBar {
    background-color: var(--bg-color-lightest) !important;
}

/* Border Color Background */
.timeline-badge.plain,
.timeline:before,
.divider {
    background-color: var(--border-color-default) !important;
}

/* Yellow Background */
/* ---- BORDERS ---- */
/* Default Border Color */
.for_idents,
.timeline-panel,
#ObservationShow .top_row,
#ObservationShow .top_row .info_column,
#ObservationShow .top_row .info_column .user_info,
#ObservationShow .comment_id_panel ul.nav-tabs,
.Map,
.bootstrap .nav-tabs > li.active > a,
.bootstrap .nav-tabs,
.btn-default,
#header,
.ActivityItemMenu,
.panel,
.column-separator,
.panel-heading,
.img-thumbnail,
.user-image,
.col-sm-8,
.page-header,
.list-group-item,
.thumbnail,
.form-control,
.info,
.activity:before,
.timeline:before,
.timeline-badge.plain,
.comment_id_panel,
ul.nav-tabs,
.tab-content,
.action,
td,
th,
.obs,
.ObservationFields,
.Identifiers,
.Copyright,
.more_from,
.ui-widget-content,
.ui-widget-header,
.ui-multiselect-checkboxes,
.input-group-addon,
.well,
.ui-tooltip-content,
#sidenav > li > a,
input.text,
.right-col,
.collapsible-section,
#charts .nav-tabs li a,
.squareIcon,
.StatsHeader,
.StatsHeader .stats-tab button,
.LeaderboardPanel,
.btn-white,
textarea.text,
.latlonfields.status,
.ui-state-default,
fieldset,
#filters,
.pagination a,
.panel-footer,
.userimage {
    border-color: var(--border-color-default) !important;
}

.bootstrap .Activity .activity::before {
    border-inline-start-color: var(--border-color-default) !important;
    z-index: 1;
}

/* ---- TEXT ---- */
/* Text Color Light */
.bootstrap,
h1,
h2,
h3,
h4,
h5,
h6,
#header a,
#footer p a,
.UserWithIcon .title a,
.title_text,
.taxon .comname a,
.display-name,
#TaxonHeader .taxon .display-name,
a.user,
.ac-result-Place,
.ac-result-Project,
.ac-result-User,
.fa-search,
.list-group-item,
.btn-default,
.media-body > ul > li,
.bootstrap .nav-tabs > li.active > a,
.time,
.form-control,
.count,
.subtitle > a,
.info,
.ui-widget-content,
.ui-widget-header a,
.ui-icon > a,
.input-group-addon,
input.text,
.map-and-details .details ul a,
.LeaderItem .name a,
.AkaNames .name,
#charts a,
.ActivityItem span.taxon a.secondary-name,
.ActivityItem span.taxon .secondary-name,
.project-header .header-grid .header-about-news > a,
.btn-white,
g.legendcell,
.legendlabel,
.ui-autocomplete .ac-result .ac-label,
.bootstrap .dropdown-menu > li > a,
.close,
#charts .active a,
#charts .item-label,
.panel-heading,
#projectstats .user a,
#projectstats .taxon a,
label.required,
.StatusTab .place-link,
.tab-links a,
#user-subheader > span a{
    color: var(--text-color-light) !important;
}



/* Text Color Darker */
.sciname.species.secondary-name,
.secondary-name,
.Identifiers .identifier .UserWithIcon .subtitle > a,
.genus.secondary-name,
#ObservationShow .comment_id_panel ul.nav-tabs a,
#footer-links .btn,
body > div > [role='dialog'],
.TaxonCrumbs,
.LeaderItem .item-label,
.LeaderItem .value,
.bootstrap .text-muted,
.description,
.taxon .othernames,
.quiet,
#filters,
body,
.tree ul.nested li::before
 {
    color: var(--text-color-darker) !important;
}

/* Text Color Black */
.pagination .current {
    color: var(--text-color-black);
}

/* Link Text Color */
a,
.bootstrap a,
.btn-link,
li > a,
.readmore,
.Copyright a,
.linky,
.title > a,
.links a,
#filters-more-btn,
.Annotations .dropdown .dropdown-toggle,
.dropdown-toggle .b {
    color: var(--link-color);
}

.links a,
.ObservationsHighlight h3 a {
    color: var(--link-color) !important;
}

/* Hover Effects */
.observations.table .observation:hover,
.dropdown-menu > li > a:hover,
div.iconic_taxon:hover {
    background-color: var(--bg-color-hover) !important;
    border-color: var(--border-color-hover) !important;
}

.bootstrap a:hover {
    opacity: 0.9 !important;
}

/* ---- MISC STYLES ---- */
/* Transparent Backgrounds */
ul.timeline_observation > li > .timeline-panel > .timeline-heading {
    background-color: transparent !important;
}

#ObservationShow .comment_id_panel ul.nav-tabs a:hover {
    border-color: transparent;
}

/* Semi-Transparent Panel */
.panel.improving .panel-heading {
    background-color: var(--panel-bg-color) !important;
}

/* Box Shadows */
#inat-universal-autocomplete .ui-autocomplete,
.bootstrap .dropdown-menu,
.ui-tooltip-content {
    border-radius: 4px;
    border-color: var(--border-color-default);
    box-shadow: 0 5px 15px var(--shadow-color);
}

.timeline-panel::before {
    border-left-color: var(--timeline-border-color) !important;
    border-right-color: var(--timeline-border-color) !important;
}

.btn-default.active {
    box-shadow: inset 0 3px 5px var(--shadow-inset) !important;
}

/* Filter Dropdown */
.ui-state-hover,
.ui-state-focus {
    background: var(--bg-color-light) !important;
    color: var(--text-color-muted) !important;
}

.ui-state-default {
    background: var(--bg-color-medium) !important;
}

.ui-state-active,
.ui-widget-header {
    background: var(--bg-color-dark) !important;
    color: var(--text-color-muted) !important;
}

/* Boxes */
.notice.box {
    background-color: var(--bg-color-notice);
}

.box {
    background-color: var(--bg-color-box);
}

.quiet.stacked.box {
    background-color: var(--bg-color-quiet-box) !important;
}

.alert-warning,
#full-width-notice {
    background-color: var(--bg-color-alert) !important;
    border-color: var(--border-color-alert) !important;
    color: var(--text-color-white) !important
}

/* ---- IDENTIFY MODAL ---- */
body > div > [role='dialog'],
.ObservationModal .tools .btn-link,
.ObservationModal .column-header .header-text,
.inat-tabs li .btn-nostyle,
.ObservationModal .Faves a,
.Suggestions .RecordChooserPopoverTrigger label,
[role="dialog"] .dropdown-menu > li > a {
    color: var(--text-color-strong) !important;
}

.image-gallery-thumbnails {
    background: var(--bg-color-thumbnails) !important;
}

/* ---- BUTTONS ---- */
/* yellow button
color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
*/
.input-group-addon {
    background-color: var(--bg-color-dark) !important;
}

#obsSortDrop...