AtCoder Style Optimizer for Single Display

Overrides AtCoder styles for single display

  1. // ==UserScript==
  2. // @name AtCoder Style Optimizer for Single Display
  3. // @name:ja AtCoder Style Optimizer for Single Display
  4. // @namespace https://github.com/xe-o
  5. // @version 0.4
  6. // @description Overrides AtCoder styles for single display
  7. // @description:ja シングルディスプレイ向けにAtCoderのスタイルを最適化します
  8. // @author XERO
  9. // @license MIT
  10. // @match https://atcoder.jp/*
  11. // @run-at document-start
  12. // @grant none
  13. // ==/UserScript==
  14.  
  15. (function () {
  16. "use strict";
  17.  
  18. const css = `
  19. @media (max-width: 1100px) {
  20. .container {
  21. width: 100%;
  22. }
  23.  
  24. #main-container {
  25. padding: 30px 20px 10px;
  26. }
  27.  
  28. #main-div.float-container {
  29. background: none;
  30. }
  31.  
  32. .float-container > #main-container {
  33. box-shadow: none;
  34. }
  35.  
  36. .h2 {
  37. font-size: 20px;
  38. }
  39.  
  40. h3 {
  41. font-size: 20px;
  42. }
  43.  
  44. #main-container > div.row > div:nth-child(2) > span.h2 > a {
  45. font-size: 11px;
  46. padding: 2px 6px;
  47. margin-left: 8px;
  48. }
  49.  
  50. #contest-nav-tabs > div > small.back-to-home.pull-right {
  51. display: none !important;
  52. }
  53.  
  54. #contest-nav-tabs > ul > li {
  55. width: auto;
  56. }
  57.  
  58. #contest-nav-tabs > ul > li > a {
  59. font-size: 12px;
  60. padding: 6px 8px;
  61. }
  62. }
  63.  
  64. @media screen and (min-width: 768px) {
  65. #header .header-page, .header-lang {
  66. display: -webkit-box !important;
  67. }
  68. }
  69. `;
  70.  
  71. const styleNode = document.createTextNode(css);
  72. document.head.insertAdjacentHTML("beforeend", "<style></style>");
  73. document.head.lastElementChild.appendChild(styleNode);
  74. })();