☰

AEScripts.com – Wide Dark Enhancement [Ath]

Dark theme for AEScripts.com with enhancements: expanded product info, combined tabs, wide page layout for product lists etc. Configurable with options.

  1. /* ==UserStyle==
  2. @name           AEScripts.com – Wide Dark Enhancement [Ath]
  3. @namespace      athari
  4. @version        1.0.0
  5. @description    Dark theme for AEScripts.com with enhancements: expanded product info, combined tabs, wide page layout for product lists etc. Configurable with options.
  6. @author         Athari (https://github.com/Athari)
  7. @homepageURL    https://github.com/Athari/AthariUserCSS
  8. @supportURL     https://github.com/Athari/AthariUserCSS/issues
  9. @license        MIT
  10. @preprocessor   default
  11.  
  12. @var            checkbox ath-show-top-banner      "Show top bar"               0
  13. @var            checkbox ath-show-social          "Show social share buttons"  0
  14. @var            checkbox ath-expand-slideshow     "Expand product slideshow"   1
  15. @var            checkbox ath-combine-tabs         "Combine info tabs"          1
  16. @var            checkbox ath-override-light-font  "Override light font weight" 1
  17. @var            text     ath-font                 "Font"                      "Segoe UI, Arial, sans-serif"
  18. ==/UserStyle== */
  19.  
  20. @-moz-document domain("aescripts.com") {
  21.   :root {
  22.     color-scheme: dark;
  23.     --ath-base-layout-width: 980px;
  24.   }
  25.   @container style(--ath-show-social: 0) {
  26.     #product-sharing {
  27.       display: none;
  28.     }
  29.   }
  30.   body {
  31.     background: #000;
  32.     color: #eee;
  33.     font-family: var(--ath-font);
  34.     overflow: hidden scroll;
  35.     nav {
  36.       background: #000;
  37.       border-color: #333;
  38.  
  39.       /* menu */
  40.       .level-top.pages a {
  41.         background: #333 !important;
  42.       }
  43.       .level-top, .level0, .level1, .level2, .level3, .level4 {
  44.         background: #333 !important;
  45.         a {
  46.           text-decoration: none !important;
  47.           span {
  48.             width: calc(100% - 50px) !important;
  49.           }
  50.         }
  51.       }
  52.       .level-top {
  53.         ul {
  54.           border: solid 1px #222 !important;
  55.         }
  56.         li:has(> ul) > a {
  57.           display: grid !important;
  58.           grid-template-areas: "a";
  59.           grid-template-columns: 1fr;
  60.           grid-template-rows: auto;
  61.           align-items: center;
  62.           span {
  63.             grid-area: a;
  64.           }
  65.           &::after {
  66.             grid-area: a;
  67.             content: "►";
  68.             margin: 0 15px 0 auto;
  69.             color: #777;
  70.             transform: scaleY(2.4) scaleX(0.7);
  71.           }
  72.         }
  73.         li:has(> ul > li > ul) > a::after {
  74.           content: "►►";
  75.         }
  76.         li:has(> ul > li > ul > li > ul) > a::after {
  77.           content: "►►►";
  78.         }
  79.         li:has(> ul > li > ul > li > ul > li > ul) > a::after {
  80.           content: "►►►►";
  81.         }
  82.       }
  83.       a:not(#nav-category-click):hover {
  84.         background: #555 !important;
  85.         color: #222 !important;
  86.         span {
  87.           background: inherit !important;
  88.         }
  89.       }
  90.       span {
  91.         border-color: #555 !important;
  92.       }
  93.     }
  94.     .main-container {
  95.       background: #111;
  96.       #top-search {
  97.         background: #222;
  98.       }
  99.       .main {
  100.         background: #111;
  101.       }
  102.     }
  103.   }
  104.  
  105.   .fieldset {
  106.     background: #222 !important;
  107.     border-color: #333 !important;
  108.   }
  109.   .box,
  110.   .box-title,
  111.   .box-head {
  112.     border-color: #333 !important;
  113.   }
  114.   :is(.box-head, .fieldset) h2 {
  115.     background: #333 !important;
  116.     border-color: #444 !important;
  117.   }
  118.   input, select, textarea {
  119.     background: revert !important;
  120.     color: revert !important;
  121.     border-color: revert !important;
  122.     &::placeholder {
  123.       color: revert !important;
  124.     }
  125.   }
  126.   [role="combobox"] {
  127.     background: Field !important;
  128.     border-color: ButtonBorder !important;
  129.     * {
  130.       color: FieldText !important;
  131.     }
  132.   }
  133.   .select2-dropdown {
  134.     background: Field !important;
  135.     [aria-selected="true"] {
  136.       background: SelectedItem !important;
  137.       color: SelectedItemText !important;
  138.     }
  139.   }
  140.   .pluginsio-relate-index li.control div {
  141.     background: #333 !important;
  142.     color: #ccc !important;
  143.     border-color: #444 !important;
  144.     box-shadow: none;
  145.   }
  146.  
  147.   /* posts & news */
  148.   .postWrapper {
  149.     .postTitle,
  150.     img.post-thumb,
  151.     h1, h2, h3 {
  152.       border-color: #444 !important;
  153.     }
  154.     .media_embed {
  155.       background: #222 !important;
  156.       border-color: #333 !important;
  157.     }
  158.   }
  159.  
  160.   /* hide crap */
  161.   @container style(--ath-show-top-banner: 0) {
  162.     #home-banner,
  163.     .top-header {
  164.       display: none !important;
  165.     }
  166.   }
  167.  
  168.   /* disable stupid fonts */
  169.   .form-search label,
  170.   .product-tabs li a,
  171.   .container, .container h2, .container h3 {
  172.     font-family: inherit !important;
  173.   }
  174.   .price {
  175.     font-family: inherit !important;
  176.     font-weight: bold !important;
  177.   }
  178.  
  179.   /* wide layout */
  180.   .main {
  181.     --ath-wide-layout-actual: 0;
  182.     display: flex;
  183.     flex-flow: row;
  184.     .col-left {
  185.       order: 1;
  186.     }
  187.     .col-main {
  188.       order: 2;
  189.       flex: 1;
  190.     }
  191.     &:has(.block-layered-nav) /*has sidebar*/ {
  192.       --ath-wide-layout-actual: 1;
  193.       width: auto;
  194.       .col-main {
  195.         width: auto;
  196.         float: none;
  197.       }
  198.     }
  199.   }
  200.   @container style(--ath-wide-layout-actual: 0) {
  201.     .col-main:only-child:has(.category-products) {
  202.       margin-inline: calc(var(--ath-base-layout-width) / 2 - 50vw + 20px) !important;
  203.       --ath-wide-layout-actual: 1;
  204.     }
  205.     .products-grid {
  206.       margin-inline: calc(var(--ath-base-layout-width) / 2 - 50vw + 20px) !important;
  207.       --ath-wide-layout-actual: 1;
  208.     }
  209.   }
  210.  
  211.   /* sidebar */
  212.   .col-left.sidebar {
  213.     width: 240px !important;
  214.     padding: 0 0 0 20px !important;
  215.     .block-layered-nav {
  216.       .block-content {
  217.         padding: 0 !important;
  218.         line-height: 1.4 !important;
  219.       }
  220.       ol {
  221.         background: #ffffff08 !important;
  222.         margin: 0 !important;
  223.         li {
  224.           margin: 0 0 0 6px !important;
  225.         }
  226.       }
  227.       a {
  228.         display: block !important;
  229.         padding: 1px 0 1px 6px !important;
  230.         &:hover {
  231.           color: #eee !important;
  232.           background: #444 !important;
  233.         }
  234.         span {
  235.           color: #999 !important;
  236.         }
  237.       }
  238.     }
  239.   }
  240.   .col-main {
  241.     border-color: #333 !important;
  242.   }
  243.  
  244.   #browse-main-categories {
  245.     display: flow-root;
  246.     background: #222 !important;
  247.     border-color: #333 !important;
  248.     .wrapper {
  249.       width: auto !important;
  250.       margin: 10px;
  251.       ul {
  252.         display: flex;
  253.         flex-flow: row wrap;
  254.         gap: 10px;
  255.         margin: 0;
  256.         a {
  257.           margin: 0;
  258.           padding: 3px 6px;
  259.           background: #444;
  260.         }
  261.       }
  262.     }
  263.   }
  264.   footer {
  265.     border-color: #333 !important;
  266.   }
  267.  
  268.   /* autocomplete */
  269.   .sbs_autocomplete_inner {
  270.     background: #333 !important;
  271.     border-color: #111 !important;
  272.     .suggested-item {
  273.       span {
  274.         color: #bbb !important;
  275.       }      
  276.       &:hover {
  277.         background: #444 !important;
  278.         span {
  279.           color: #bbb !important;
  280.         }
  281.       }
  282.       strong {
  283.         color: #eee !important;
  284.       }
  285.     }
  286.     .sbs_search_autocomplete_box_bottom {
  287.       background: #444 !important;
  288.       border-color: #111 !important;
  289.     }
  290.     .suggest_divider {
  291.       border-color: #333 !important;
  292.     }
  293.   }
  294.  
  295.   /* disable hiding of product info */
  296.   .products-grid {
  297.     display: grid !important;
  298.     grid-template-columns: repeat(auto-fit, 280px);
  299.     justify-content: center;
  300.     gap: 20px;
  301.     li.item {
  302.       display: flex !important;
  303.       flex-flow: column !important;
  304.       width: auto !important;
  305.       height: auto !important;
  306.       margin: 0 !important;
  307.       background: #333;
  308.     }
  309.     .product-info-wrapper {
  310.       display: contents !important;
  311.     }
  312.     .product-name a {
  313.       color: #f66000 !important;
  314.       font-weight: bold !important;
  315.     }
  316.     .product-link {
  317.       display: none !important;
  318.     }
  319.     .product-image {
  320.       width: 100%;
  321.       img {
  322.         width: 100%;
  323.       }
  324.     }
  325.     .product-info-hover {
  326.       flex: 1;
  327.       position: static !important;
  328.       display: flex;
  329.       flex-flow: column;
  330.       height: auto !important;
  331.       background: #222;
  332.       > .row {
  333.         margin: 0 !important;
  334.       }
  335.       h2 {
  336.         order: -1;
  337.       }
  338.       .desc {
  339.         flex: 1;
  340.         position: relative !important;
  341.         height: auto !important;
  342.         max-height: calc(12lh + 6px);
  343.         padding: 3px 6px !important;
  344.         color: #ccc;
  345.         &::after {
  346.           content: "";
  347.           position: absolute;
  348.           inset: calc(10lh + 12px) 0 0 0;
  349.           height: 2lh;
  350.           background: linear-gradient(to bottom, #2220, #222f);
  351.         }
  352.       }
  353.       .actions {
  354.         position: static !important;
  355.         height: auto !important;
  356.         button {
  357.           height: 26px !important;
  358.         }
  359.         form,
  360.         .more-info,
  361.         .list-more-info {
  362.           display: none !important;
  363.         }
  364.         .actions-links {
  365.           a {
  366.             height: 26px !important;
  367.             font-size: 13px !important;
  368.             line-height: 28px !important;
  369.           }
  370.         }
  371.       }
  372.     }
  373.     .compatibility li {
  374.       transition-duration: 0s !important;
  375.     }
  376.   }
  377.  
  378.   /* expand slideshow */
  379.   @container style(--ath-expand-slideshow: 1) {
  380.     #slideshow {
  381.       display: inline-block !important;
  382.       width: auto !important;
  383.       padding: 0 !important;
  384.       border: none !important;
  385.       background: #222 !important;
  386.     }
  387.     #slider-dots,
  388.     #slider-thumbs {
  389.       display: none !important;
  390.     }
  391.     .scroller {
  392.       width: auto !important;
  393.       height: auto !important;
  394.     }
  395.     .scroller .content {
  396.       width: auto !important;
  397.     }
  398.     .scroller .content .section {
  399.       width: 80px !important;
  400.       height: auto !important;
  401.     }
  402.     .scroller .content .section:hover {
  403.       width: auto !important;
  404.     }
  405.     .category-title {
  406.       float: none !important;
  407.       width: auto !important;
  408.     }
  409.   }
  410.  
  411.   /* product page */
  412.   .product-view {
  413.     .product-options,
  414.     .product-options-bottom,
  415.     .box-tags,
  416.     .short-description,
  417.     .quick-add-to-wrapper,
  418.     .quick-add-to-box {
  419.       background: #222 !important;
  420.       border-color: #444 !important;
  421.     }
  422.     .short-description {
  423.       padding: 10px 12px;
  424.     }
  425.     .box-tags a {
  426.       color: #ccc;
  427.     }
  428.   }
  429.  
  430.   .data-table :is(td, th) {
  431.     background: #111 !important;
  432.     border-color: #333 !important;
  433.     &.label {
  434.       background: #222 !important;
  435.     }
  436.   }
  437.  
  438.   .downloadplus-product-history-entry {
  439.     margin: 20px 0 !important;
  440.     padding: 10px 14px !important;
  441.     background: #111 !important;
  442.     border-color: #282828 !important;
  443.     color: #ccc !important;
  444.   }
  445.  
  446.   /* always display tabs */
  447.   @container style(--ath-combine-tabs: 1) {
  448.     .product-collateral {
  449.       display: flex !important;
  450.       flex-direction: column;
  451.       > * {
  452.         order: 10 !important;
  453.       }
  454.       > .product-tabs-content {
  455.         padding: 0 !important;
  456.       }
  457.       > .clearer {
  458.         order: 1 !important;
  459.       }
  460.       > #product-tabs {
  461.         order: 2 !important;
  462.       }
  463.       &:has(#product_tabs_description.active) {
  464.         #product_tabs_compatibility_contents {
  465.           display: block !important;
  466.           order: 3 !important;
  467.           .data-table {
  468.             margin: 0 !important;
  469.           }
  470.         }
  471.         #product_tabs_compatibility_contents {
  472.           display: block !important;
  473.           order: 3 !important;
  474.         }
  475.         #product_tabs_description_contents {
  476.           display: block !important;
  477.           order: 4 !important;
  478.         }
  479.         #product_tabs_version_history_contents {
  480.           display: block !important;
  481.           order: 5 !important;
  482.         }
  483.         #product_tabs_description_contents::before {
  484.           content: "Description";
  485.         }
  486.         #product_tabs_compatibility_contents::before {
  487.           content: "Compatibility";
  488.         }
  489.         #product_tabs_version_history_contents::before {
  490.           content: "Version history";
  491.         }
  492.       }
  493.       .product-tabs-content::before {
  494.         display: block !important;
  495.         font-weight: bold !important;
  496.         font-size: 1.2rem !important;
  497.         color: #fff !important;
  498.         padding: 15px 0 5px !important;
  499.       }
  500.     }
  501.     .downloadplus-product-history-links {
  502.       margin: 0 !important;
  503.     }
  504.     .downloadplus-product-history h4 {
  505.       margin: 3px !important;
  506.     }
  507.     #product_tabs_compatibility,
  508.     #product_tabs_version_history {
  509.       display: none !important;
  510.     }
  511.   }
  512.  
  513.   @font-face { font-family: "Segoe UI"; src: local("Segoe UI"); font-weight: 100 400; }
  514.   @font-face { font-family: "Segoe UI"; src: local("Segoe UI Semibold"); font-weight: 600; }
  515.   @font-face { font-family: "Segoe UI"; src: local("Segoe UI Bold"); font-weight: 700; }
  516.   @font-face { font-family: "Segoe UI"; src: local("Segoe UI Black"); font-weight: 900; }
  517.   @container (--ath-override-light-font: 1) {
  518.     #product_tabs_description_contents:not(#\0) {
  519.       font-family: "Segoe UI", var(--ath-font) !important;
  520.     }
  521.     #product_tabs_description_contents :not(#\0) {
  522.       font-family: inherit !important;
  523.     }
  524.   }
  525.  
  526.   .toolbar.pager {
  527.     display: flex !important;
  528.     flex-flow: row !important;
  529.     height: auto !important;
  530.     padding: 16px;
  531.     .pages {
  532.       position: static !important;
  533.       display: flex !important;
  534.       flex-flow: row !important;
  535.       align-items: baseline !important;
  536.       margin: 0 auto !important;
  537.       ol, li {
  538.         margin: 0 !important;
  539.       }
  540.       strong {
  541.         display: none;
  542.       }
  543.       a, li.current {
  544.         padding: 8px 16px !important;
  545.         background: #222 !important;
  546.         font-size: 1.1rem;
  547.       }
  548.     }
  549.   }
  550.  
  551.   /* comments */
  552.   .MessageForm {
  553.     background: #333 !important;
  554.     border-color: #555 !important;
  555.   }
  556.   .MessageList {
  557.     .Item {
  558.       color: #ccc !important;
  559.       border-color: #555 !important;
  560.       &.AuthorComment:not(#\0) {
  561.         color: #cdc !important;
  562.         background: #121 !important;
  563.       }
  564.       .Meta {
  565.         border-color: #333 !important;
  566.       }
  567.       .Message {
  568.         blockquote,
  569.         .Quote {
  570.           background: #3338 !important;
  571.           font-size: inherit !important;
  572.         }
  573.       }
  574.     }
  575.   }
  576.   
  577.   /* forum */
  578.   body:is([id^=vanilla], [id^=dashboard]) {
  579.     #Head {
  580.       background: #000 !important;
  581.     }
  582.     #Body {
  583.       background: #111 !important;
  584.     }
  585.     .MessageForm, .Tabs, .Headings {
  586.       background: #222 !important;
  587.       border-color: #333 !important;
  588.     }
  589.     .Tag,
  590.     .DataList .Meta a.Category {
  591.       background: #444 !important;
  592.     }
  593.     .MenuTitle {
  594.       background: #333 !important;
  595.       color: #ccc !important;
  596.       border-color: #444 !important;
  597.     }
  598.     .TabLink {
  599.       background: #444 !important;
  600.     }
  601.     a.Bookmark, a.Bookmarked, a.Bookmarking {
  602.       filter: invert(1) hue-rotate(180deg);
  603.     }
  604.     #DiscussionForm form {
  605.       background: #333 !important;
  606.       border-color: #444 !important;
  607.     }
  608.     ul.token-input-list {
  609.       background: #444 !important;
  610.       border-color: #555 !important;
  611.     }
  612.   }
  613.  
  614.   [style*="color"]:not([style*="background"]),
  615.   [style*="color"]:not([style*="background"]) [style*="color"]:not([style*="background"]) [style*="color"]:not([style*="background"]) {
  616.     filter: invert(1);
  617.     -webkit-text-stroke: currentcolor 0.4px;
  618.   }
  619.   [style*="color"]:not([style*="background"]) [style*="color"]:not([style*="background"]) {
  620.     filter: none;
  621.   }
  622. }