It looks like you're new here. If you want to get involved, click one of these buttons!
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
Replace it with
to also include
cn.
-subdomain and https-connection.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>
tagsUsing Markdown: Wrap code in three backticks
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.
@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.
Also corrected some more syntax flaws (space in `@ font-face`).
Try this:
https://pastebin.com/uFGf1mnR
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?
So you want the blue boxes to alternate between grey and white?
Add
to the section you like (contest, problem etc, I don't know)
@stonecrusher Perfectly solved my problem, thank you for all your effort.