test.user.css

/* ==UserStyle==
@name           Pocket Casts Dark Blue
@version        2020.9.9-1
@description    An alternative dark theme for the Pocket Casts web player
@author         camdecoster
@namespace      camdecoster.io
@homepageURL    https://github.com/camdecoster/pocket-casts-dark-blue
@supportURL     https://github.com/camdecoster/pocket-casts-dark-blue/issues
@updateURL      https://raw.githubusercontent.com/camdecoster/pocket-casts-dark-blue/master/pocket-casts-dark-blue.user.css
@license        CC-BY-NC-SA-4.0
==/UserStyle== */
@-moz-document url-prefix("https://play.pocketcasts.com/") {
  :root {
    --blue-dark: #040084;
    --blue-medium: #0141cf;
    --blue-light: #1874d2;
    --blue-lighter: #5392d1;
    --orange-dark: #fd6600;
    --orange-medium: #fd7f00;
    --orange-light: #fecc98;
    --red-dark: #ff3c31;
    --red-medium: #ff635c;
    --red-light: #ff9995;
    --light: white;
    --light-accent: #afafaf;
    --light-accent-2: #7d7d7d;
    --badge: var(--orange-dark);
    --icon-cancel-light-accent: url("data:image/svg+xml,<svg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><title>icon/cancelsearch copy</title><g transform='rotate(45 -.364 21.364)' fill='rgb(175, 175, 175)' fill-rule='evenodd'><rect x='5' width='2' height='12' rx='1'/><rect y='5' width='12' height='2' rx='1'/></g></svg>");
    --icon-back-arrow-blue-light: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3Eicon%2Farrow%3C%2Ftitle%3E%3Cdefs%3E%3Cpath%20d%3D%22M16.172%2011H4.592c-.555%200-1.006.444-1.006%201%200%20.552.45%201%201.007%201h11.579l-5.293%205.293c-.39.39-.39%201.024%200%201.414.39.39%201.023.39%201.414%200L20%2012l-7.707-7.707c-.39-.39-1.024-.39-1.414%200-.39.39-.39%201.024%200%201.414L16.172%2011z%22%20id%3D%22a%22%2F%3E%3C%2Fdefs%3E%3Cuse%20fill%3D%22%231874d2%22%20transform%3D%22matrix(-1%200%200%201%2023.586%200)%22%20xlink%3Ahref%3D%22%23a%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
    --logo: url("data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M54 27C54 41.912 41.912 54 27 54C12.088 54 0 41.912 0 27C0 12.088 12.088 0 27 0C41.912 0 54 12.088 54 27Z' fill='%23FD6600'></path><path fill-rule='evenodd' clip-rule='evenodd' d='M6 27C6 15.402 15.402 6 27 6C38.598 6 48 15.402 48 27H42.75C42.75 18.3015 35.6985 11.25 27 11.25C18.3015 11.25 11.25 18.3015 11.25 27C11.25 35.6985 18.3015 42.75 27 42.75V48C15.402 48 6 38.598 6 27ZM27 39.6C20.0412 39.6 14.4 33.9588 14.4 27C14.4 20.0412 20.0412 14.4 27 14.4C33.9588 14.4 39.6 20.0412 39.6 27H35.0182C35.0182 22.5717 31.4283 18.9818 27 18.9818C22.5717 18.9818 18.9818 22.5717 18.9818 27C18.9818 31.4283 22.5717 35.0182 27 35.0182V39.6Z' fill='white'></path></svg>");
    --icon-badge: url("data:image/svg+xml,<?xml version='1.0' encoding='UTF-8'?><svg xmlns='http://www.w3.org/2000/svg' width='62' height='62' viewBox='0 0 62 62' fill='none'><path stroke='%23040084' d='m60.737803,0.679407l0,59.837397l-60.487803,-59.837397l60.487803,0z' stroke-width='6.5' fill='%23FD7F00'/><line stroke-linecap='null' stroke-linejoin='null' y2='63' x2='58' y1='4' x1='-1' stroke='%23007fff' stroke-width='1.5' fill='none'/></svg>");
    --icon-date: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2216%22%20viewBox%3D%220%200%2014%2016%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22%23E0E6EA%22%20rx%3D%222%22%2F%3E%3Cpath%20fill%3D%22%231874D2%22%20d%3D%22M2%204h10v8H2z%22%2F%3E%3Cpath%20fill%3D%22%23E0E6EA%22%20d%3D%22M2%201h10v3H2zM7.652%2010.776c.448%200%20.808-.368.808-.808v-3.76c0-.512-.416-.928-.928-.928-.256%200-.488.104-.656.264L5.436%206.96c-.12.12-.2.288-.2.472%200%20.36.296.656.656.656.184%200%20.344-.08.464-.192l.488-.48v2.552c0%20.44.36.808.808.808z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    --icon-check-mark: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3Cpath%20d%3D%22M15.2366%208.35408C15.5934%207.93247%2016.2243%207.87989%2016.6459%208.23663C17.0675%208.59338%2017.1201%209.22436%2016.7634%209.64596L10.5614%2016.9756L6.79289%2013.2071C6.40237%2012.8166%206.40237%2012.1834%206.79289%2011.7929C7.18342%2011.4024%207.81658%2011.4024%208.20711%2011.7929L10.4386%2014.0244L15.2366%208.35408Z%22%20fill%3D%22%23FD6600%22%2F%3E%0D%0A%3C%2Fsvg%3E");
    --icon-plus-dark: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%203C8.55228%203%209%203.44772%209%204V7H12C12.5523%207%2013%207.44772%2013%208C13%208.55228%2012.5523%209%2012%209H9V12C9%2012.5523%208.55228%2013%208%2013C7.44772%2013%207%2012.5523%207%2012V9H4C3.44772%209%203%208.55228%203%208C3%207.44772%203.44772%207%204%207H7V4C7%203.44772%207.44772%203%208%203Z%22%20fill%3D%22%23FD6600%22%2F%3E%0D%0A%3C%2Fsvg%3E");
    --icon-plus-light: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%203C8.55228%203%209%203.44772%209%204V7H12C12.5523%207%2013%207.44772%2013%208C13%208.55228%2012.5523%209%2012%209H9V12C9%2012.5523%208.55228%2013%208%2013C7.44772%2013%207%2012.5523%207%2012V9H4C3.44772%209%203%208.55228%203%208C3%207.44772%203.44772%207%204%207H7V4C7%203.44772%207.44772%203%208%203Z%22%20fill%3D%22%23FECC98%22%2F%3E%0D%0A%3C%2Fsvg%3E");
    --icon-profile: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30' height='30' viewBox='0 0 30 30'><defs><rect id='profile-big-a' width='30' height='30' rx='15'/></defs><g fill='none' fill-rule='evenodd'><mask id='profile-big-b' fill='%23FD6600'><use xlink:href='%23profile-big-a'/></mask><rect width='28' height='28' x='1' y='1' stroke='%23FD6600' stroke-width='2' rx='14'/><circle cx='15' cy='12' r='5' stroke='%23FD6600' stroke-width='2' mask='url(%23profile-big-b)'/><ellipse cx='15' cy='25.5' stroke='%23FD6600' stroke-width='2' mask='url(%23profile-big-b)' rx='9' ry='8.5'/></g></svg>");
  }
  .app,
  .app.dark-theme {
    background: var(--blue-dark);
    color: var(--light);
  }
  a[class^="FriendlyUrl__FriendlyLink"] {
    color: var(--orange-medium);
  }
  a[class^="FriendlyUrl__FriendlyLink"]:hover {
    color: var(--orange-light);
  }
  /* Replace profile icon. Is this necessary? */
  /* 	div[class^="styled__ProfileIconWrapper"] img {
		height: 0;
		width: 0;
		padding: 30px 0 0 30px;
		background-image: var(--icon-profile);
	} */
  .episode-popup .dialog {
    background-color: var(--blue-light);
  }
  .episode-popup .dialog .header .title .titleBox .episodeTitle {
    color: var(--light);
  }
  .image-text-option .option-title,
  .image-text-option .option-title .dark-theme,
  .image-text-option .option-title-no-svg,
  .image-text-option .dark-theme .option-title-no-svg {
    color: var(--light);
  }
  .image-text-option:hover {
    background-color: var(--blue-medium);
  }
  .image-text-option .option-title-no-svg[style^="color"] {
    color: var(--orange-medium) !important;
  }
  .show-notes {
    color: var(--light-accent);
  }
  .show-notes a {
    color: var(--orange-medium);
  }
  .show-notes a:hover {
    color: var(--orange-light);
  }
  div[class^="styled__PodcastImageBadge"] {
    background-image: var(--icon-badge);
  }
  img[class^="styled__PodcastImg"] {
    border: 1px solid var(--blue-light);
  }
  a[class^="styled__RoundelLink"] img {
    content: var(--logo);
  }
  nav[class*="styled__NavigationWrapper"] {
    background: var(--blue-dark);
    border-right-color: var(--blue-medium);
  }
  div[class^="styled__IconSmallWrapper"] {
    color: var(--blue-medium);
  }
  div[class^="styled__NavigationOptionSmallWrapper"]:hover div[class^="styled__IconSmallWrapper"] {
    color: var(--blue-light);
  }
  div[class^="styled__IconSmallWrapper"][color="#3A3A3B"],
  div[class^="styled__IconSmallWrapper"][color="#FFFFFF"] {
    color: var(--orange-dark);
  }
  div[class^="styled__NavigationOptionSmallWrapper"]:hover div[class^="styled__IconSmallWrapper"][color="#3A3A3B"],
  div[class^="styled__NavigationOptionSmallWrapper"]:hover div[class^="styled__IconSmallWrapper"][color="#FFFFFF"] {
    color: var(--orange-light);
  }
  a[class^="styled__NavigationOptionLink"] {
    color: var(--blue-medium);
  }
  a[class^="styled__NavigationOptionLink"] path {
    color: var(--blue-medium);
  }
  div[class^="styled__NotchWrapper"] path {
    fill: var(--blue-light);
  }
  /* styled__NotchWrapper */
  a[class^="styled__NavigationOptionLink"]:hover {
    color: var(--blue-light);
  }
  a[class^="styled__NavigationOptionLink"]:hover path {
    fill: var(--blue-light);
  }
  a[class^="styled__NavigationOptionLink"][color="#000000"],
  a[class^="styled__NavigationOptionLink"][color="#FFFFFF"] {
    color: var(--orange-dark);
  }
  a[class^="styled__NavigationOptionLink"][color="#000000"]:hover,
  a[class^="styled__NavigationOptionLink"][color="#FFFFFF"]:hover {
    color: var(--orange-light);
  }
  a[class^="styled__NavigationOptionLink"][color="#000000"] path,
  a[class^="styled__NavigationOptionLink"][color="#FFFFFF"] path {
    fill: var(--orange-dark);
  }
  a[class^="styled__NavigationOptionLink"][color="#000000"]:hover path,
  a[class^="styled__NavigationOptionLink"][color="#FFFFFF"]:hover path {
    fill: var(--orange-light);
  }
  header[class^="styled__HeaderWrapper"] {
    border-bottom-color: var(--blue-medium);
  }
  /* Search box START */
  .search-widget input,
  .dark-theme .search-widget input {
    background-color: var(--blue-light);
    border-color: var(--blue-medium);
    color: var(--light);
  }
  .search-widget input::placeholder {
    color: var(--light);
  }
  .search-widget.text-entered input,
  .search-widget.text-focused input {
    background-color: var(--blue-light);
    color: var(--light);
    border-color: var(--blue-medium);
  }
  .search-widget .search-results,
  .dark-theme .search-widget .search-results {
    background-color: var(--blue-light);
    border-color: var(--blue-medium);
  }
  .search-widget .search-results .search-result,
  .dark-theme .search-widget .search-results .search-result {
    background-color: var(--blue-light);
  }
  .search-widget .search-results .search-result:hover,
  .dark-theme .search-widget .search-results .search-result:hover {
    background-color: var(--blue-medium);
  }
  .search-widget .search-results .search-result .podcast-title,
  .dark-theme .search-widget .search-results .search-result .podcast-title {
    color: var(--light);
  }
  .search-widget .search-results .search-result .podcast-author,
  .dark-theme .search-widget .search-results .search-result .podcast-author {
    color: var(--light-accent);
  }
  /* Search box END */
  /* Drop down menu
START */
  div[class^="styled__ProfileDroplist"] {
    background-color: var(--blue-light);
    border: 1px solid var(--blue-medium);
  }
  div[class^="styled__Separator"] {
    border-color: var(--blue-medium);
  }
  div[class^="styled__ProfileMenuItemWrapper"]:hover {
    background-color: var(--blue-medium);
  }
  p[class*="styled__ProfileSubtitleText"],
  div[class^="styled__ProfileChevronWrapper"],
  p[class*="styled__FilesCountText"],
  p[class*="styled__FilesFullText"] {
    color: var(--light-accent);
  }
  /* Drop down menu
END */
  /* Options bar
START */
  section[class^="styled__OptionsHeaderWrapper"] {
    border-bottom-color: var(--blue-medium);
  }
  button[class^="styled__OptionWrapper"] path {
    fill: var(--blue-light);
  }
  button[class^="styled__OptionWrapper"] #always-opacity-1 {
    fill: var(--badge);
  }
  /* Options bar
END */
  .image-loaded.small-image {
    border: 1px solid var(--blue-medium);
  }
  /* Player controls
START */
  /* 	div[class^="styled__LayoutFooter"] { */
  .player-controls {
    background-color: var(--blue-dark);
    border-top: 1px solid var(--blue-medium);
  }
  .popup .popup-window,
  .dark-theme .popup .popup-window {
    background-color: var(--blue-light);
    border: 1px solid var(--blue-medium);
  }
  .up-next h1,
  .dark-theme .up-next h1 {
    color: var(--light);
  }
  .up-next .clear-up-next,
  .dark-theme .up-next .clear-up-next {
    color: var(--orange-dark);
  }
  .up-next .clear-up-next:hover,
  .dark-theme .up-next .clear-up-next:hover {
    color: var(--orange-light);
  }
  .up-next-row .description,
  .dark-theme .up-next-row .description {
    color: var(--light-accent);
  }
  .up-next-row .title,
  .dark-theme .up-next-row .title {
    color: var(--light);
  }
  .up-next-row:hover,
  .dark-theme .up-next-row:hover,
  .up-next-row.sorting,
  .dark-theme .up-next-row.sorting {
    background-color: var(--blue-medium);
  }
  /* Player controls
END */
  /* Podcast page START */
  div[class^="styled__Arrow"] {
    background-image: var(--icon-back-arrow-blue-light);
  }
  p[class^="styled__BackButtonText"] {
    color: var(--blue-light);
  }
  h1[class^="styled__PodcastTitle"],
  div[class^="styled__TextWithReadMoreContainer"] {
    color: var(--light);
  }
  .share-button svg g {
    fill: var(--blue-light) !important;
  }
  .sub5cribe-button-large.sub5cribe,
  .dark-theme .sub5cribe-button-large.sub5cribe,
  .sub5cribe-button-large.sub5cribed,
  .dark-theme .sub5cribe-button-large.sub5cribed {
    background-color: var(--blue-light);
    color: var(--light);
  }
  .sub5cribe-button-large.sub5cribe:hover,
  .sub5cribe-button-large.unsub5cribe {
    background-color: var(--orange-medium);
    color: var(--light);
  }
  .page-podcast .podcast-information .podcast-details h2,
  .dark-theme .page-podcast .podcast-information .podcast-details h2,
  .page-podcast .podcast-information .podcast-details .next-episode-text,
  .dark-theme .page-podcast .podcast-information .podcast-details .next-episode-text {
    color: var(--blue-light);
  }
  .text-with-read-more,
  .dark-theme .text-with-read-more,
  .page-podcast .episode-summary,
  .dark-theme .page-podcast .episode-summary {
    color: var(--light-accent);
  }
  .separator,
  .dark-theme .separator {
    border-color: var(--blue-medium);
  }
  input.episode-search-input {
    background-color: var(--blue-dark);
    color: var(--light);
  }
  .page-podcast .episode-rows .search-box input::placeholder {
    color: var(--light-accent);
  }
  /* Podcast page END */
  /* Podcast settings page START */
  div[class^="styled__SettingsEdit"] input {
    background-color: var(--blue-light);
  }
  p[class*="styled__SettingsRowDescription"] {
    color: var(--light-accent);
  }
  /* Podcast settings page END */
  /* Episode elements START */
  .episodes-table .row,
  .dark-theme .episodes-table .row {
    border-bottom-color: var(--blue-medium);
  }
  section[class^="styled__PodcastRowData"] {
    border-bottom-color: var(--blue-medium);
  }
  .episodes-table .row:hover .episode-table-cell .text .text-primary,
  .dark-theme .episodes-table .row:hover .episode-table-cell .text .text-primary {
    color: var(--orange-light) !important;
  }
  .episode-table-cell .text .text-primary,
  .dark-theme .episode-table-cell .text .text-primary {
    color: var(--light);
  }
  .episodes-table .row .published,
  .dark-theme .episodes-table .row .published,
  .episodes-table .row .duration,
  .dark-theme .episodes-table .row .duration {
    color: var(--light-accent);
  }
  .episode-table-cell .text .text-primary .episode-row .season-special {
    color: var(--blue-light) !important;
  }
  .episode-table-cell .text .text-primary .episode-row .season,
  .dark-theme .episode-table-cell .text .text-primary .episode-row .season {
    color: var(--light-accent);
  }
  .row.played .episode-table-cell .text .text-primary,
  .dark-theme .row.played .episode-table-cell .text .text-primary {
    color: var(--light-accent);
  }
  .row.archived .episode-table-cell .text .text-primary,
  .dark-theme .row.archived .episode-table-cell .text .text-primary,
  .dark-theme .episodes-table .row .actions .actions-panel .archived-status {
    color: var(--light-accent-2);
  }
  /* Episode elements END */
  /* Episode pop-up START */
  /* Need to update cancel icon */
  /* .icon-cancel {
        background-image: var(--icon-cancel-light-accent);
    } */
  div[class^="styled__PodcastLink"] {
    color: var(--orange-medium);
  }
  div[class^="styled__PodcastLink"]:hover {
    color: var(--orange-light);
  }
  .icon-date,
  .dark-theme .icon-date {
    background-image: var(--icon-date);
  }
  div[class^="styled__PopupMenuInfo"] span {
    color: var(--light-accent);
  }
  /* Episode pop-up END */
  .menu-popup .popup-window > div.selected {
    color: var(--orange-medium);
  }
  /* List view adjustments START */
  .podcasts-list tr td .text .podcast-title {
    color: var(--light);
  }
  .podcasts-list tr td {
    border-bottom-color: var(--blue-medium);
  }
  /* List view adjustments END */
  /* Discover adjustments START */
  .discover-carousel .carousel-card .card .featured-badge {
    color: var(--blue-light);
  }
  .discover-carousel .slick-dots li a img,
  .podcast-image .image img.image-loaded {
    border: 1px solid var(--blue-medium);
  }
  .discover-carousel .carousel-card .card .author {
    color: var(--orange-dark);
  }
  .discover-carousel .carousel-card .card .description {
    color: var(--light-accent);
  }
  .discover-section .header h1,
  .podcast-list .discover-podcast .podcast-text .title,
  .discover-single .podcast-single-text .title,
  div[class^="styled__CollectionTitle"] {
    color: var(--light);
  }
  .podcast-list .discover-podcast,
  .dark-theme .podcast-list .discover-podcast {
    border-right-color: var(--blue-dark);
  }
  .sub5cribe-button.design-1 {
    background-image: var(--icon-plus-light);
  }
  .sub5cribe-button.design-1:hover {
    background-image: var(--icon-plus-dark);
  }
  .sub5cribe-button.sub5cribed.design-1 {
    background-image: var(--icon-check-mark);
  }
  div[class^="styled__StyledArrowButton"] span {
    color: var(--blue-light);
  }
  div[class^="styled__StyledArrowButton"] .arrow {
    background-color: var(--blue-light);
    color: var(--blue-light);
  }
  /* Discover adjustments END */
  /* Show archived episodes menu START */
  .image-text-switch-option .option-title {
    color: var(--light);
  }
  .image-text-switch-option:hover,
  .dark-theme .image-text-switch-option:hover,
  .image-text-option:hover,
  .dark-theme .image-text-option:hover {
    background-color: var(--blue-medium);
  }
  /* Show archived episodes menu END */
  /* Profile page START */
  div[class^="styled__EmailBox"],
  div[class^="styled__DetailsBox"] {
    background-color: var(--blue-light);
    border-color: var(--blue-medium);
  }
  div[class^="styled__PictureBox"] {
    border: 1px solid var(--blue-medium);
  }
  div[class^="styled__CombinedSubscriptionWrapper"] p {
    color: var(--light-accent);
  }
  div[class^="styled__FreeWrapper"] p {
    color: var(--orange-dark);
  }
  /* div[class^="styled__SwitchWrapper"]  */
  .switch .line,
  .dark-theme .switch .line {
    background-color: var(--orange-light);
  }
  /* div[class^="styled__SwitchWrapper"]  */
  .switch.on .line,
  .dark-theme .switch.on .line {
    background-color: var(--orange-dark) !important;
  }
  div[class^="styled__Info"] p[class^="typography__H70"] {
    color: var(--light-accent);
  }
  /* Profile page END */
  /* Files page START */
  div[class^="styled__EmptyStateBox"] {
    background-color: var(--blue-light);
    border-color: var(--blue-medium);
  }
  div[class^="styled__EmptyStateBox"]:hover {
    background-color: var(--light);
    color: var(--blue-dark);
  }
  div[class^="styled__EmptyStateWrapper"] p {
    color: var(--light-accent);
  }
  /* Files page END */
  div[class^="styled__EpisodeDialog"] {
    background-color: var(--blue-light);
  }
  /* Archive all dialog START */
  .archive-all-popup .dialog,
  .dark-theme .archive-all-popup .dialog {
    background-color: var(--blue-dark);
  }
  .close-button,
  .dark-theme .close-button {
    /* NEED TO UPDATE BACKGROUND IMAGE HERE */
  }
  .archive-all-popup .dialog .dialog-content .icon-wrapper path {
    fill: var(--blue-lighter);
  }
  .archive-all-popup .dialog .dialog-content h2,
  .dark-theme .archive-all-popup .dialog .dialog-content h2 {
    color: var(--light);
  }
  .archive-all-popup .dialog .dialog-content .body-text,
  .dark-theme .archive-all-popup .dialog .dialog-content .body-text {
    color: var(--light-accent);
  }
  button[kind="secondary"] {
    background-color: var(--blue-light);
    color: var(--light);
    border-color: var(--blue-light);
  }
  button[kind="secondary"]:hover {
    background-color: var(--blue-medium);
    color: var(--light);
    border-color: var(--blue-medium);
  }
  button[kind="secondary"]:active {
    background-color: var(--blue-lighter);
    color: var(--blue-dark);
    border-color: var(--blue-lighter);
  }
  button[kind="primary"] {
    background-color: var(--orange-medium);
    color: var(--light);
    border-color: var(--orange-medium);
  }
  button[kind="primary"]:hover {
    background-color: var(--orange-dark);
    color: var(--light);
    border-color: var(--orange-dark);
  }
  button[kind="primary"]:active {
    background-color: var(--orange-light);
    color: var(--orange-dark);
    border-color: var(--orange-light);
  }
  /* Archive all dialog END */
  /* Upload dialog START */
  div[class^="styled__UploadManagerWrapper"] {
    border-color: var(--blue-medium);
    background-color: var(--blue-light);
  }
  div[class^="styled__UploadManagerHeaderWrapper"] {
    border-bottom-color: transparent;
  }
  div[class^="styled__StatusWrapper"] p[class^="typography__H70"] {
    color: var(--light);
  }
  div[class^="styled__UploadingFileItemWrapper"] {
    border-bottom-color: transparent;
  }
  div[class^="styled__UploadingFileItemWrapper"]:hover {
    background-color: var(--blue-dark);
  }
  /* Upload dialog END */
  .loader-square .spinners div,
  .dark-theme .loader-square .spinners div,
  .dark .loader-square .spinners div {
    background-color: var(--orange-medium);
  }
}