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

Landia

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.

stonecrusher

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.

Landia

stonecrusher said:

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!

Landia

@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}
}

stonecrusher

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.

Landia

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

Landia

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

stonecrusher

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

Landia

@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?

stonecrusher

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)

Landia

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