☰

EMPeror Dark Theme

OLED Dark Style

  1. /* ==UserStyle==
  2. @name           EMPeror Dark Theme
  3. @namespace      github.com/openstyles/stylus
  4. @version        1.0.7
  5. @description    OLED Dark Style
  6. @author         bighype
  7. @license        MIT
  8. ==/UserStyle== */
  9. @-moz-document regexp("^https:\\/\\/www\\.empornium\\.(sx|is).+") {
  10.     :root {
  11.         --background: #000;
  12.         --background-light: #0c0c0c;
  13.         --selection-text: #1d1f21;
  14.         --font-color: #e1e1e1;
  15.         --emp-dark-blue: #07206E;
  16.         --emp-light-blue: #07c;
  17.         --emp-dark-red: #350b0b;
  18.         --emp-light-red: #840000;
  19.         --emp-light-green: #135300;
  20.     }
  21.     body {
  22.         background-image: none !important;
  23.         color: var(--font-color) !important;
  24.         background-color: var(--background) !important;
  25.         border-color: var(--selection-text) !important;
  26.         font-size: small;
  27.     }
  28.     h1,
  29.     h2 {
  30.         color: var(--font-color);
  31.     }
  32.     #content {
  33.         width: initial;
  34.         min-width: initial;
  35.         max-width: initial;
  36.         margin: initial;
  37.     }
  38.     span.s-tag.s-good a {
  39.         color: var(--font-color) !important;
  40.         /* font-weight: bold !important; */
  41.     }
  42.     span.s-tag.s-disliked > a {
  43.         color: var(--font-color) !important;
  44.         /* font-weight: bold !important; */
  45.     }
  46.     input[type="checkbox"] {
  47.         transform: scale(1.7);
  48.         accent-color: var(--emp-light-blue);
  49.         opacity: 0.6;
  50.         margin-right: 2px;
  51.     }
  52.     table input[type="checkbox"] + label {
  53.         font-size: 16px;
  54.     }
  55.     input[type="checkbox"]:checked {
  56.         background-size: cover;
  57.         padding: 2px;
  58.     }
  59.     select,
  60.     .inputtext,
  61.     .smallish,
  62.     .smallest {
  63.         background: var(--background-light);
  64.         color: var(--font-color);
  65.     }
  66.     input[type=text]:read-only {
  67.         background: #222;
  68.         color: var(--font-color);
  69.     }
  70.     textarea {
  71.         background-image: initial;
  72.         background-color: var(--background);
  73.         color: var(--font-color);
  74.     }
  75.  
  76.     .s-tag.s-staff a {
  77.         max-width: initial;
  78.     }
  79.     .details .sidebar,
  80.     #requests .sidebar {
  81.         width: 330px;
  82.     }
  83.     .details .middle_column,
  84.     #requests .middle_column {
  85.         margin: 0px 330px 10px 0px;
  86.     }
  87.     input {
  88.         background: #666;
  89.         color: var(font-color);
  90.     }
  91.     input[type="submit"],
  92.     input[type="button"],
  93.     #threadman-save-settings {
  94.         background-color: var(--emp-dark-blue);
  95.         border: 1px solid transparent;
  96.         border-radius: 3px;
  97.         box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset;
  98.         box-sizing: border-box;
  99.         color: var(--font-color);
  100.         cursor: pointer;
  101.         font-size: 13px;
  102.         margin: 0;
  103.         outline: none;
  104.         padding: 4px .6em;
  105.         position: relative;
  106.         text-align: center;
  107.         text-decoration: none;
  108.         user-select: none;
  109.         -webkit-user-select: none;
  110.         touch-action: manipulation;
  111.         vertical-align: baseline;
  112.         white-space: nowrap;
  113.     }
  114.  
  115.     input[type="submit"]:hover,
  116.     input[type="submit"]:focus,
  117.     input[type="button"]:hover,
  118.     input[type="button"]:focus {
  119.         background-color: var(--emp-light-blue);
  120.     }
  121.     input {
  122.         background: var(--background);
  123.         color: var(--font-color);
  124.     }
  125.     input[type="submit"]:focus,
  126.     input[type="button"]:focus {
  127.         box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
  128.     }
  129.  
  130.     input[type="submit"]:active,
  131.     input[type="button"]:active {
  132.         background-color: var(--emp-light-blue);
  133.         box-shadow: none;
  134.     }
  135.     .blueButton,
  136.     .infoButton {
  137.         background: var(--emp-light-blue);
  138.     }
  139.     .greenButton {
  140.         background: var(--emp-light-green);
  141.     }
  142.     .orangeButton {
  143.         background: #b54e07;
  144.     }
  145.     .filter_torrents .inputtext {
  146.         width: 80%;
  147.     }
  148.     .button_sort.sort_select {
  149.         background-color: var(--emp-light-blue);
  150.         color: var(--font-color);
  151.     }
  152.     .bbcode {
  153.         background-image: none !important;
  154.     }
  155.     hr {
  156.         border-color: #222;
  157.         opacity: 0.5;
  158.     }
  159.     span.bbcode.tooltip[title="Se7enSeas"] {
  160.         display: none;
  161.     }
  162.     div#logo {
  163.         filter: invert(100%);
  164.         opacity: 0.5;
  165.         transition: opacity 0.3s ease-in-out;
  166.         /* display: none; */
  167.     }
  168.     div#logo:hover {
  169.         filter: invert(0);
  170.         opacity: 1;
  171.     }
  172.  
  173.     /* Links */
  174.     a,
  175.     .head a,
  176.     .torrent_table .linkbox a {
  177.         color: var(--emp-light-blue);
  178.     }
  179.     .linkbox a,
  180.     .breadcrumbs a {
  181.         color: var(--font-color);
  182.     }
  183.     #menu a {
  184.         color: var(--font-color);
  185.     }
  186.     #menu a:hover {
  187.         background-color: var(--emp-dark-blue);
  188.     }
  189.     #header_bottom a:hover {
  190.         background-color: var(--emp-dark-blue);
  191.     }
  192.     .label {
  193.         background-color: var(--background);
  194.     }
  195. .redbar a, .orangebar a {
  196.     color: var(--emp-light-blue);
  197. }
  198.     /* Tables */
  199.     tr {
  200.         background-color: var(--background);
  201.     }
  202.     td {
  203.         /* background-color: var(--background-light); */
  204.         background-color: var(--background);
  205.     }
  206.     td a {
  207.         font-size: 1em;
  208.     }
  209.     table.boxstat td {
  210.         background-color: var(--background);
  211.     }
  212.     table.boxstat a,
  213.     table.boxstat a:visited {
  214.         color: var(--font-color);
  215.     }
  216.     table.boxstat {
  217.         color: rgb(249, 240, 226);
  218.     }
  219.     .cat_list tr td {
  220.         background-color: var(--background);
  221.     }
  222.     tr.rowa,
  223.     .rowa {
  224.         background-color: var(--background-light);
  225.     }
  226.     tr.rowb,
  227.     .rowb {
  228.         background-color: var(--background);
  229.     }
  230.     table.border {
  231.         border: 1px solid var(--background-light);
  232.     }
  233.     table input[type="checkbox"] + label {
  234.         font-size: 0.9em;
  235.     }
  236.  
  237.     #articles tr.colhead,
  238.     #forums tr.colhead,
  239.     #top10 tr.colhead,
  240.     #torrents tr.colhead,
  241.     #staff tr.colhead,
  242.     #collage tr.colhead,
  243.     #staffpm tr.colhead,
  244.     #staffpms tr.colhead,
  245.     #tools tr.colhead,
  246.     #userhistory tr.colhead,
  247.     #user tr.colhead,
  248.     #reports tr.colhead,
  249.     #requests tr.colhead,
  250.     #upload tr.colhead,
  251.     #tags tr.colhead,
  252.     #inbox tr.colhead {
  253.         background-color: var(--background-light);
  254.         color: #999;
  255.     }
  256.     .box {
  257.         background: var(--background);
  258.     }
  259.     .font_icon.forum_icons.forum_hint_unread {
  260.         background-image: linear-gradient(rgb(0, 33, 49) 0%, rgb(0, 0, 0) 100%);
  261.         background-color: initial;
  262.         -webkit-text-fill-color: transparent;
  263.         -webkit-text-stroke-color: rgb(78, 153, 200);
  264.     }
  265.     #searchbars input.searchbox {
  266.         background-color: rgb(31, 33, 34);
  267.         border-width: 0px;
  268.         border-style: initial;
  269.         border-color: initial;
  270.         color: rgb(207, 198, 182);
  271.     }
  272.     #searchbars .searchbutton {
  273.         background-image: initial;
  274.         background-color: rgb(31, 33, 34);
  275.         border-width: 0px;
  276.         border-style: initial;
  277.         border-color: initial;
  278.     }
  279.     #searchbars .searchcontainer {
  280.         display: inline-block;
  281.         background-color: rgb(31, 33, 34);
  282.         border: 1px solid black;
  283.         color: #ccc;
  284.         position: relative;
  285.         width: 10%;
  286.         min-width: 110px;
  287.         border-radius: 6px;
  288.         white-space: nowrap;
  289.     }
  290.  
  291.     .font_icon.torrent_icons.icon_torrent_okay,
  292.     .font_icon.torrent_icons.download,
  293.     .font_icon.torrent_icons.icon_torrent_bonus.bonus,
  294.     .font_icon.torrent_icons.bookmark {
  295.         opacity: 0.6;
  296.     }
  297.     #footer img {
  298.         opacity: 0.5;
  299.         transition: opacity 0.3s ease-in-out;
  300.     }
  301.     #footer img:hover {
  302.         opacity: 1;
  303.     }
  304.     h2 a img {
  305.         opacity: 0.8;
  306.     }
  307.     /* OPTIONAL: hide the modal download details */
  308.     #modal_content .details.thin {
  309.         display: none !important;
  310.     }
  311.     .alertbar {
  312.         background-color: var(--emp-dark-blue);
  313.     }
  314.  
  315.     .head {
  316.         background: var(--background-light);
  317.         color: var(--font-color);
  318.     }
  319.     .top_info {
  320.         background: var(--background);
  321.     }
  322.  
  323.     input[type="text"],
  324.     input[type="password"] {
  325.         background: var(--background-light);
  326.         color: var(--font-color);
  327.     }
  328.  
  329.     /*Tags and script specific modifications */
  330.     span.s-tag.s-disliked {
  331.         background-image: initial;
  332.         background-color: #340000;
  333.         border-bottom-color: #9c0000;
  334.     }
  335.     span.s-tag.s-good {
  336.         background-image: initial;
  337.         background-color: #2a4811;
  338.         border-bottom-color: #716757;
  339.     }
  340.     span.s-tag.s-useless {
  341.         background: #7b7b7b;
  342.     }
  343.     .user_name {
  344.         background-color: #242424;
  345.         border: 1px solid #999;
  346.     }
  347.     .tag_inner .s-tag {
  348.         color: var(--font-color);
  349.         background-color: #1b1d1d;
  350.         border-bottom: 1px solid #232a01;
  351.     }
  352.     .tag_inner .s-tag > a {
  353.         color: var(--font-color);
  354.     }
  355.     .s-add-good,
  356.     .s-remove-good {
  357.         background: #5a7454;
  358.         border: 1px solid var(--emp-light-green);
  359.     }
  360.     .s-add-disliked,
  361.     .s-remove-disliked {
  362.         background: #9E3333;
  363.         border: 1px solid var(--emp-light-red);
  364.     }
  365.     .s-add-terrible,
  366.     .s-remove-terrible {
  367.         background: #333;
  368.         border: 1px solid var(--background);
  369.     }
  370.  
  371.     .messagebar {
  372.         background-color: #2a4811;
  373.         border: 1px solid #0a390a;
  374.     }
  375.     .messagebar.alert {
  376.         background-color: var(--emp-light-red);
  377.         border: 1px solid var(--emp-dark-red);
  378.     }
  379.  
  380.     #s-conf-wrapper,
  381.     #s-conf-form {
  382.         background-color: var(--background);
  383.         color: var(--font-color);
  384.         box-shadow: 0 0 20px var(--background);
  385.     }
  386.     /*    
  387.     .tab-row-container a.s-conf-tab {
  388.         color: var(--font-color);
  389.     }
  390.     .tab-row-container a.s-conf-tab:hover {
  391.         color: var(--background);
  392.     }
  393.     */
  394.     .tab-row-container .s-selected a.s-conf-tab {
  395.         background-color: white;
  396.         color: var(--background);
  397.     }
  398.     #s-conf-content textarea {
  399.         background-color: var(--background);
  400.         color: var(--font-color);
  401.     }
  402.     #s-conf-status.s-success {
  403.         color: var(--background);
  404.     }
  405.     #autoresults {
  406.         background-color: var(--background);
  407.         color: var(--font-color);
  408.     }
  409.     /* make almost all user posting themes compliant */
  410.     .bbcode {
  411.         background-color: var(--background) !important;
  412.         color: var(--font-color) !important;
  413.     }
  414.     table.overlay {
  415.         border: 1px solid var(--emp-dark-blue);
  416.         box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .9);
  417.     }
  418.     .overlay,
  419.     .overlay .leftOverlay,
  420.     .overlay .rightOverlay {
  421.         border: 1px dashed var(--emp-dark-blue);
  422.         background-color: var(--background);
  423.         color: var(--font-color);
  424.     }
  425.     /*
  426.     span.rank {
  427.         color: var(--emp-light-blue) !important; 
  428.     }
  429.     */
  430.     #close-threadman-settings a:hover {
  431.         background-color: var(--emp-light-red);
  432.     }
  433. }