Greasy Fork 支持简体中文。

New FMP Style

A script to inject re-style CSS classes for FMP

  1. // ==UserScript==
  2. // @name New FMP Style
  3. // @namespace http://tampermonkey.net/
  4. // @license MIT
  5. // @version 0.1 beta
  6. // @description A script to inject re-style CSS classes for FMP
  7. // @author Haydar
  8. // @match https://footballmanagerproject.com/*
  9. // @icon https://www.google.com/s2/favicons?sz=64&domain=footballmanagerproject.com
  10. // @grant GM_addStyle
  11. // @require https://code.jquery.com/jquery-3.6.0.min.js
  12. // ==/UserScript==
  13.  
  14. GM_addStyle(`
  15. .sidenav-inner.py-1.ps > .sidebar-logo #img_sidelogo > .sidebar-logo.logo
  16. {
  17. filter: drop-shadow(0 0 1px #FFF);
  18. }
  19.  
  20. .sidenav-inner.py-1.ps > .sidebar-logo .sidebar-logo
  21. {
  22. text-shadow: unset;
  23. color: #d4d4d4;
  24. }
  25.  
  26. .sidenav-inner.py-1.ps > .sidebar-logo .sidebar-logo.cash
  27. {
  28. color: #ffcc33
  29. }
  30.  
  31. .d-flex > .panel.header
  32. {
  33. background-color: #3338;
  34. color: #d4d4d4;
  35. }
  36.  
  37. .d-flex > .panel.header > .lheader
  38. {
  39. color: #98c385;
  40. }
  41.  
  42. .layout-container
  43. {
  44. position: relative;
  45. background-color: #216300; /* Fallback background color */
  46. overflow: hidden; /* Hide the edges of the pseudo-element */
  47. }
  48.  
  49. .layout-container > *
  50. {
  51. z-index: 1;
  52. }
  53.  
  54. .layout-container::before {
  55. content: "";
  56. position: absolute;
  57. top: 0;
  58. left: 0;
  59. width: 100%;
  60. height: 100%;
  61. background-image: url('../images/grassbkg.png');
  62. opacity: 0.7; /* Optional: makes it look more clouded */
  63. z-index: 0; /* Keeps it behind the content */
  64. }
  65.  
  66. .fmp-navbar-theme, .fmp-content
  67. {
  68. background-image: unset;
  69. background-color: unset !important;
  70. }
  71.  
  72. .fmpx.board.box
  73. {
  74. background-image: none;
  75. background-color: #FFF8;
  76. border-radius: 0;
  77. flex-basis: 33% !important;
  78. flex-grow: 1 !important;
  79. }
  80.  
  81. td > div:not(.caption, .date, .sub, .sidebar-logo)
  82. {
  83. color: #333 !important;
  84. }
  85.  
  86. .fmpx.board table
  87. {
  88. width: 100% !important;
  89. }
  90.  
  91. .fmpx.board .structure-block
  92. {
  93. background-color: #FFF8;
  94. border-radius: 0;
  95. box-shadow: 0 0 4px #000;
  96. color: #333;
  97. }
  98.  
  99. .fmpx.board table .fmp-icons:not(.sidenav-icon, .mail-icon)
  100. {
  101. color: #666666;
  102. }
  103.  
  104. .fmpx.board>.title
  105. {
  106. border-bottom: 1px solid #333;
  107. font-weight: bold;
  108. }
  109.  
  110. .fmpx.board>.title:not(:first-child)
  111. {
  112. margin-top: 12px;
  113. }
  114.  
  115. .fmpx.board>.title>.section
  116. {
  117. color: #143f00;
  118. }
  119.  
  120. .fmpx.board>.title>.main, .fmpx.board table .caption
  121. {
  122. color: #ffcc33;
  123. }
  124.  
  125. .fmpx.board table .subtext
  126. {
  127. color: #686c6a;
  128. }
  129.  
  130. .fmpx.board #matches-footer
  131. {
  132. display: flex;
  133. flex-wrap: nowrap;
  134. }
  135.  
  136. #supportersItem, #last-matches, #homeLastNews, #team2Summary, #rankingItem
  137. {
  138. display: flex;
  139. flex-wrap: wrap;
  140. }
  141.  
  142. #matches-footer button, #supportersItem > button, #last-matches button, .fmpx.board #homeLastNews button, .fmpx.board #rankingItem button
  143. {
  144. margin-top: 40px;
  145. flex-grow: 1;
  146. border-radius: 0;
  147. border: 0;
  148. background-color: #3A6D3E;
  149. color: #D4D4D4;
  150. box-shadow: 0 0 4px #000;
  151. }
  152.  
  153. #team2Summary button
  154. {
  155. margin-top: 40px;
  156. flex-grow: 0.5;
  157. border-radius: 0;
  158. border: 0;
  159. background-color: #3A6D3E;
  160. color: #D4D4D4;
  161. box-shadow: 0 0 4px #000;
  162. }
  163.  
  164. #homeLastNews > div, #homeLastNews > table, #homeLastNews > div > div
  165. {
  166. width: 100%;
  167. max-width: unset !important;
  168. }
  169.  
  170. .fmpx.board .fixmatch
  171. {
  172. background-image: unset;
  173. flex: unset;
  174. flex-grow: 1;
  175. width: 100%;
  176. }
  177.  
  178. .fmpx.board .fixmatch.won
  179. {
  180. background-color: #2caf30;
  181. background-image: linear-gradient(90deg, #333 33%, #2caf30, #333 66%);
  182. }
  183.  
  184. .fmpx.board .fixmatch.lost
  185. {
  186. background-color: #e55353;
  187. background-image: linear-gradient(90deg, #333 33%, #e55353, #333 66%);
  188. }
  189.  
  190. .fmpx.board .fixmatch.unpl
  191. {
  192. background-color: #4495f6;
  193. background-image: linear-gradient(90deg, #333 33%, #4495f6, #333 66%);
  194. }
  195.  
  196. .fmpx.board .fixmatch.draw
  197. {
  198. background-color: #909ea5;
  199. background-image: linear-gradient(90deg, #333 33%, #909e50, #333 66%);
  200. }
  201.  
  202. /* Table styling */
  203. .fmpx.board .list-table {
  204. width: 100%;
  205. border-collapse: collapse;
  206. font-family: Arial, sans-serif;
  207. color: #333;
  208. border: 1px solid #d4d4d4;
  209. box-shadow: 0 0 8px #333;
  210. }
  211.  
  212. /* Header styling */
  213. #agenda thead th {
  214. background-color: #3A6D3E;
  215. color: #ffffff;
  216. padding: 12px 15px;
  217. font-weight: bold;
  218. border-bottom: 1px solid #d4d4d4;
  219. }
  220.  
  221. #agenda thead th:first-child {
  222. border-bottom-color: #3A6D3E;
  223. }
  224.  
  225. #agenda thead th:nth-child(2n)
  226. {
  227. background-color: #5A8D5E;
  228. }
  229.  
  230. /* Row hover effect */
  231. #agenda tr:hover {
  232. background-color: rgba(200, 200, 200, 0.2);
  233. }
  234.  
  235. /* Center-align certain columns */
  236. #agenda .center {
  237. text-align: center;
  238. }
  239.  
  240. /* Styling for the date column */
  241. #agenda .hyellow > .center:first-child
  242. {
  243. background-color: #3A6D3E;
  244. }
  245.  
  246. #agenda .date
  247. {
  248. width: 100%;
  249. border: 0;
  250. background-color: inherit;
  251. color: #D4D4D4 !important;
  252. }
  253.  
  254. #agenda .date .weekday,
  255. #agenda .date .day,
  256. #agenda .date .hour {
  257. display: block;
  258. font-weight: bold;
  259. }
  260.  
  261. #agenda .date .day {
  262. font-size: 24px;
  263. }
  264.  
  265. #agenda .date .hour {
  266. font-size: 12px;
  267. }
  268.  
  269. /* Icon styling in the event column */
  270. #agenda .event i {
  271. color: #216300;
  272. }
  273.  
  274. /* Link styling in the details column */
  275. #agenda td a {
  276. display: block;
  277. width: 100%;
  278. height: 100%;
  279. color: #333;
  280. font-weight: bold;
  281. text-decoration: none;
  282. }
  283.  
  284. #agenda td a:hover {
  285. color: #3A6D3E;
  286. }
  287.  
  288. /* Background color for specific row types */
  289. .fmpx .list-table .hyellow {
  290. background-color: unset !important;
  291. }
  292.  
  293. /* General cell styling */
  294. .fmpx .list-table .hyellow > td {
  295. padding: 4px 7px;
  296. vertical-align: middle;
  297. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  298. background-color: #dfdbda70;
  299. }
  300.  
  301. .fmpx .list-table .hyellow > td:nth-child(2n) {
  302. background-color: #efebea70;
  303. }
  304.  
  305. #agenda .table-row-won {
  306. background-color: #4CAF50;
  307. color: #ffffff;
  308. }
  309.  
  310. #agenda .table-row-lost {
  311. background-color: #e57373;
  312. color: #ffffff;
  313. }
  314.  
  315. #agenda .table-row-draw {
  316. background-color: #b0bec5;
  317. color: #333;
  318. }
  319.  
  320. #agenda .table-row-nextmatch {
  321. background-color: #64b5f6;
  322. color: #ffffff;
  323. }
  324.  
  325. /* Header styling for forum table */
  326. #lastIntPostsTable> thead, #lastNatPostsTable> thead
  327. {
  328. display: none;
  329. }
  330.  
  331. /* Alternating header styling for better contrast */
  332. #lastIntPostsTable thead th:nth-child(2n), #lastNatPostsTable thead th:nth-child(2n) {
  333. background-color: #5A8D5E;
  334. }
  335.  
  336. /* Row hover effect */
  337. #lastIntPostsTable tr:hover,#lastNatPostsTable tr:hover {
  338. background-color: rgba(200, 200, 200, 0.2);
  339. transition: background-color 0.3s ease;
  340. }
  341.  
  342. /* Center-align specific columns */
  343. #lastIntPostsTable .center, #lastNatPostsTable .center {
  344. text-align: center;
  345. }
  346.  
  347. /* Styling for date column */
  348. #lastIntPostsTable .date .weekday, #lastNatPostsTable .date .weekday {
  349. color: #d4d4d4;
  350. font-weight: bold;
  351. }
  352.  
  353. #lastIntPostsTable .date, #lastNatPostsTable .date {
  354. background-color: #3E3E6D;
  355. border-radius: 7px 7px 0 0;
  356. border: 0;
  357. height: 14px;
  358. padding: 2px;
  359. }
  360.  
  361. /* Logo styling */
  362. #lastIntPostsTable .logo, #lastNatPostsTable .logo {
  363. max-width: 30px;
  364. max-height: 30px;
  365. border-radius: 50%;
  366. display: inline-block;
  367. vertical-align: middle;
  368. }
  369.  
  370. /* Team logo and name, Also date text */
  371. #lastIntPostsTable .shieldname > tr, #lastNatPostsTable .shieldname > tr{
  372. padding: 0;
  373. display: flex;
  374. flex-wrap: nowrap;
  375. flex-direction: column;
  376. }
  377.  
  378. #lastIntPostsTable .shieldname td.logo.userTeams, #lastIntPostsTable .shieldname td.logo.small-shirt, #lastNatPostsTable .shieldname td.logo.userTeams, #lastNatPostsTable .shieldname td.logo.small-shirt {
  379. width: 100%;
  380. filter: drop-shadow(1px 1px 3px #000);
  381. border-radius: 0;
  382. max-width: unset;
  383. padding: 5px 0 0 !important;
  384. max-height: 35px;
  385. }
  386.  
  387. #lastIntPostsTable .shieldname td.logo>img, #lastIntPostsTable .shieldname td.logo>.fmp-shields, #lastNatPostsTable .shieldname td.logo>img, #lastNatPostsTable .shieldname td.logo>.fmp-shields {
  388.  
  389. border-radius: 0;
  390. margin: auto;
  391. max-height: 30px;
  392. }
  393.  
  394. #lastIntPostsTable .shieldname td.logo>.fmp-shields.shield-back, #lastNatPostsTable .shieldname td.logo>.fmp-shields.shield-back
  395. {
  396. margin-right: -30px !important;
  397. }
  398.  
  399. #lastIntPostsTable .shieldname td.logo>.fmp-shields.shield-stripes, #lastNatPostsTable .shieldname td.logo>.fmp-shields.shield-stripes
  400. {
  401. filter: unset;
  402. }
  403.  
  404. #lastIntPostsTable .shieldname td.center.text, #lastNatPostsTable .shieldname td.center.text {
  405. width: 100%;
  406. padding: 0;
  407. padding-top: 3px !important;
  408. color: #555 !important;
  409. font-weight: bold;
  410. }
  411.  
  412. #lastIntPostsTable tr.hbrown, #lastNatPostsTable tr.hbrown
  413. {
  414. display: flex;
  415. width: 100%;
  416. flex-wrap: nowrap;
  417. justify-content: space-between;
  418. }
  419.  
  420. #lastIntPostsTable .hbrown>td.nopad, #lastNatPostsTable .hbrown>td.nopad
  421. {
  422. color: #333;
  423. display: flex;
  424. flex-direction: column;
  425. flex-wrap: nowrap;
  426. justify-content: space-between;
  427. width: 20%;
  428. }
  429.  
  430. #lastIntPostsTable .hbrown>td.nopad>div, #lastNatPostsTable .hbrown>td.nopad>div
  431. {
  432. display: block;
  433. }
  434.  
  435.  
  436. #lastIntPostsTable td.left.text, #lastNatPostsTable td.left.text
  437. {
  438. border-width: 0 0 1px 1px;
  439. padding: 4px 10px;
  440. border-color: #0001;
  441. width: 80%;
  442. }
  443.  
  444. /* Subject styling */
  445. #lastIntPostsTable td.left.text>span:first-child, #lastNatPostsTable td.left.text>span:first-child {
  446. color: #666 !important;
  447. font-weight: bold !important;
  448. }
  449.  
  450. #lastIntPostsTable td.left.text>span, #lastNatPostsTable td.left.text>span {
  451. color: #3A6D3E;
  452. }
  453.  
  454. /* Link styling in subject */
  455. #lastIntPostsTable td.left.text a, #lastNatPostsTable td.left.text a {
  456. color: #333;
  457. text-decoration: none;
  458. }
  459.  
  460. #lastIntPostsTable td.left.text a:hover, #lastNatPostsTable td.left.text a:hover {
  461. color: #4C8F50;
  462. }
  463.  
  464. /* Background color for specific row types */
  465. #lastIntPostsTable .hbrown, #lastNatPostsTable .hbrown {
  466. background-color: unset;
  467. }
  468.  
  469. #lastIntPostsTable .hbrown > td, #lastNatPostsTable .hbrown > td {
  470. padding: 8px 12px;
  471. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  472. background-color: #dfdbda70; /* Soft yellow for highlighted rows */
  473. }
  474.  
  475. .d-flex> .footer
  476. {
  477. background-color: #333;
  478. }
  479.  
  480. .d-flex> .footer >.stdtxt
  481. {
  482. color: #d4d4d4 !important;
  483. font-weight: bold;
  484. text-align: center;
  485. }
  486.  
  487. `);
  488.  
  489.  
  490.  
  491. (function() {
  492. 'use strict';
  493.  
  494. // Your code here...
  495. })();