☰

Codeforces Modern Design change-Codeforces-UI

Codeforces Modern Design change-Codeforces-UI BY FUNCDFS

当前为 2024-05-12 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Codeforces Modern Design change-Codeforces-UI
  3. // @name:en      Codeforces Modern Design change-Codeforces-UI
  4. // @namespace    https://github.com/funcdfs
  5. // @version      1.0
  6. // @description  Codeforces Modern Design change-Codeforces-UI BY FUNCDFS
  7. // @description:en Codeforces Modern Design change-Codeforces-UI BY FUNCDFS
  8. // @author       funcdfs
  9. // @match        https://atcoder.jp/contests/*
  10. // @match        https://codeforces.com/*/problem/*
  11. // @match        https://codeforces.com/contest/*
  12. // @icon         https://www.google.com/s2/favicons?sz=64&domain=codeforces.com
  13. // @grant        none
  14. // @license MIT
  15. // ==/UserScript==
  16.  
  17. (function () {
  18.     'use strict';
  19.     const codeforces_css = () => {
  20.         const styleTag = document.createElement('style');
  21.         const cssRules = `
  22. pre {
  23.     font-family:  source code pro;
  24. }
  25. div.ttypography tbody td {
  26.     text-align: left;
  27.     border-top: 0px solid #ccc;
  28. }
  29. body {
  30.     background-color: #e7e9ed0f;
  31. }
  32. .roundbox-lt,
  33. .roundbox-rt,
  34. .roundbox-lb,
  35. .roundbox-rb {
  36.     display: none;
  37. }
  38. .roundbox {
  39.     padding-bottom: 10px;
  40.     border-radius: 10px;
  41. }
  42. .sidebox.roundbox {
  43.     margin-top: 10px;
  44. }
  45. .menu-box {
  46.     margin-top: 0px !important;
  47.     -webkit-transition: none !important;
  48.     -moz-transition: none !important;
  49.     -ms-transition: none !important;
  50.     -o-transition: none !important;
  51.     transition: none !important;
  52. }
  53. .menu-box:hover {
  54.     -webkit-box-shadow: none !important;
  55.     -moz-box-shadow: none !important;
  56.     box-shadow: none !important;
  57. }
  58. /** Custom sidebar */
  59. .roundbox {
  60.     margin-top: 10px;
  61.     border: none;
  62.     -webkit-transition: all 0.3s linear 0s;
  63.     -moz-transition: all 0.3s linear 0s;
  64.     -ms-transition: all 0.3s linear 0s;
  65.     -o-transition: all 0.3s linear 0s;
  66.     transition: all 0.3s linear 0s;
  67. }
  68. .roundbox:hover {
  69.     -webkit-box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.1);
  70.     -moz-box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.1);
  71.     box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.1);
  72. }
  73. .roundbox .titled {
  74.     padding: 10px;
  75.     border-bottom-color: #e4e6eb;
  76. }
  77. .sidebox div {
  78.     border-bottom-color: #e4e6eb !important;
  79. }
  80.  
  81. /** Sidebar avatar custom */
  82. .personal-sidebar .for-avatar {
  83.     float: none !important;
  84.     display: block;
  85.     font-size: 18px;
  86.     padding: 10px;
  87. }
  88.  
  89. .personal-sidebar .for-avatar .avatar img {
  90.     border-radius: 50px;
  91.     width: 90px;
  92.     height: 90px;
  93.     object-fit: cover;
  94. }
  95.  
  96. /** Sidebar remove property links*/
  97. .personal-sidebar .propertyLinks {
  98.     display: none;
  99. }
  100.  
  101. .personal-sidebar .nav-links {
  102.     border-top-style: solid;
  103.     border-top-width: 1px;
  104.     border-top-color: #e4e6eb;
  105.     padding-top: 10px;
  106. }
  107.  
  108. .personal-sidebar .nav-links li {
  109.     list-style-type: none !important;
  110.     padding: 10px;
  111.     font-size: 13px;
  112.     border-radius: 5px;
  113.     -webkit-transition: all 0.2s linear 0s;
  114.     -moz-transition: all 0.2s linear 0s;
  115.     -ms-transition: all 0.2s linear 0s;
  116.     -o-transition: all 0.2s linear 0s;
  117.     transition: all 0.2s linear 0s;
  118. }
  119.  
  120. .personal-sidebar .nav-links li a,
  121. .personal-sidebar .nav-links li a:visited {
  122.     color: #050505;
  123. }
  124.  
  125. .personal-sidebar .nav-links li:after {
  126.     content: '→';
  127.     float: right;
  128.     color: #050505;
  129. }
  130.  
  131. .personal-sidebar .nav-links li:hover {
  132.     background-color: rgba(0, 0, 0, 0.05);
  133. }
  134.  
  135. .personal-sidebar .nav-links li a {
  136.     text-decoration: none !important;
  137. }
  138.  
  139. .roundbox .bottom-links {
  140.     padding: 10px;
  141.     background-color: #fff;
  142.     border-top-color: #e4e6eb !important;
  143.     border-bottom-left-radius: 10px !important;
  144.     border-bottom-right-radius: 10px !important;
  145. }
  146.  
  147. .roundbox .rtable .dark {
  148.     background-color: #fff;
  149. }
  150. /** Topic custom */
  151. .topic {
  152.     margin-top: 10px;
  153.     padding: 20px;
  154.     background-color: #fff;
  155.     border-radius: 10px;
  156.     -webkit-transition: all 0.3s linear 0s;
  157.     -moz-transition: all 0.3s linear 0s;
  158.     -ms-transition: all 0.3s linear 0s;
  159.     -o-transition: all 0.3s linear 0s;
  160.     transition: all 0.3s linear 0s;
  161. }
  162.  
  163. .topic:hover {
  164.     -webkit-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  165.     -moz-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  166.     box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  167. }
  168.  
  169. .topic .roundbox {
  170.     border-style: solid;
  171.     border-color: #e4e6eb;
  172. }
  173.  
  174. .topic .meta a {
  175.     text-decoration: none;
  176. }
  177.  
  178. .meta {
  179.     padding-bottom: 0px !important;
  180. }
  181.  
  182. .topic .content {
  183.     border-left-color: #e4e6eb;
  184. }
  185. .roundbox .rtable td,
  186. .roundbox .rtable th {
  187.     border-bottom: 1px solid #e4e6eb;
  188.     border-left: none;
  189.     padding: 7px;
  190. }
  191.  
  192. /** Header custom */
  193. #header {
  194.     padding: 20px;
  195.     margin-top: -14px;
  196.     background-color: #fff;
  197. }
  198.  
  199. .menu-box {
  200.     padding: 10px;
  201.     border-radius: 0;
  202.     border-top: none;
  203.     border-left: none;
  204.     border-right: none;
  205.     border-bottom-left-radius: 20px;
  206.     border-bottom-right-radius: 20px;
  207.     border-bottom-color: #e4e6eb;
  208. }
  209.  
  210. /** Footer custom */
  211. #footer {
  212.     background-color: #fff;
  213.     width: 100%;
  214.     height: 100%;
  215.     border-top-left-radius: 20px;
  216.     border-top-right-radius: 20px;
  217.     border-top-color: #e4e6eb;
  218. }
  219.  
  220. /** Contest data table */
  221. .datatable .lt,
  222. .datatable .rt,
  223. .datatable .lb,
  224. .datatable .rb,
  225. .datatable .ilt,
  226. .datatable .irt {
  227.     display: none;
  228. }
  229.  
  230. .datatable table {
  231.     margin-top: 10px;
  232.     border-style: solid;
  233.     border-color: #e4e6eb;
  234.     border-width: 1px;
  235. }
  236.  
  237. .datatable table .dark {
  238.     background-color: #fff;
  239. }
  240.  
  241. .datatable table td {
  242.     padding-top: 5px;
  243.     padding-bottom: 5px;
  244.     padding-left: 10px;
  245.     padding-right: 10px;
  246. }
  247.  
  248. .datatable {
  249.     padding: 20px !important;
  250.     width: inherit;
  251.     padding-bottom: 40px !important;
  252.     background-color: #fff !important;
  253.     border-radius: 10px;
  254.     -webkit-transition: all 0.3s linear 0s;
  255.     -moz-transition: all 0.3s linear 0s;
  256.     -ms-transition: all 0.3s linear 0s;
  257.     -o-transition: all 0.3s linear 0s;
  258.     transition: all 0.3s linear 0s;
  259. }
  260.  
  261. .datatable:hover {
  262.     -webkit-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  263.     -moz-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  264.     box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  265. }
  266.  
  267. .contests-table::first-line {
  268.     font-size: 20px;
  269.     font-weight: bold !important;
  270. }
  271.  
  272.  
  273. .datatable {
  274.     margin-top: 10px !important;
  275. }
  276.  
  277. /** Custom input */
  278. input[type="file"] {
  279.     padding: 2px 2px!important;
  280.     border: none !important;
  281. }
  282.  
  283. input,
  284. button {
  285.     outline: none;
  286.     height: auto !important;
  287.     padding: 5px 30px 5px 30px !important;
  288.     border-radius: 10px;
  289.     border-width: 1.5px;
  290.     border-color: #3b5998;
  291.     font-weight: normal;
  292.     -webkit-transition: all 0.3s linear 0s;
  293.     -moz-transition: all 0.3s linear 0s;
  294.     -ms-transition: all 0.3s linear 0s;
  295.     -o-transition: all 0.3s linear 0s;
  296.     transition: all 0.3s linear 0s;
  297. }
  298.  
  299. input:hover,
  300. button:hover {
  301.     color: rgba(0, 0, 0, 0.7);
  302.     background-color: #e4e6eb;
  303. }
  304.  
  305. label[for=searchByProblemCheckbox] {
  306.     margin-top: 20px !important;
  307.     color: rgba(0, 0, 0, 0.5);
  308. }
  309.  
  310. .notice {
  311.     margin-top: 10px !important;
  312. }
  313.  
  314. .highlighted-row td,
  315. .highlighted-row th {
  316.     background-color: rgba(221, 238, 255, 0.47) !important;
  317. }
  318.  
  319. input[name=sourceFile] {
  320.     border-style: dashed;
  321.     border-width: 2px;
  322.     border-color: #e4e6eb;
  323.     border-radius: 10px;
  324.     padding: 5px;
  325.     width: 100%;
  326. }
  327.  
  328. .submit-form {
  329.     margin-top: 20px;
  330.     background-color: #fff;
  331.     padding: 20px 0 20px 0;
  332.     border-radius: 10px;
  333.     -webkit-transition: all 0.3s linear 0s;
  334.     -moz-transition: all 0.3s linear 0s;
  335.     -ms-transition: all 0.3s linear 0s;
  336.     -o-transition: all 0.3s linear 0s;
  337.     transition: all 0.3s linear 0s;
  338. }
  339.  
  340. .submit-form:hover {
  341.     -webkit-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  342.     -moz-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  343.     box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
  344. }
  345.  
  346. .source-popup pre {
  347.     padding: 10px;
  348.     border-style: solid;
  349.     border-width: 2px;
  350.     border-color: #e4e6eb;
  351. }
  352.  
  353. hr {
  354.     border: 0;
  355.     height: 2px;
  356.     background-image: linear-gradient(to right, rgba(228, 230, 235, 0.1), rgba(228, 230, 235, 1), rgba(228, 230, 235, 0.1));
  357. }
  358.  
  359. .popup-input-div div,
  360. .popup-output-div div,
  361. .popup-answer-div div,
  362. .popup-checker-div div {
  363.     margin-top: 10px;
  364.     margin-bottom: 5px;
  365. }
  366.  
  367. .table-form {
  368.     padding: 10px;
  369. }
  370. .diff-notifier {
  371.     display: none !important;
  372. }
  373. /*main*/
  374. .problemindexholder {
  375.     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  376.     margin-top: 10px;
  377.     background-color: #fff;
  378.     padding: 30px;
  379.     border-radius: 10px;
  380.     -webkit-transition: all 0.3s linear 0s;
  381.     -moz-transition: all 0.3s linear 0s;
  382.     -ms-transition: all 0.3s linear 0s;
  383.     -o-transition: all 0.3s linear 0s;
  384.     transition: all 0.3s linear 0s;
  385. }
  386.  
  387. .sample-test {
  388.     margin-top: 10px;
  389. }
  390.  
  391. .sample-test .input .title,
  392. .sample-test .output .title {
  393.     font-size: 15px;
  394. }
  395.  
  396. .sample-test pre {
  397.     padding-top: 10px !important;
  398.     padding-bottom: 10px !important;
  399.     padding-left: 5px !important;
  400.     padding-right: 5px !important;
  401. }
  402.  
  403. .placeholder {
  404.     margin-bottom: 10px !important;
  405. }
  406.  
  407. a[href^="/passwordRecovery"] {
  408.     display: block;
  409.     margin-top: 20px !important;
  410. }
  411.  
  412. .backLava {
  413.     border-radius: 10px;
  414. }
  415.  
  416. #body {
  417.     max-width: 1220px;
  418.     min-width: 980px;
  419. }
  420.  
  421. ::selection {
  422.     background-color: #c4b5fd!important;
  423.     color: #000!important;
  424. }
  425.  
  426. ::-webkit-scrollbar-thumb {
  427.     background: #323536!important;
  428. }
  429. ::-webkit-scrollbar {
  430.     width: 10px;
  431.     height: 10px;
  432. }
  433. div.ttypography a:hover {
  434.     color: #9e88f5 !important;
  435.     background: #cfecdc;
  436. }
  437. div.ttypography li,
  438. div.ttypography p {
  439.     font-size: 1.1em;
  440.     line-height: 1.4em;
  441. }
  442. /** Footer custom */
  443. #footer {
  444.     /** background-color: #fff;
  445.     width: 100%;
  446.     height: 100%;
  447.     border-top-left-radius: 20px;
  448.     border-top-right-radius: 20px;
  449.     border-top-color: #e4e6eb;
  450.     **/
  451.     display: none !important;
  452. }
  453. pre {
  454.     tab-size: 4;
  455. }
  456. .sidebar-menu ul {
  457.     font-size: 1.4rem;
  458. }
  459. body {
  460.     zoom: 111% !important;
  461. }
  462. /** move pos, if you want the pos, just delete below string **/
  463. #header {
  464.     position: absolute !important;
  465.     top: 20px;
  466.     z-index: 1;
  467.     right: 20px;
  468.     /* 将元素右对齐 */
  469.     width: 220px;
  470.     background: #00000000;
  471. }
  472. .menu-box {
  473.     background: #00000000;
  474.     width: 70%;
  475. }
  476. .property-title,
  477. #header > div:nth-child(1) {
  478.     display: none !important;
  479. }
  480. /** info remove to bottom */
  481. .time-limit {
  482.     position: fixed !important;
  483.     right: 30px;
  484.     bottom: 70px;
  485.     z-index: -9;
  486. }
  487. .memory-limit {
  488.     position: fixed !important;
  489.     right: 30px;
  490.     bottom: 50px;
  491.     z-index: -9;
  492.  
  493. }
  494. .input-file {
  495.     position: fixed !important;
  496.     right: 30px;
  497.     bottom: 30px;
  498.     z-index: -9;
  499. }
  500. .output-file {
  501.     position: fixed !important;
  502.     right: 30px;
  503.     bottom: 10px;
  504.     z-index: -9;
  505. }
  506. `;
  507.         styleTag.appendChild(document.createTextNode(cssRules));
  508.         document.head.appendChild(styleTag);
  509.     };
  510.     const codeforces_luogu = () => {
  511.         function getProblemId(str) {
  512.             let pos = str.indexOf("contest/") + "contest/".length;
  513.             let contestNum = "";
  514.             while (str[pos] >= '0' && str[pos] <= '9') {
  515.                 contestNum += str[pos];
  516.                 pos++;
  517.             }
  518.             return contestNum;
  519.         }
  520.         function getProblemChar(str) {
  521.             let pos = str.indexOf("problem/") + "problem/".length;
  522.             let problemLetter = str.substr(pos);
  523.             return problemLetter;
  524.         }
  525.         // jump to luogu.com 跳转到洛谷 delete luogu
  526.         let str = window.location.href
  527.         let problemId = getProblemId(str);
  528.         let problemChar = getProblemChar(str);
  529.         let luogulink = document.createElement('li');
  530.         luogulink.setAttribute('style', 'color: green !important;');
  531.         luogulink.innerHTML = `<a href="https://www.luogu.com.cn/problem/CF${problemId}${problemChar}" target="_blank"> 洛谷 </a>`;
  532.         luogulink.classList.add('luogulink')
  533.         document.querySelector("#sidebar > div.roundbox.sidebox.sidebar-menu.borderTopRound > ul").appendChild(luogulink)
  534.     };
  535.     const codeforces_friend_status = () => {
  536.         // friends-status-button 好友提交历史记录
  537.         let uuuuuuuuurl = window.location;
  538.         let cccontestId = uuuuuuuuurl.toString().split("/").filter((x) => {
  539.             if (typeof x !== 'string') { return; }
  540.             const num = Number(x);
  541.             if (Number.isInteger(num)) { return num; }
  542.         })[0];
  543.         let s = uuuuuuuuurl.toString().split("/");
  544.         let iiid = s[s.length - 1];
  545.         let friendBtn = document.createElement('li');
  546.         friendBtn.innerHTML = `<a href="https://codeforces.com/contest/${cccontestId}/status/${iiid}?friends=on" target="_blank">Friends Status</a>`;
  547.         friendBtn.classList.add('friendBtn')
  548.         document.querySelector(".second-level-menu-list").appendChild(friendBtn);
  549.     };
  550.     const codeforces_timeLimits = () => {
  551.         // time limits part 时间限制等 放到一个位置
  552.         /* const timeLimits = document.querySelector(".time-limit");
  553.         const memoryLimits = document.querySelector(".memory-limit");
  554.         const inputLimits = document.querySelector(".input-file");
  555.         const outputLimits = document.querySelector(".output-file");
  556.         let informationSpace = document.querySelector();
  557.         informationSpace.parentNode.insertBefore(informationSpace, info); */
  558.         //informationSpace.appendChild(timeLimits);
  559.         //informationSpace.appendChild(memoryLimits);
  560.         //informationSpace.appendChild(inputLimits);
  561.         //informationSpace.appendChild(outputLimits);
  562.     };
  563.     const KEY_PREFIX = 'funcdfs';
  564.     const atcoder_navigation = () => {
  565.         const contest = location.href.match(/^https:\/\/atcoder\.jp\/contests\/([^\/?]+)/)[1];
  566.         const key = KEY_PREFIX + 'atcoder-' + contest;
  567.         if (location.href.match(/^https:\/\/atcoder\.jp\/contests\/([^\/]+)\/tasks\/?$/)) {
  568.             const problems = [];
  569.             const rows = document.querySelectorAll('tbody>tr');
  570.             for (let i = 0; i < rows.length; i++) {
  571.                 const links = rows[i].querySelectorAll('a');
  572.                 const href = links[0].getAttribute('href');
  573.                 const text = links[0].textContent + ' - ' + links[1].textContent;
  574.                 problems.push({
  575.                     href: href,
  576.                     text: text
  577.                 });
  578.             }
  579.             localStorage[key] = JSON.stringify(problems);
  580.         }
  581.         if (key in localStorage) {
  582.             let problems = JSON.parse(localStorage[key]);
  583.             const problemsBar = document.createElement('ul');
  584.             problemsBar.className = 'nav nav-tabs';
  585.             for (let i = 0; i < problems.length; i++) {
  586.                 const link = document.createElement('a');
  587.                 link.setAttribute('style', 'margin-left: 10px; margin-right: 10px; white-space: nowrap');
  588.                 link.setAttribute('href', problems[i].href);
  589.                 link.textContent = problems[i].text;
  590.                 const span = document.createElement('span');
  591.                 span.textContent = ' ';
  592.                 span.appendChild(link);
  593.                 problemsBar.appendChild(span);
  594.             }
  595.             document.getElementById('contest-nav-tabs').appendChild(problemsBar);
  596.         }
  597.     };
  598.     const codeforces_navigation = () => {
  599.         const contest = location.href.match(/^https:\/\/codeforces\.com\/contest\/([^\/?]+)/)[1];
  600.         const key = KEY_PREFIX + 'codeforces-' + contest;
  601.         if (location.href.match(/^https:\/\/codeforces\.com\/contest\/([^\/]+)\/?$/)) {
  602.             const problems = [];
  603.             const rows = document.querySelectorAll('.problems>tbody>tr');
  604.             for (let i = 1; i < rows.length; i++) {
  605.                 const links = rows[i].querySelectorAll('a');
  606.                 const href = links[0].getAttribute('href');
  607.                 const text = links[0].textContent.trim() + '. ' + links[1].textContent;
  608.                 problems.push({
  609.                     href: href,
  610.                     text: text
  611.                 });
  612.             }
  613.             localStorage[key] = JSON.stringify(problems);
  614.         }
  615.  
  616.         if (key in localStorage) {
  617.             let problems = JSON.parse(localStorage[key]);
  618.             const problemsBar = document.createElement('ul');
  619.             problemsBar.setAttribute('style', 'margin-left: 15px; margin-right: 280px; padding-top: 30px');
  620.             for (let i = 0; i < problems.length; i++) {
  621.                 const link = document.createElement('a');
  622.                 link.setAttribute('style', 'margin-right: 20px; white-space: nowrap');
  623.                 link.setAttribute('href', problems[i].href);
  624.                 link.textContent = problems[i].text;
  625.                 const span = document.createElement('span');
  626.                 span.textContent = ' ';
  627.                 span.appendChild(link);
  628.                 problemsBar.appendChild(span);
  629.             }
  630.  
  631.             const content = document.getElementById('pageContent');
  632.             content.parentNode.insertBefore(problemsBar, content);
  633.         }
  634.     };
  635.     if (location.href.match(/^https:\/\/atcoder\.jp\/contests\//)) {
  636.         atcoder_navigation();
  637.     } else {
  638.         if (location.href.match(/^https:\/\/codeforces\.com\/contest\//)) {
  639.             codeforces_navigation();
  640.         }
  641.         codeforces_css();
  642.         codeforces_luogu();
  643.         codeforces_friend_status();
  644.         codeforces_timeLimits();
  645.     }
  646. })();