Anyone Wanna help? https://vjudge.net/ Thanks!

https://cn.vjudge.net/ and https://vjudge.net/ (they are the same)

There was an old one but it is disabled:
https://userstyles.org/styles/129957/vjudge-material-theme

Thanks a lot.

Comments

  • Style is made only for

    @-moz-document url-prefix("http://vjudge.net/")
    

    Replace it with

    @-moz-document domain("vjudge.net")
    

    to also include cn.-subdomain and https-connection.

  • Style is made only for

    @-moz-document url-prefix("http://vjudge.net/")
    

    Replace it with

    @-moz-document domain("vjudge.net")
    

    to also include cn.-subdomain and https-connection.

    Thank you so much!
  • @stonecrusher
    Thank you so much.

    But I have a little more problem.

    The Style has almost no effect on particular problem pages such as https://vjudge.net/problem/POJ-1000

    so what should I do to make them "material", too?

    Thanks.

    P.S.: I made some change on the code to better fit in me.

    @-moz-document domain("vjudge.net") {
    :root {
    --background-color: #fafafa;
    --accent-color: #FF9800;
    --primary-color: #009688;
    --light-primary-color: #B2DFDB;
    --light-light-primary-color: #D2EFEB;

    --secondary-text-color: #727272;
    --text-color: #FFFFFF;
    --primary-text: #212121;
    --divider-color: #B6B6B6;


    --ac-color:#C8E6C9;
    --first-ac-color:#4CAF50;
    --wrong-color:#FFCCBC;
    --practice-color:#F0F4C3;

    }



    /* 菜单美化 */
    #cssmenu>ul {
    border: none;
    border-radius: 0;
    height: 60px;
    background-color: var(--primary-color);
    box-shadow: 0 5px 5px rgba(0,0,0,0.26);
    }

    #cssmenu>ul>li>a {
    font-size: 16px;
    padding: 19px 20px;
    color: var(--text-color);
    }

    #cssmenu>ul>li.has-sub>a::after {
    top: 23px;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    }

    #cssmenu>ul>li:hover>a, #cssmenu>ul>li.active>a {
    color: var(--text-color);
    }

    #cssmenu>ul>li:hover>a {
    background-color: rgba(0,0,0,0.1);
    }

    #menu-line {
    background: var(--text-color);
    visibility: hidden;
    }



    /* 数据表格 */
    .dataTables_wrapper {
    min-width: 600px;
    max-width: 5000px;
    width: 100%;
    margin: 0px auto 0px auto;
    }

    .ui-widget-header {
    border: none;
    background: none;
    }

    table.dataTable thead th.ui-state-default {
    border: none;
    background: none;

    box-shadow: none;
    }

    .dataTables_wrapper {
    box-shadow: 0 0 10px rgba(0,0,0,.16),0 10px 10px rgba(0,0,0,.32);
    background-color: #fff;
    }

    table.dataTable {
    width: 100% !important;
    font-size: 14px;

    }

    table#table_status td {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }

    .dataTable thead {
    margin-bottom: 20px;
    }

    table.dataTable tbody tr {
    border-width: 0 0 1px 0;
    border-color: var(--divider-color);
    }

    table.dataTable tbody tr td {
    /* line-height: 30px; */
    /* background-color: white !important; */
    /* border-bottom: 1px solid var(--divider-color); */
    }

    /* table.dataTable tr.even td.sorting_1, table.dataTable tr.odd td.sorting_1 {
    background-color: white !important;
    }
    */
    .dataTable a {
    color: #0066CC;

    }


    /* 按钮 */
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: white;
    border: none;

    box-shadow: 0 0 6px rgba(0,0,0,.12),0 6px 6px rgba(0,0,0,.24);

    }

    .dataTables_wrapper .dataTables_paginate .fg-button {
    border: none;
    font: 13.3333px Arial;
    margin: 0 2px;
    }

    .dataTables_wrapper .dataTables_paginate .fg-button:hover {
    background: none;
    border: none;
    color: #333 !important;
    }

    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: var(--accent-color);
    border: none;
    color: var(--text-color) !important;
    }

    .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0;
    }

    .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0;
    }

    .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0;
    }
    .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0;
    }

    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: var(--accent-color);
    border: none;
    color: var(--text-color) !important;
    }

    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: var(--text-color);
    }

    a:hover {
    TEXT-DECORATION: none;
    }




    .MathJax nobr>span.math>span{border-left-width:0 !important}
    }
  • Please post code as code or even better just a link. The thread becomes confusingly long if problem isn't solved fast.
    Using html: wrap it in <pre> tags

    <pre>your code here</pre>
    

    Using Markdown: Wrap code in three backticks

    ```
    your code here
    ```
    

    I looked through the style and replaced the faulty @-moz-doc rules with regexps as close as possible to the original.

    Use this: https://pastebin.com/L4uuQ9PJ

    So you have to apply your changes again.
    There also might be problems as the style wasn't updated for more than a year and maybe the site has changed.

  • edited March 30 Chrome

    @stonecrusher

    Thank you for your great effort. Well, my meaning is, how to make the part of "dataTable" work on the problem pages(Can I make the "content" part almost the same as the "dataTable" part?). Thanks.

  • P.S.: Maybe I can send the code this way.

  • I didn't logically look through the style or inspect something. Just saw, that some code was outcommented.
    Also corrected some more syntax flaws (space in `@ font-face`).

    Try this:
    https://pastebin.com/uFGf1mnR
  • @stonecrusher

    Thank you. Well, my meaning is like this:

    After using the style, the dataTables changed from Picture C to Picture A.

    Can we change the style further more to let the blue(how do you call that color?) blocks in picture B looks like Picture A, too?
    1424 x 760 - 160K
    838 x 922 - 493K
    1420 x 687 - 518K
  • edited April 1 Firefox

    So you want the blue boxes to alternate between grey and white?

    Add

    #description-container > dd { background-color:lightgrey !important; }
    #description-container > dd:nth-of-type(odd) { background-color:white !important; }
    

    to the section you like (contest, problem etc, I don't know)

  • @stonecrusher Perfectly solved my problem, thank you for all your effort.

Sign In or Register to comment.