TimeandDate - Dark X by Saadski

/* ==UserStyle==
@name         TimeandDate - Dark X
@version      20240916.20.00
@namespace    https://userstyles.world/user/Saadski
@description  Dark theme for Time and Date.
@author       Saadski
@license      No License
==/UserStyle== */

@-moz-document domain("timeanddate.com") {
/* Time and Date*/
/* Presets */
:root
{
    --dark0: rgb(33, 33, 33);
    --dark: rgb(28, 28, 28);
    --dark1: rgb(27, 27, 27);
    --darker: rgb(18, 18, 18);
    --darker2: rgb(12, 12, 12);
    --bw: rgb(67, 67, 67);
    --light: rgb(193, 193, 193);
    --lighter: rgb(233, 233, 233);
    --accent: rgb(95, 95, 95);
    --accent1: rgb(130, 130, 130);
    --shadow: rgba(0, 0, 0, 0.07);
    --advert-sky-size: 0px
}

*
{
    border-color: var(--dark0) !important;
    color: var(--accent1) !important;
    text-shadow: 1px 1px 2px var(--darker2)
}

html,
body,
.nav-3,
figcaption,
.tpl-index .main-content-div,
.isShowingMenu .site-nav-bar__menu-wrap,
.stopwatch__duration,
.c0,
.d0,
.notes,
.calpopup-container,
.views__days td.empty,
.bg--grey,
.sky-animation .info-wrapper .object-info-box
{
    background: var(--darker2);
}

.box-bottom
{
    background: linear-gradient(180deg, rgba(61, 61, 61, .17) 0, rgba(220, 220, 240, 0));
}

.site-nav-bar
{
    background: #00000054;
    backdrop-filter: blur(5px);
}

.site-nav
{
    background: #0000;
}

.fl
{
    filter: contrast(0.7);
}

.wna
{
    background: var(--shadow)
}

#clk_box
{
    background: var(--tp)
}

.nav-2__submenu-item:hover
{
    background: var(--dark)
}

.site-nav__menu
{
    background: var(--tp) backdrop-filter: blur(12px);
}

[class="layout-grid__sky layout-grid__sky--sticky tpl-banner__sky"]
{
    display: none !important;
}

.cm-now__info,
.cs-now__info,
table,
.bk-focus__qlook,
.bk-search,
.rd-inner,
.rd-box,
li.tab,
.site-nav__header,
.csvg-footer,
.site-nav__item,
#bk-nav.tc.big
{
    background: var(--darker2) !important;
}

.row-act td,
.row-act th
{
    background: #1F1F1F
}

.rd-box,
.nav-tabs__wrap
{
    box-shadow: 0 0 0px var(--dark0);
}

.site-nav-bar__menu-wrap
{
    background: var(--tp)
}

.currentsun .cs-fg
{
    filter: invert(0.953) !important;
}

.currentsun.sun .cs-bd
{
    filter: invert(1)hue-rotate(180deg)
}

a
{
    color: var(--light)
}

.as .asb span
{
    color: var(--dark) !important
}

.planet-selector
{
    background: #0000004d;
    backdrop-filter: blur(12px)
}

.tabs-nav
{
    text-shadow: 0 1px hsla(0, 0%, 100%, 0);
}

.currentsun.sun,
.tb-plain tbody tr:hover,
.rise_graph-brief:hover,
.tabs-nav a.active,
.tabs-nav a:hover,
.alert--info,
.info-wrapper--search-button-wrap--btn:hover:enabled,
.button-form--ghost:hover,
.modal-header
{
    background: var(--dark)
}

.button-form
{
    color: var(--light) !important
}

body > div.main-content-div > main > article > div.weather-graph > div.weatherTooltip > div.inner__block > div.right__block > div:nth-child(3),
body > div.main-content-div > main > article > div.weather-graph > div.weatherTooltip > div.inner__block > div.mid__block > div
{
    color: var(--lighter) !important
}

.mapui__tooltip .tooltip--inner
{
    background: #000000D4;
    backdrop-filter: blur(5px);
    box-shadow: 0 0.1875rem 0.3125rem var(--dark);
}

.mapui__tooltip .tooltip--inner:hover
{
    background: #000000B8;
}

.currentsun .cs-ng,
.nav-2__submenu,
.bg-b,
.rise_graph-item,
.tabs-nav a,
.ff,
form.bg,
form.bg-b,
form.bg-g,
form.bg-r,
form.bg-y,
#weather .night,
.article__body--right,
.api--new .api-contact__wrap,
#fs-nav,
.modal-sb,
#log-fb,
#po1,
.button-form--ghost,
.tad-template-news-index__header,
.tad-teaser__content-wrap,
#c1
{
    background: var(--darker)
}

.tpl-banner__main
{
    background: var(--darker2)
}

.asu a:hover,
#impbut input
{
    background: var(--dark)
}

#weather .day,
.article__sidebar--left,
.main-content-div,
.socrow,
#fs-clock,
.stck,
.bn-header--tools,
.bn-header--tools .bn-header__extra,
.tzconv__pillow
{
    background: var(--darker2)
}

.tad-template-news-index__tabs
{
    box-shadow: inset 0 -5px var(--darker);
}

#log-fb
{
    background: var(--darker2) url(//c.tadst.com/gfx/n/spr_social-2018.png) 0 0 no-repeat !important;
}

#log-gl
{
    background: var(--darker2) url(//c.tadst.com/gfx/n/spr_social-2018.png) 0 -60px no-repeat !important;
}

#log-win
{
    background: var(--darker2) url(//c.tadst.com/gfx/n/spr_social-2018.png) 0 -120px no-repeat !important;
}

.fs-city,
#fshrmin
{
    color: #fbcb40 !important;
}

.my-city__analogClock
{
    background: var(--tp)
}

.rd-inner
{
    border: 0px solid #fff;
}

#weather .section.highlight,
.form-submit.ghost,
.submit.ghost,
[type=submit].ghost,
a.button.ghost
{
    background: var(--dark)!important;
}

.pager-round--item,
.api--new .bn-header--api
{
    background: var(--bw)
}

canvas.wsicon
{
    filter: invert(1)
}

.tad-tag
{
    background: hsl(199, 70%, 20%);
}

div.text,
.weatherTooltip .temp,
.weatherTooltip .wdesc,
.weatherTooltip .date,
.weatherTooltip .mid__block .indent,
div.text,
.weatherTooltip .right__block .indent,
.weatherTooltip .windDirection,
button.tp-conf,
.tad-annotated-map-legend__marker,
.row-content__carousel .carousel__item .carousel__caption,
#fs-nav a,
.planet .name,
.planet .value,
.distance-marker span,
#planet-distances .planet-marker.selected span,
#planet-distances .planet-marker:hover span,
.timeline-markers span,
.date-range-selector .date-range-selector-selected,
.date-range-controls .live,
span.current-date,
span.current-time,
input#hour.hour,
input#min.min,
.date-range-timepicker span
{
    color: var(--lighter) !important
}

.i-font,
.site-nav__title:after
{
    color: var(--accent)!important
}

div.left label,
div.form-row label,
.tb-select label
{
    color: var(--accent1) !important;
}

.alert-notice,
.bn-bg--zebra,
.site-nav-bar__search,
.tad-box-explore
{
    background: var(--darker) !important;
}

.info
{
    background: #000;
}

.warning,
.alert--warning
{
    background: #2E0000;
}

.hl-b
{
    background: #001d34!important;
}

.card
{
    box-shadow: inset 0 -2px 0 var(--dark0);
}

.sep-t td,
.sep-t th
{
    border-top: 2px solid var(--bw)!important;
}

#dstd
{
    color: var(--darker2) !important
}

#fm-feedback textarea,
.tb-body__zebra tr:nth-child(2n)
{
    background: var(--darker)
}

.views__days td.weekend,
.tb-theme thead th,
.tb-body__zebra tr:hover,
.tad-box__actions
{
    background: var(--dark)
}

.headline-banner__title,
#bct,
#bct a,
span.feedback-bar__msg,
ul.btn-grp li.active a,
.site-nav__login,
.views__days td.selected a
{
    color: var(--light) !important;
}

.feedback-bar__contact a,
.feedback-bar__thumb
{
    color: var(--light) !important;
    fill: var(--light)!important
}

svg
{
    fill: var(--light) !important
}

.img-tag,
span.img-day,
span.img-month,
.Sungraph-DetailedGraph__Date,
.form-submit,
.submit,
[type=submit],
a.button,
.modal-title,
.ladda-button,
.ladda-button .ladda-label,
.ladda-button .ladda-spinner,
.bn-header h1,
.bn-header p,
.selected-panel__selected--month,
.selected-panel__selected--day,
.selected-panel__selected--year,
.calpopup,
a.prev,
a.picked-month,
a.picked-year,
a.next,
.selected-panel__selected--day-hint,
#view-toggle span,
.info-panel__jumpto a,
.info-panel__jumpto span,
.info-panel h3,
.info-box-hover,
sup,
.info-box__compare__item--smaller span,
body > div.main-content-div > div.astroplan > div > div.info-panel > div.info-panel__jumpto.fixed,
#planetDiamTot
{
    color: var(--lighter) !important;
}

.right
{
    filter: invert(1)hue-rotate(180deg)brightness(3);
}

.cityClock
{
    background: var(--tp) !important
}

.bn-bg--curved:after,
#view-toggle span.selected
{
    background: var(--darker2)
}

select
{
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--dark) url(//c.tadst.com/gfx/n/select-arrow3.svg) no-repeat 100%;
}

.Sungraph-Legend
{
    background: var(--tp)
}

/* Generic */
.sep-l,
.sep
{
    border-left: 2px solid var(--dark0)!important;
}

tr.bg-wt td,
tr.bg-wt th
{
    background: var(--darker) !important
}

.Sungraph__Hour-Labels
{
    border-bottom: 0px solid transparent;
    padding-bottom: 30px
}

.Sungraph-DetailedGraph__Graph
{
    border-left: 0px solid transparent;
    padding-left: 40px;
    color: var(--lighter) !important
}

.hl
{
    background: var(--dark) !important;
}

.astrotable .graph > td,
.fig-stamp,
.modal-content,
.modal-footer
{
    background: var(--darker) !important
}

.astrotable .selected .sep,
.astrotable .selected td,
.astrotable .selected th,
.astrotable tr.selected
{
    border: 0!important;
    border-top: 2px solid var(--darker2)!important;
}

.astrotable .graph
{
    border: 0!important;
    border-bottom: 2px solid var(--darker2)!important;
}

#lm-key tr.hover
{
    background: var(--dark);
}

.Sungraph__LockedIcon
{
    filter: invert(1)
}

.pager .current
{
    background: var(--dark);
}

.bn-header__extra,
tr.bg-wt td,
tr.bg-wt th,
.zebra tr.c1,
.zebra tr:nth-child(2n),
.currentsun.moon,
[type=email],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
ul.btn-grp li,
.feedback-bar
{
    background: var(--darker);
}

.Sungraph-DetailedGraph,
.Sungraph__Graph-Container
{
    background: var(--tp)
}

.nav-2__item.active,
.nav-2__item:hover,
.nav-3 .active,
.nav-3 a:hover
{
    background: var(--dark);
}

.tb-ap th,
.tb-cc th,
.tb-cl th,
.tb-ff th,
.tb-sm th,
.tb-subtle th,
.tb-tm th,
.tb-tz th,
.tb-wc th,
.tb-wt th,
.footer
{
    background: var(--darker2)
}

.tb-hover tbody tr:hover
{
    background: var(--dark);
}

.footer__social-icon
{
    filter: brightness(0.5)contrast(2.5);
}

.bi,
.rbi
{
    border-right: 1px solid var(--dark0)!important;
}

@media (max-width: 1440px)
{
    .layout-grid--sky
    {
        grid-template-areas: ". hero sky ." ". main sky .";
        -ms-grid-columns: 16px minmax(0, 1fr) minmax(calc(var(--advert-sky-size, 10px) + 5px), max-content) 16px;
        grid-template-columns: 16px minmax(0, 1fr) minmax(calc(var(--advert-sky-size, 10px) + 5px), max-content) 16px
    }
}

#bk-map
{
    display: inhe...