☰

Kinorium.com – Enhanced [Ath]

Kinorium.com: various usability enhancements.

  1. /* ==UserStyle==
  2. @name           Kinorium.com – Enhanced [Ath]
  3. @namespace      athari
  4. @version        1.3.1
  5. @description    Kinorium.com: various usability enhancements.
  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-emoji-reactions "Show emoji reactions"  1
  13. @var            checkbox ath-show-banners         "Show banners"          0
  14. @var            checkbox ath-show-genre-movies    "Show top genre movies" 1
  15. @var            checkbox ath-show-actual-movies   "Show current movies"   1
  16. @var            checkbox ath-side-menus           "Side menus"            1
  17. @var            checkbox ath-native-sliders       "Native sliders (requires userscript)" 1
  18. @var            checkbox ath-recolor-scrollbars   "Recolor scrollbars"    1
  19. @var            select   ath-hyphens              "Hyphens"               ["auto:Automatic", "manual:Manual*"]
  20. @var            text     ath-font-family          "Font"                  "Segoe UI"
  21. ==/UserStyle== */
  22.  
  23. @-moz-document domain("kinorium.com") {
  24.   @container style(--ath-show-emoji-reactions: 0) {
  25.     .emojiPane {
  26.       display: none !important;
  27.     }
  28.   }
  29.  
  30.   @container style(--ath-show-banners: 0) {
  31.     .proBan,
  32.     .bwannners-left-box {
  33.       display: none !important;
  34.     }
  35.   }
  36.   @container style(--ath-show-genre-movies: 0) {
  37.     .recom-genre-slider {
  38.       display: none !important;
  39.     }
  40.   }
  41.   @container style(--ath-show-actual-movies: 0) {
  42.     .actual-slider {
  43.       display: none !important;
  44.     }
  45.   }
  46.  
  47.   :not(#\0) {
  48.     hyphens: var(--ath-hyphens);
  49.     font-family: var(--ath-font-family, "Arial"), sans-serif;
  50.   }
  51.   .text {
  52.     font-size: 16rem;
  53.     line-height: 1.3;
  54.   }
  55.   .infotable * {
  56.     font-size: 14rem;
  57.   }
  58.  
  59.   @container style(--ath-recolor-scrollbars: 1) {
  60.     ::-webkit-scrollbar {
  61.       background: #1c1c1c !important;
  62.       opacity: 1 !important;
  63.     }
  64.     ::-webkit-scrollbar-track {
  65.       background: #1c1c1c !important;
  66.       opacity: 1 !important;
  67.     }
  68.     ::-webkit-scrollbar-button {
  69.       background: #333 !important;
  70.       opacity: 1 !important;
  71.     }
  72.     ::-webkit-scrollbar-button:hover {
  73.       background: #3c3c3c !important;
  74.     }
  75.     ::-webkit-scrollbar-button:active {
  76.       background: #444 !important;
  77.     }
  78.     ::-webkit-scrollbar-button:disabled {
  79.       background: #222 !important;
  80.     }
  81.     ::-webkit-scrollbar-thumb {
  82.       background: #444 !important;
  83.       opacity: 1 !important;
  84.     }
  85.     ::-webkit-scrollbar-thumb:hover {
  86.       background: #4c4c4c !important;
  87.     }
  88.     ::-webkit-scrollbar-thumb:active {
  89.       background: #555 !important;
  90.     }
  91.     ::-webkit-scrollbar-corner {
  92.       background: #222 !important;
  93.     }
  94.   }
  95.  
  96.   .userPage__follow-buttons-box {
  97.     width: 300rem;
  98.   }
  99.  
  100.   .film-page_leftContent {
  101.     .ratingsBlock {
  102.       display: flex !important;
  103.       flex-flow: row;
  104.       padding: 20rem 0 0 0 !important;
  105.       justify-content: space-between !important;
  106.       li {
  107.         float: none !important;
  108.         width: auto !important;
  109.         a {
  110.           height: auto !important;
  111.           padding: 0 !important;
  112.         }
  113.       }
  114.       .ratingsBlockIMDbKP:not(#\0) {
  115.         display: contents !important;
  116.         .ratingsBlockIMDb,
  117.         .ratingsBlockKP {
  118.           display: block !important;
  119.         }
  120.       }
  121.     }
  122.     .film-page__company-logo {
  123.       margin: 0 0 0 0 !important;
  124.     }
  125.     .headlines-slide {
  126.       margin: 10rem 0 0 0 !important;
  127.       &:not(.headlines-slide_hidden-content) {
  128.         margin: 15rem 0 0 0 !important;
  129.       }
  130.     }
  131.     .headlines-slide__control {
  132.       top: 0 !important;
  133.     }
  134.     .headlines__wrap_show {
  135.       margin: 0 !important;
  136.     }
  137.   }
  138.  
  139.   .main-table_content {
  140.     table-layout: fixed;
  141.   }
  142.  
  143.   .film-page__buttons-cinema,
  144.   .ath-film-page__buttons-cinema {
  145.     display: flex !important;
  146.     flex-flow: row wrap;
  147.     a {
  148.       &:hover {
  149.         filter: contrast(0.8) brightness(1.4);
  150.       }
  151.       &::after {
  152.         display: inline-block;
  153.         max-width: calc(88px + 36rem);
  154.         margin: 0 0 0 -36rem;
  155.         content: attr(href);
  156.         font-size: 11rem;
  157.         color: #ccc;
  158.         overflow: clip;
  159.         clip-path: margin-box;
  160.         white-space: nowrap;
  161.       }
  162.     }
  163.   }
  164.  
  165.   .jsConnectionGallery {
  166.     display: inline flex !important;
  167.     flex-flow: column !important;
  168.     max-width: 100%;
  169.     margin: 0 !important;
  170.     .headlines-slide {
  171.       margin: 0 !important;
  172.       a {
  173.         display: none !important;
  174.       }
  175.     }
  176.     .item_skelet-all {
  177.       padding-right: 5rem !important;
  178.     }
  179.     &:not(.slider_has-first-current-item) :is(.headlines-slide__control, .item_skelet-all) {
  180.       display: none;
  181.     }
  182.   }
  183.   .film-page :is(.film_gallery_trailers, .slider-container-film)::after {
  184.     display: none !important;
  185.   }
  186.  
  187.   .serial-rating-table-wrap {
  188.     overflow-x: scroll;
  189.     &:hover {
  190.       width: auto !important;
  191.       max-width: calc(930rem + (50vw - 640rem)) !important;
  192.       margin-right: calc(640rem - 50vw) !important;
  193.     }
  194.   }
  195.   .serial-rating-table {
  196.     tr {
  197.       &.serial-rating-table__tr-hidden {
  198.         display: revert !important;
  199.       }
  200.       &:has(.serial-rating-table__button-all-td) {
  201.         display: none !important;
  202.       }
  203.     }
  204.     td {
  205.       /*background: hsl(calc(0deg + var(--h) * 2.5deg) 100% 50%) !important;*/
  206.       background: oklch(70% 0.7 calc(30 + var(--h) * 2.5)) !important;
  207.       a {
  208.         /*color: hsl(calc(0deg + var(--h) * 2.5deg) 100% 20%) !important;*/
  209.         /*color: oklch(30% 0.7 calc(30 + var(--h) * 2.5)) !important;*/
  210.         color: color-contrast(oklch(64% 0.7 calc(30 + var(--h) * 2.5)) vs
  211.           oklch(30% 0.7 calc(30 + var(--h) * 2.5)),
  212.           oklch(95% 0.7 calc(30 + var(--h) * 2.5))) !important;
  213.       }
  214.     }
  215.     .serial-rating-table__1-0 { --h: 00 }
  216.     .serial-rating-table__1-1 { --h: 01 }
  217.     .serial-rating-table__1-2 { --h: 02 }
  218.     .serial-rating-table__1-3 { --h: 03 }
  219.     .serial-rating-table__1-4 { --h: 04 }
  220.     .serial-rating-table__1-5 { --h: 05 }
  221.     .serial-rating-table__1-6 { --h: 06 }
  222.     .serial-rating-table__1-7 { --h: 07 }
  223.     .serial-rating-table__1-8 { --h: 08 }
  224.     .serial-rating-table__1-9 { --h: 09 }
  225.     .serial-rating-table__2-0 { --h: 10 }
  226.     .serial-rating-table__2-1 { --h: 11 }
  227.     .serial-rating-table__2-2 { --h: 12 }
  228.     .serial-rating-table__2-3 { --h: 13 }
  229.     .serial-rating-table__2-4 { --h: 14 }
  230.     .serial-rating-table__2-5 { --h: 15 }
  231.     .serial-rating-table__2-6 { --h: 16 }
  232.     .serial-rating-table__2-7 { --h: 17 }
  233.     .serial-rating-table__2-8 { --h: 18 }
  234.     .serial-rating-table__2-9 { --h: 19 }
  235.     .serial-rating-table__3-0 { --h: 20 }
  236.     .serial-rating-table__3-1 { --h: 21 }
  237.     .serial-rating-table__3-2 { --h: 22 }
  238.     .serial-rating-table__3-3 { --h: 23 }
  239.     .serial-rating-table__3-4 { --h: 24 }
  240.     .serial-rating-table__3-5 { --h: 25 }
  241.     .serial-rating-table__3-6 { --h: 26 }
  242.     .serial-rating-table__3-7 { --h: 27 }
  243.     .serial-rating-table__3-8 { --h: 28 }
  244.     .serial-rating-table__3-9 { --h: 29 }
  245.     .serial-rating-table__4-0 { --h: 30 }
  246.     .serial-rating-table__4-1 { --h: 31 }
  247.     .serial-rating-table__4-2 { --h: 32 }
  248.     .serial-rating-table__4-3 { --h: 33 }
  249.     .serial-rating-table__4-4 { --h: 34 }
  250.     .serial-rating-table__4-5 { --h: 35 }
  251.     .serial-rating-table__4-6 { --h: 36 }
  252.     .serial-rating-table__4-7 { --h: 37 }
  253.     .serial-rating-table__4-8 { --h: 38 }
  254.     .serial-rating-table__4-9 { --h: 39 }
  255.     .serial-rating-table__5-0 { --h: 40 }
  256.     .serial-rating-table__5-1 { --h: 41 }
  257.     .serial-rating-table__5-2 { --h: 42 }
  258.     .serial-rating-table__5-3 { --h: 43 }
  259.     .serial-rating-table__5-4 { --h: 44 }
  260.     .serial-rating-table__5-5 { --h: 45 }
  261.     .serial-rating-table__5-6 { --h: 46 }
  262.     .serial-rating-table__5-7 { --h: 47 }
  263.     .serial-rating-table__5-8 { --h: 48 }
  264.     .serial-rating-table__5-9 { --h: 49 }
  265.     .serial-rating-table__6-0 { --h: 50 }
  266.     .serial-rating-table__6-1 { --h: 51 }
  267.     .serial-rating-table__6-2 { --h: 52 }
  268.     .serial-rating-table__6-3 { --h: 53 }
  269.     .serial-rating-table__6-4 { --h: 54 }
  270.     .serial-rating-table__6-5 { --h: 55 }
  271.     .serial-rating-table__6-6 { --h: 56 }
  272.     .serial-rating-table__6-7 { --h: 57 }
  273.     .serial-rating-table__6-8 { --h: 58 }
  274.     .serial-rating-table__6-9 { --h: 59 }
  275.     .serial-rating-table__7-0 { --h: 60 }
  276.     .serial-rating-table__7-1 { --h: 61 }
  277.     .serial-rating-table__7-2 { --h: 62 }
  278.     .serial-rating-table__7-3 { --h: 63 }
  279.     .serial-rating-table__7-4 { --h: 64 }
  280.     .serial-rating-table__7-5 { --h: 65 }
  281.     .serial-rating-table__7-6 { --h: 66 }
  282.     .serial-rating-table__7-7 { --h: 67 }
  283.     .serial-rating-table__7-8 { --h: 68 }
  284.     .serial-rating-table__7-9 { --h: 69 }
  285.     .serial-rating-table__8-0 { --h: 70 }
  286.     .serial-rating-table__8-1 { --h: 71 }
  287.     .serial-rating-table__8-2 { --h: 72 }
  288.     .serial-rating-table__8-3 { --h: 73 }
  289.     .serial-rating-table__8-4 { --h: 74 }
  290.     .serial-rating-table__8-5 { --h: 75 }
  291.     .serial-rating-table__8-6 { --h: 76 }
  292.     .serial-rating-table__8-7 { --h: 77 }
  293.     .serial-rating-table__8-8 { --h: 78 }
  294.     .serial-rating-table__8-9 { --h: 79 }
  295.     .serial-rating-table__9-0 { --h: 80 }
  296.     .serial-rating-table__9-1 { --h: 81 }
  297.     .serial-rating-table__9-2 { --h: 82 }
  298.     .serial-rating-table__9-3 { --h: 83 }
  299.     .serial-rating-table__9-4 { --h: 84 }
  300.     .serial-rating-table__9-5 { --h: 85 }
  301.     .serial-rating-table__9-6 { --h: 86 }
  302.     .serial-rating-table__9-7 { --h: 87 }
  303.     .serial-rating-table__9-8 { --h: 88 }
  304.     .serial-rating-table__9-9 { --h: 89 }
  305.     .serial-rating-table__10-0 { --h: 90 }
  306.   }
  307.  
  308.   .statusList:not(#\0) {
  309.     .item {
  310.       padding: 10rem 0 !important;
  311.       font-size: 12rem !important;
  312.       .user {
  313.         a {
  314.           font-size: 16rem !important;
  315.           filter: none !important;
  316.         }
  317.         .proximity {
  318.           filter: none !important;
  319.           color: #000 !important;
  320.         }
  321.       }
  322.       &.alien a:not(:hover):not(:active) {
  323.         color: #999 !important;
  324.       }
  325.       .status {
  326.         filter: none !important;
  327.         margin-top: 3rem !important;
  328.         display: flex !important;
  329.         &[class*=number]::before {
  330.           background: none !important;
  331.           content: "X" !important;
  332.           align-self: center !important;
  333.           justify-self: center !important;
  334.           /*margin: 1rem 0 -1rem 0 !important;*/
  335.           color: #000 !important;
  336.         }
  337.         &.number-1::before { content: "1" !important; }
  338.         &.number-2::before { content: "2" !important; }
  339.         &.number-3::before { content: "3" !important; }
  340.         &.number-4::before { content: "4" !important; }
  341.         &.number-5::before { content: "5" !important; }
  342.         &.number-6::before { content: "6" !important; }
  343.         &.number-7::before { content: "7" !important; }
  344.         &.number-8::before { content: "8" !important; }
  345.         &.number-9::before { content: "9" !important; }
  346.         &.number-10::before { content: "10" !important; margin: 1rem 1rem -1rem -1rem !important; }
  347.       }
  348.       .status-list__comment {
  349.         margin: 0 !important;
  350.         .status-list__comment-text {
  351.           margin: 0 !important;
  352.         }
  353.       }
  354.       p {
  355.         font-size: 16rem !important;
  356.         line-height: 1.3 !important;
  357.         margin: 0 !important;
  358.         &.placeholder {
  359.           margin-top: 7rem !important;
  360.         }
  361.       }
  362.     }
  363.   }
  364.  
  365.   @container style(--ath-native-sliders: 1) {
  366.     :is(.slider-container-film, .film-page__cast-block, .film-page__cast-main-block, .film-page__critics-slider, .film-page__gallery, .film-page__overview):not(#\0) {
  367.       margin-right: 0 !important;
  368.     }
  369.     .headlines__wrap {
  370.       display: none !important;
  371.       &.headlines__wrap_show {
  372.         display: block !important;
  373.         &.film-page__summary {
  374.           display: flex !important;
  375.         }
  376.       }
  377.     }
  378.     .slider:not(#\0) {
  379.       display: block !important;
  380.       width: auto !important;
  381.       min-width: 0 !important;
  382.       overflow: auto hidden !important;
  383.       .inner {
  384.         width: max-content!important;
  385.         height: auto !important;
  386.         display: flex !important;
  387.         flex-flow: row !important;
  388.         margin: 0 0 4px 0 !important;
  389.         overflow: hidden !important;
  390.         &:not(:has(> :not(.role))):has(img) > .role,
  391.         .role:only-child {
  392.           /*width: auto !important;
  393.           float: none !important;
  394.           display: flex !important;
  395.           flex-flow: row !important;*/
  396.           display: contents !important;
  397.         }
  398.         .item {
  399.           float: none !important;
  400.           transition: all 0.1s ease-in-out;
  401.           .cut_text:not(:has(.slider__name-wrap:empty)) {
  402.             display: inline-block !important;
  403.             overflow: clip clip !important;
  404.             padding: 2px 4px !important;
  405.             margin: -2px -4px !important;
  406.           }
  407.           &:hover {
  408.             filter: contrast(0.8) brightness(1.4);
  409.             z-index: 1;
  410.             .cut_text {
  411.               width: auto !important;
  412.               min-width: 90rem !important;
  413.               overflow: visible clip !important;
  414.               z-index: 10;
  415.               background: #111;
  416.               background-clip: padding-box;
  417.               &::before,
  418.               &.away-transparency::before {
  419.                 visibility: hidden;
  420.                 display: none;
  421.               }
  422.             }
  423.           }
  424.           a {
  425.             float: none !important;
  426.           }
  427.         }
  428.         .item_skelet {
  429.           display: none !important;
  430.         }
  431.         .film-page__critics-slider-item {
  432.           min-width: 260rem !important;
  433.           &.film-page__critics-slider-item_neutral {
  434.             background: oklch(45% 0.15 200 / 0.3) !important;
  435.           }
  436.           &.film-page__critics-slider-item_good {
  437.             background: oklch(45% 0.15 160 / 0.3) !important;
  438.           }
  439.           &.film-page__critics-slider-item_bad {
  440.             background: oklch(45% 0.15 30 / 0.3) !important;
  441.           }
  442.         }
  443.         .videoBg img,
  444.         img[style*="width: 100%"] {
  445.           width: auto !important;
  446.           .sliderMainList li & {
  447.             width: 100% !important;
  448.             object-fit: cover;
  449.           }
  450.         }
  451.         .poster {
  452.           background: #0000 !important;
  453.         }
  454.         img {
  455.           display: block !important;
  456.         }
  457.       }
  458.     }
  459.     .slider-handler:not(#\0) {
  460.       display: none !important;
  461.     }
  462.  
  463.     .slider-container-film {
  464.       margin: 20rem 0 0 0 !important;
  465.       padding: 0 !important;
  466.       .inner .item {
  467.         margin: 0 15rem 0 0 !important;
  468.       }
  469.     }
  470.   }
  471.  
  472.   .addCommentPlaceHolder { /* fix random relative offset out of nowhere */
  473.     .setCommentWindow, .setStatusWindow {
  474.       position: static !important;
  475.     }
  476.   }
  477.  
  478.   .film-page__critics-slider .headlines__wrap_show {
  479.     min-height: 100rem !important;
  480.   }
  481.  
  482.   .film-page__movie-logo {
  483.     display: none !important;
  484.   }
  485.  
  486.   .sites {
  487.     .sites-page__title-group {
  488.       margin: 20rem 0 10rem 0;
  489.     }
  490.     img {
  491.       filter: none !important;
  492.     }
  493.   }
  494.  
  495.   .collectionsWindow ul.collectionList_extra-item {
  496.     height: auto;
  497.     overflow: hidden;
  498.   }
  499.  
  500.   .selectMenu {
  501.     max-height: calc(min(700rem, max(300rem, 80vh)));
  502.   }
  503.   .ui-selectmenu-menu .ui-widget.ui-widget-content {
  504.     height: auto !important;
  505.     max-height: calc(min(700rem, max(300rem, 80vh)));
  506.   }
  507.  
  508.   .container__arrow-wrap,
  509.   .upButton {
  510.     display: none !important;
  511.   }
  512.  
  513.   :is(.collectionIconHandler, .userCollectionList li, .collectionList li) :is(.emoji-icon.custom, .icon.custom) {
  514.     filter: none !important;
  515.     color: #fff !important;
  516.     opacity: 0.8 !important;
  517.   }
  518.   .collectionList li a {
  519.     color: #fffa !important;
  520.     &:hover {
  521.       color: #f53 !important;
  522.     }
  523.   }
  524.  
  525.   @container style(--ath-side-menus: 1) {
  526.     @media (min-width: 1800px) and (min-height: 800px) {
  527.       .commentOverlay {
  528.         z-index: 2;
  529.       }
  530.       .main-container_experimentFixedMenu {
  531.         z-index: 2;
  532.       }
  533.       .topMenu__wrapper {
  534.         top: 0 !important;
  535.         height: 0 !important;
  536.         z-index: 1;
  537.         .topMenu {
  538.           position: static;
  539.           padding: 0;
  540.           .toolbox {
  541.             display: flex;
  542.             flex-flow: column;
  543.             position: absolute;
  544.             left: calc(1280rem / 2 - 50vw + 20px);
  545.             top: 16px;
  546.             width: calc(100vw - 40px);
  547.             .topMenu__logo {
  548.               margin: 0 0 0 24px;
  549.             }
  550.             .topMenu__notify {
  551.               position: absolute;
  552.               inset: 0 auto auto calc(50vw - 1280rem / 2 - 130rem);
  553.             }
  554.             .topMenu__chat {
  555.               position: absolute;
  556.               inset: 0 auto auto calc(50vw - 1280rem / 2 - 90rem);
  557.             }
  558.             .topMenu__avatar {
  559.               position: absolute;
  560.               inset: 0 0 auto auto;
  561.             }
  562.             .userMenu {
  563.               display: revert !important;
  564.               opacity: 1 !important;
  565.               background: none;
  566.               box-shadow: none;
  567.               li {
  568.                 background: none !important;
  569.               }
  570.             }
  571.             .topMenu__search-wrap {
  572.               position: absolute;
  573.               inset: 40rem auto auto 30rem;
  574.               width: auto;
  575.             }
  576.             .topMenu__menu_desktop {
  577.               flex-flow: column;
  578.               padding: 40rem 0 0 0;
  579.               .topMenu__menu-wrapper {
  580.                 display: flex;
  581.                 flex-flow: column;
  582.                 > li > .trailerCounter,
  583.                 > .topMenu__status-counter > .statusCounter {
  584.                   display: none !important;
  585.                 }
  586.                 .topMenu__item_bull {
  587.                   display: none;
  588.                 }
  589.                 .submenu-opener {
  590.                   padding: 4px 0;
  591.                 }
  592.                 .submenu {
  593.                   position: static;
  594.                   display: block !important;
  595.                   width: 270rem;
  596.                   padding: 0 0 0 36rem;
  597.                   opacity: 1 !important;
  598.                   background: none !important;
  599.                   .submenu__item {
  600.                     display: flex;
  601.                     flex-flow: row;
  602.                     background: none !important;
  603.                     &:hover {
  604.                       border-color: transparent;
  605.                       background-color: rgba(33, 176, 208, .25) !important;
  606.                     }
  607.                     .submenu__extra-links {
  608.                       position: static;
  609.                       margin: 8rem 0 0 auto;
  610.                     }
  611.                   }
  612.                 }
  613.               }
  614.             }
  615.           }
  616.         }
  617.       }
  618.     }
  619.   }
  620. }