Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at contact@userstyles.org.
Changing your Avatar.
The only way to currently change a forum avatar is through Gravatar.com. The email address used for your Userstyles.org account must be one of the email addresses that is registered to your Gravatar account.

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 2018 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 2018 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.