Trading 212 - Dark Diamond FlatUI Theme by davidcraig

/* ==UserStyle==
@name         Trading 212 - Dark Diamond FlatUI Theme
@version      20211102.18.33
@namespace    userstyles.world/user/davidcraig
@description  Dark Blue style with a background, also includes flatui enhancements.
@author       davidcraig
@license      No License
==/UserStyle== */

@-moz-document domain("live.trading212.com") {
:root {
  --closed-bg: #570202;
  --closed-text: #F45B5B;
  --open-bg: #007B07;
  --open-text: #ececec;
  --dark-bg-1: #00000d;
  --dark-bg-2: #132551;
  --dark-bg-3: #000A20;
  --text-secondary: hsl(0, 0%, 40%);
  --dark-border-1: var(--dark-bg-2);
  --diamond-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%23132551' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

* {
  border-color: var(--dark-border-1) !important;
}

/* Darkest Elements */

body {
  background-color: var(--dark-bg-1) !important;
  background-image: var(--diamond-image) !important;
}

.sidepanel,
.bucket-advanced, .bucket-advanced-no-data,
.instruments-panel-wrapper
{
  background: transparent !important;
}

.allocation-section .stacked-bar-chart .chart-item[style*="box-shadow: white 0px 0px 0px 3px"] {
  box-shadow: 0 0 0 3px var(--dark-bg-1) !important;  /* Fixes the white gap between allocation stacked chart items */
}
    
.header-container {
  background: transparent !important;
  border-bottom: none !important;
}

.header-container:before, .sidepanel {
  border-color: var(--dark-bg-2) !important;
}

.company-logo {
  border-right: none !important;
}

[class$="reports-footer-wrapper"] {
  border-bottom: none;
}

/* "Cards" or styled like cards */
.portfolio-summary,
.investments-section,
.invest-instrument-advanced-header,
.invest-chart,
.invest-chart-footer,
.investment,
.invest-instrument-advanced .invest-instrument-advanced-sliding-header,
.instrument-additional-info,
.history-button,
.search-panel,
.search-results,
.search-filter-button,
.ecalendar .ecalendar-body .ecalendar-details .scrollable-items,
.playlist .video-item-container,
.account-status-content,
.dropdown-items,
.allocation-details,
.bucket-advanced-header,
.bucket-main-details,
.bucket-advanced .sliding-header,
.bucket-advanced .bucket-advanced-header, .bucket-advanced .bucket-advanced-holdings, .bucket-advanced .bucket-advanced-no-data, .bucket-advanced .bucket-autoinvest-details, .bucket-advanced .bucket-dividends, .bucket-advanced .bucket-goal, .bucket-advanced .bucket-last-payment-error, .bucket-advanced .bucket-main-details, .bucket-advanced .bucket-removed-holdings, .bucket-advanced .share-bucket,
.bucket-holdings-details-container,
.bucket-holdings-sticky-header,
.auto-invest-details-section .bucket-investment-plan-details, .auto-invest-details-section .bucket-payment-method-details,
.bucket-advanced .bucket-investment-plan-projection-details,
.bucket-projection-progress,
.sidebar .instrument-info .company-details, .sidebar .instrument-info .instrument-additional-info, .sidebar .instrument-info .instrument-info-header-container, .sidebar .instrument-info .investment, .sidebar .instrument-info .pending-orders-list, .sidebar .instrument-info .price-alerts-list,
.instrument-stats,
.bucket-advanced .bucket-actions .bucket-action-item,
.bucket-import-export-icons .export-icon-wrapper, .bucket-import-export-icons .import-icon-wrapper,
.popup-container .invest-instrument-advanced .scrollable-items,
.popup-container .invest-instrument-advanced .scrollable-items .company-details,
.invest.layout.advanced-mode.advanced-mode-animation .sidepanel .main-tabs, .invest.layout:not(.advanced-mode) .sidepanel .main-tabs,
.ecalendar .ecalendar-body .warning-message,
.invest-instrument-advanced .company-details,
.order-dialog,
.pending-orders-list,
.bucket-export-customisation, .bucket-import-customisation,
.bucket-creation .bucket-investing-options .bucket-investing-option,
.bucket-creation.success .bucket-created,
[id$="STEP_BUCKET_INITIAL_DEPOSIT"],
.bucket-review,
.bucket-manage-funds,
.dialog.accent,
.review-order .body
{
  background: var(--dark-bg-3) !important;
  background-color: var(--dark-bg-3) !important;
  border-color: var(--dark-border-1) !important;
  border-radius: 0 !important;
}

/* Icons */
[fill="#6F6F7F"] { fill: #ececec !important; }
[stroke="#6F6F7F"] { stroke: #ececec !important; }

.resizable-container .resizable-container-separator {
  background: var(--dark-bg-3) !important;
}

/* Other BG 3 elements [Medium] */
.highlight-container .highlight-background,
.history-container, .history-content,
[class$="reports-app"],
[class$="reports-footer"],
.trading-chart-tabs .trading-chart-tab-item,
.trading-chart .indicator-separator,
.sidebar .sidebar-header .sidebar-header-option,
.notifications-animation-helper,
.notifications-container,
.notifications-item,
.notifications-arrow,
.positions-table-item,
.advanced-view .data-table-wrapper .data-table .data-table-header-column-wrapper,
.data-table.positions .data-table-header,
.chart-menu,
.chat-container,
.chat-client .department-select .department-select-title,
.chat-client .department-select,
.chat-client .initial-question-header,
.chat-container .chat-content .chat-client .chat-rating-title, .chat-container .chat-content .chat-client .title,
.chat-client .initial-question,
.sub-menu-items,
.order-dialog-header,
.order-dialog .instrument-prices,
.order-dialog .sliding-navigation,
.bucket-advanced .bucket-advanced-header .bucket-info .icon,
[class$="reports-details-wrapper"],
.bucket-export-investments .content, .bucket-import-investments .content,
.bucket-edit,
.bucket-add-slices .search,
.bucket-creation,
.bucket-creation .bucket-investing-options,
.dialog.accent .buttons .confirm-button,
.bucket-investment-plan,
[class*="payments-container"] [class*="current-step"] [class*="description"],
[class*="payments-container"] [class*="scrollable-area"],
[class*="scrollable-area-wrapper"] [class*="scrollable-items"],
[class*="messages"] [class*="message"]
{
  background: var(--dark-bg-3) !important;
  background-color: var(--dark-bg-3) !important;
}

[class$="reports-navigation"] [class$="-export-icon"],
[class$="reports-navigation"] [class$="-calendar-icon"],
.advanced-view .data-table-wrapper,
.trading-chart-explorer .simple-header,
.calendar, .calendar-list
{
  background: var(--dark-bg-2) !important;
  border-color: var(--dark-bg-1);
}

/* Other BG 2 elements [Lightest] */
.investments-section .investment-item:before,
.search-input-wrapper .search-input,
.investments-section .investments-filters .filter-wrapper .dropdown-investments-filter,
[class$="reports-details-row"],
.sidepanel .main-tabs .sidepanel-tab.active,
.advanced-view .data-table-wrapper .data-table-resizable.expanded~.data-table-switcher .data-table-switcher-item.active,
.trading-chart-tabs .trading-chart-tab-item.active,
.advanced-view .data-table-wrapper .data-table, .dropdown-items.data-table-settings-dropdown-items .reset-button-wrapper, .dropdown-items.data-table-settings-dropdown-items .selectable-list-item,
.account-profile .account-actions .action-button,
.chat-client .initial-question .text-area-container,
.chat-client .initial-question textarea,
.tab-item.selected,
[class*="reports-details-wrapper"] [class*="reports-details-row"],
.horizontal-slider-wrapper .horizontal-slider .available-slider,
.labeled-input,
.bucket-personalisation .bucket-personalisation-icon .bucket-change-icon-button
{
  background: var(--dark-bg-2) !important;
  background-color: var(--dark-bg-2) !important;
}

.trading-chart-tabs .close-button-fade,
.trading-chart-tabs .close-button-wrapper {
  background: var(--dark-bg-2) !important;
}

/* Other BG 1 elements [Darkest] */
[class$="reports-item"],
[class$="reports-details-wrapper"] [class$="-heading"],
.trading-chart-layout-button,
.advanced-view .data-table-wrapper .data-table-switcher,
.advanced-view .data-table-header,
.data-table-header-column-wrapper,
.trading-chart-explorer,
.trading-chart-explorer-properties,
.trading-chart-container,
.trading-chart .scale-layer,
.trading-chart .timeline-layer,
.trading-chart-tabs,
.trading-chart-layout.single-mode .trading-chart-layout-header-controls,
.trading-chart-layout-body .trading-chart-layout-content,
.chart-menu .trading-chart-control-icon,
.ecalendar .e...