API tools faq
paste
FireFern

jmocd v3.5?

FireFern
Aug 11th, 2021 (edited)
451
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 98.39 KB | None | 0 0
raw download clone embed print report
  1. /* ==UserStyle==
  2. @name JMOCD V3.5
  3. @namespace USO Archive
  4. @author FireFern
  5. @description `aaaaaaaaaa`
  6. @version 20210331.17.8
  7. @license CC-BY-4.0
  8. @preprocessor uso
  9.  
  10. @advanced dropdown mainbg-key "Main Background" {
  11. Mega-Ray-Dragon-Puls "Mega Ray Dragon Pulse*" <<<EOT https://i.imgur.com/ZEejdnm.jpg EOT;
  12. Beach "Beach" <<<EOT https://i.imgur.com/1bF5zif.jpeg EOT;
  13. Horseshoe-Bend "Horseshoe Bend" <<<EOT https://i.imgur.com/o73PEK7.jpg EOT;
  14. Lake "Lake" <<<EOT https://i.imgur.com/CcA95EU.jpeg EOT;
  15. City "City" <<<EOT https://i.imgur.com/2bMxypq.jpeg EOT;
  16. Aurora "Aurora" <<<EOT https://i.imgur.com/zzDjxdL.jpeg EOT;
  17. Aurora-2 "Aurora 2" <<<EOT https://i.imgur.com/jpygWhl.jpeg EOT;
  18. River "River" <<<EOT https://i.imgur.com/yGln8kl.jpeg EOT;
  19. Forest "Forest" <<<EOT https://i.imgur.com/uhKLeoc.jpeg EOT;
  20. Waterfall "Waterfall" <<<EOT https://i.imgur.com/sMiY5CV.jpeg EOT;
  21. mainbg-key-custom-dropdown "Custom" <<<EOT /*[[mainbg-key-custom]]*\/ EOT;
  22. mainbg-key-custom-dropdown2 "Custom 2" <<<EOT /*[[mainbg-key-custom2]]*\/ EOT;
  23. }
  24. @advanced text mainbg-key-custom "Main Background (Custom)" "https://example.com/image.png"
  25. @advanced text mainbg-key-custom2 "Main Background (Custom 2)" "https://example.com/image.png"
  26.  
  27. @advanced color main-key "Main Color" #FF0000
  28.  
  29. @advanced text main50a-key "Main Color 0.5" rgba(255, 0, 0, .5)
  30.  
  31. @advanced text main75a-key "Main Color 0.75" rgba(255, 0, 0, .75)
  32.  
  33. @advanced color misc-key "Miscellaneous Color" #0088FF
  34.  
  35. @advanced dropdown darkbg-key "Dark Mode Background 1" {
  36. 0-8 "0.8*" <<<EOT rgba(0, 0, 0, .8) EOT;
  37. 1 "1" <<<EOT rgba(0, 0, 0, 1) EOT;
  38. 0-9 "0.9" <<<EOT rgba(0, 0, 0, .9) EOT;
  39. 0-7 "0.7" <<<EOT rgba(0, 0, 0, .7) EOT;
  40. 0-6 "0.6" <<<EOT rgba(0, 0, 0, .6) EOT;
  41. 0-5 "0.5" <<<EOT rgba(0, 0, 0, .5) EOT;
  42. 0-4 "0.4" <<<EOT rgba(0, 0, 0, .4) EOT;
  43. 0-3 "0.3" <<<EOT rgba(0, 0, 0, .3) EOT;
  44. 0-2 "0.2" <<<EOT rgba(0, 0, 0, .2) EOT;
  45. 0-1 "0.1" <<<EOT rgba(0, 0, 0, .1) EOT;
  46. 0 "0" <<<EOT rgba(0, 0, 0, 0) EOT;
  47. Dark-Grid "Dark Grid" <<<EOT url(https://i.imgur.com/5catSRl.png) EOT;
  48. }
  49.  
  50. @advanced dropdown darkbg2-key "Dark Mode Background 2" {
  51. 0-8 "0.8*" <<<EOT rgba(0, 0, 0, .8) EOT;
  52. 1 "1" <<<EOT rgba(0, 0, 0, 1) EOT;
  53. 0-9 "0.9" <<<EOT rgba(0, 0, 0, .9) EOT;
  54. 0-7 "0.7" <<<EOT rgba(0, 0, 0, .7) EOT;
  55. 0-6 "0.6" <<<EOT rgba(0, 0, 0, .6) EOT;
  56. 0-5 "0.5" <<<EOT rgba(0, 0, 0, .5) EOT;
  57. 0-4 "0.4" <<<EOT rgba(0, 0, 0, .4) EOT;
  58. 0-3 "0.3" <<<EOT rgba(0, 0, 0, .3) EOT;
  59. 0-2 "0.2" <<<EOT rgba(0, 0, 0, .2) EOT;
  60. 0-1 "0.1" <<<EOT rgba(0, 0, 0, .1) EOT;
  61. 0 "0" <<<EOT rgba(0, 0, 0, 0) EOT;
  62. Dark-Grid "Dark Grid" <<<EOT url(https://i.imgur.com/5catSRl.png) EOT;
  63. }
  64.  
  65. @advanced color darkbg3-key "Dark Mode Background 3" #000000
  66.  
  67. @advanced color darktext-key "Dark Mode Text 1" #FFFFFF
  68.  
  69. @advanced color darktext2-key "Dark Mode Text 2" #A4A4A4
  70.  
  71. @advanced dropdown lightbg-key "Light Mode Background 1" {
  72. 0-8 "0.8*" <<<EOT rgba(247, 247, 250, .8) EOT;
  73. 1 "1" <<<EOT rgba(247, 247, 250, 1) EOT;
  74. 0-9 "0.9" <<<EOT rgba(247, 247, 250, .9) EOT;
  75. 0-7 "0.7" <<<EOT rgba(247, 247, 250, .7) EOT;
  76. 0-6 "0.6" <<<EOT rgba(247, 247, 250, .6) EOT;
  77. 0-5 "0.5" <<<EOT rgba(247, 247, 250, .5) EOT;
  78. 0-4 "0.4" <<<EOT rgba(247, 247, 250, .4) EOT;
  79. 0-3 "0.3" <<<EOT rgba(247, 247, 250, .3) EOT;
  80. 0-2 "0.2" <<<EOT rgba(247, 247, 250, .2) EOT;
  81. 0-1 "0.1" <<<EOT rgba(247, 247, 250, .1) EOT;
  82. 0 "0" <<<EOT rgba(247, 247, 250, 0) EOT;
  83. Light-Grid "Light Grid" <<<EOT url(https://i.imgur.com/Q8vHT0Y.png) EOT;
  84. }
  85.  
  86. @advanced dropdown lightbg2-key "Light Mode Background 2" {
  87. 0-8 "0.8*" <<<EOT rgba(247, 247, 250, .8) EOT;
  88. 1 "1" <<<EOT rgba(247, 247, 250, 1) EOT;
  89. 0-9 "0.9" <<<EOT rgba(247, 247, 250, .9) EOT;
  90. 0-7 "0.7" <<<EOT rgba(247, 247, 250, .7) EOT;
  91. 0-6 "0.6" <<<EOT rgba(247, 247, 250, .6) EOT;
  92. 0-5 "0.5" <<<EOT rgba(247, 247, 250, .5) EOT;
  93. 0-4 "0.4" <<<EOT rgba(247, 247, 250, .4) EOT;
  94. 0-3 "0.3" <<<EOT rgba(247, 247, 250, .3) EOT;
  95. 0-2 "0.2" <<<EOT rgba(247, 247, 250, .2) EOT;
  96. 0-1 "0.1" <<<EOT rgba(247, 247, 250, .1) EOT;
  97. 0 "0" <<<EOT rgba(247, 247, 250, 0) EOT;
  98. Light-Grid "Light Grid" <<<EOT url(https://i.imgur.com/Q8vHT0Y.png) EOT;
  99. }
  100.  
  101. @advanced color lightbg3-key "Light Mode Background 3" #F7F7FA
  102.  
  103. @advanced color lighttext-key "Light Mode Text 1" #000000
  104.  
  105. @advanced color lighttext2-key "Light Mode Text 2" #5b5b5b
  106.  
  107. @advanced dropdown backgroundblur-key "Background Blur" {
  108. Yes "Yes*" <<<EOT .ps-popup,
  109. #tooltipwrapper .tooltip,
  110. #tooltipwrapper.tooltip-locked .tooltip,
  111. .tournament-box,
  112. .userlist-minimized,
  113. .userlist-maximized {
  114. background: var(--lightbg2);
  115. backdrop-filter: blur(3px);
  116. -webkit-backdrop-filter: blur(3px)
  117. }
  118.  
  119. .dark .ps-popup,
  120. .dark #tooltipwrapper .tooltip,
  121. .dark .tournament-box,
  122. .dark .userlist-minimized,
  123. .dark .userlist-maximized {
  124. background: var(--darkbg2);
  125. }
  126.  
  127. .teambuilder-clipboard-data {
  128. backdrop-filter: blur(3px);
  129. -webkit-backdrop-filter: blur(3px)
  130. } EOT;
  131. No "No" <<<EOT .ps-popup,
  132. #tooltipwrapper .tooltip,
  133. #tooltipwrapper.tooltip-locked .tooltip,
  134. .tournament-box,
  135. .userlist-minimized,
  136. .userlist-maximized {
  137. background: var(--lightbg3);
  138. }
  139.  
  140. .dark .ps-popup,
  141. .dark #tooltipwrapper .tooltip,
  142. .dark .tournament-box,
  143. .dark .userlist-minimized,
  144. .dark .userlist-maximized {
  145. background: var(--darkbg3);
  146. } EOT;
  147. }
  148.  
  149. @advanced dropdown pokeshadow-key "Pokemon Sprite Drop Shadow" {
  150. Yes "Yes*" <<<EOT .pixelated, .itemicon, .picon, .trainersprite, .battle img {
  151. filter: drop-shadow(0 2px 1px var(--shading))
  152. } EOT;
  153. No "No" <<<EOT EOT;
  154. }
  155.  
  156. @advanced dropdown nameicon-key "Name Icon" {
  157. Shiny-Mega-Rayquaza "Shiny Mega Rayquaza*" <<<EOT http://play.pokemonshowdown.com/sprites/gen5-shiny/rayquaza-mega.png EOT;
  158.  
  159. nameicon-key-custom-dropdown "Custom" <<<EOT /*[[nameicon-key-custom]]*\/ EOT;
  160. }
  161. @advanced text nameicon-key-custom "Name Icon (Custom)" "https://example.com/image.png"
  162.  
  163. @advanced text nameicon-width-key "Name Icon Width" 48px
  164.  
  165. @advanced text nameicon-height-key "Name Icon Height" 48px
  166.  
  167. @advanced dropdown nameicon-sat-key "Name Icon Extra Saturation" {
  168. Yes "Yes*" <<<EOT filter: saturate(2) EOT;
  169. No "No" <<<EOT EOT;
  170. }
  171.  
  172. @advanced dropdown logo-key "Logo" {
  173. Styled "Styled*" <<<EOT .header .logo {
  174. visibility: hidden
  175. }
  176.  
  177. .header::after {
  178. content: url('https://i.imgur.com/KuRjJEq.png');
  179. position: relative;
  180. top: -2px;
  181. left: -125px;
  182. } EOT;
  183. Original "Original" <<<EOT EOT;
  184. }
  185.  
  186. @advanced text font-key "Font Family" Verdana
  187.  
  188. @advanced dropdown turn-key "Turn Marker Style" {
  189. style-1 "Style 1*" <<<EOT .turn {
  190. width: 90px;
  191. height: 50px;
  192. background: linear-gradient(var(--main-75a), var(--main));
  193. clip-path: polygon(10px 0, 80px 0, 90px 10px, 90px 40px, 80px 50px, 10px 50px, 0 40px, 0 10px);
  194. padding: 0;
  195. color: var(--white);
  196. font-size: 9pt;
  197. font-weight: bold;
  198. text-align: center;
  199. opacity: 1 !important;
  200. border: none
  201. }
  202.  
  203. .turn::before {
  204. content: "VS";
  205. display: block;
  206. font-size: 19pt;
  207. } EOT;
  208. style-2 "Style 2" <<<EOT .turn {
  209. background: url(https://i.imgur.com/fqnbmF6.png);
  210. background-size: cover;
  211. width: 71px;
  212. height: 20px;
  213. padding-top: 24px;
  214. color: var(--white);
  215. font-size: 10pt;
  216. text-align: center;
  217. border: none;
  218. border-radius: 0;
  219. opacity: 1 !important
  220. } EOT;
  221. stlye-3 "Style 3" <<<EOT .turn {
  222. border-color: var(--main);
  223. border-radius: 0;
  224. background: var(--main-75a);
  225. color: var(--white);
  226. text-shadow: 1px 1px var(--black), 1px -1px var(--black), -1px 1px var(--black), -1px -1px var(--black), -1px 2px var(--black), 1px 2px var(--black);
  227. transform: skewX(-15deg);
  228. font-size: 14pt;
  229. opacity: 1 !important
  230. } EOT;
  231. none "None" <<<EOT EOT;
  232. }
  233.  
  234. @advanced dropdown movebtn-key "Move Button Style" {
  235. style-1 "Style 1*" <<<EOT .movemenu button {
  236. text-shadow: 0 1px 2px var(--shading);
  237. box-shadow: 0 0 3px currentcolor;
  238. }
  239.  
  240. .movemenu button:hover,
  241. .movemenu button:focus-visible {
  242. transform: translateY(1px);
  243. outline: none;
  244. }
  245.  
  246. .movemenu button small.type,
  247. .movemenu button small.pp {
  248. color: var(--white)
  249. }
  250.  
  251. .dark .movemenu button small.type,
  252. .dark .movemenu button small.pp {
  253. color: var(--black)
  254. }
  255.  
  256. .movemenu button.type-Normal,
  257. .movemenu button.type-Normal:hover,
  258. .movemenu button.type-Normal:active,
  259. .movemenu button.type-Normal.pressed {
  260. color: #bdbda8;
  261. border-color: currentcolor;
  262. background: linear-gradient(transparent, currentcolor);
  263. }
  264.  
  265. .movemenu button.type-Fire,
  266. .movemenu button.type-Fire:hover,
  267. .movemenu button.type-Fire:active,
  268. .movemenu button.type-Fire.pressed {
  269. color: #ff3700;
  270. border-color: currentcolor;
  271. background: linear-gradient(transparent, currentcolor);
  272. }
  273.  
  274. .movemenu button.type-Water,
  275. .movemenu button.type-Water:hover,
  276. .movemenu button.type-Water:active,
  277. .movemenu button.type-Water.pressed {
  278. color: #004cff;
  279. border-color: currentcolor;
  280. background: linear-gradient(transparent, currentcolor);
  281. }
  282.  
  283. .movemenu button.type-Electric,
  284. .movemenu button.type-Electric:hover,
  285. .movemenu button.type-Electric:active,
  286. .movemenu button.type-Electric.pressed {
  287. color: #dfb300;
  288. border-color: currentcolor;
  289. background: linear-gradient(transparent, currentcolor);
  290. }
  291.  
  292. .movemenu button.type-Grass,
  293. .movemenu button.type-Grass:hover,
  294. .movemenu button.type-Grass:active,
  295. .movemenu button.type-Grass.pressed {
  296. color: #009500;
  297. border-color: currentcolor;
  298. background: linear-gradient(transparent, currentcolor);
  299. }
  300.  
  301. .movemenu button.type-Ice,
  302. .movemenu button.type-Ice:hover,
  303. .movemenu button.type-Ice:active,
  304. .movemenu button.type-Ice.pressed {
  305. color: #0ff;
  306. border-color: currentcolor;
  307. background: linear-gradient(transparent, currentcolor);
  308. }
  309.  
  310. .movemenu button.type-Fighting,
  311. .movemenu button.type-Fighting:hover,
  312. .movemenu button.type-Fighting:active,
  313. .movemenu button.type-Fighting.pressed {
  314. color: #c14014;
  315. border-color: currentcolor;
  316. background: linear-gradient(transparent, currentcolor);
  317. }
  318.  
  319. .movemenu button.type-Poison,
  320. .movemenu button.type-Poison:hover,
  321. .movemenu button.type-Poison:active,
  322. .movemenu button.type-Poison.pressed {
  323. color: #c0c;
  324. border-color: currentcolor;
  325. background: linear-gradient(transparent, currentcolor);
  326. }
  327.  
  328. .movemenu button.type-Ground,
  329. .movemenu button.type-Ground:hover,
  330. .movemenu button.type-Ground:active,
  331. .movemenu button.type-Ground.pressed {
  332. color: #ca800f;
  333. border-color: currentcolor;
  334. background: linear-gradient(transparent, currentcolor);
  335. }
  336.  
  337. .movemenu button.type-Flying,
  338. .movemenu button.type-Flying:hover,
  339. .movemenu button.type-Flying:active,
  340. .movemenu button.type-Flying.pressed {
  341. color: #7f54ff;
  342. border-color: currentcolor;
  343. background: linear-gradient(transparent, currentcolor);
  344. }
  345.  
  346. .movemenu button.type-Psychic,
  347. .movemenu button.type-Psychic:hover,
  348. .movemenu button.type-Psychic:active,
  349. .movemenu button.type-Psychic.pressed {
  350. color: #ff40b2;
  351. border-color: currentcolor;
  352. background: linear-gradient(transparent, currentcolor);
  353. }
  354.  
  355. .movemenu button.type-Bug,
  356. .movemenu button.type-Bug:hover,
  357. .movemenu button.type-Bug:active,
  358. .movemenu button.type-Bug.pressed {
  359. color: #909f0b;
  360. border-color: currentcolor;
  361. background: linear-gradient(transparent, currentcolor);
  362. }
  363.  
  364. .movemenu button.type-Rock,
  365. .movemenu button.type-Rock:hover,
  366. .movemenu button.type-Rock:active,
  367. .movemenu button.type-Rock.pressed {
  368. color: #8f7e32;
  369. border-color: currentcolor;
  370. background: linear-gradient(transparent, currentcolor);
  371. }
  372.  
  373. .movemenu button.type-Ghost,
  374. .movemenu button.type-Ghost:hover,
  375. .movemenu button.type-Ghost:active,
  376. .movemenu button.type-Ghost.pressed {
  377. color: #711fff;
  378. border-color: currentcolor;
  379. background: linear-gradient(transparent, currentcolor);
  380. }
  381.  
  382. .movemenu button.type-Dragon,
  383. .movemenu button.type-Dragon:hover,
  384. .movemenu button.type-Dragon:active,
  385. .movemenu button.type-Dragon.pressed {
  386. color: #4800ff;
  387. border-color: currentcolor;
  388. background: linear-gradient(transparent, currentcolor);
  389. }
  390.  
  391. .movemenu button.type-Dark,
  392. .movemenu button.type-Dark:hover,
  393. .movemenu button.type-Dark:active,
  394. .movemenu button.type-Dark.pressed {
  395. color: #4d4d4d;
  396. border-color: currentcolor;
  397. background: linear-gradient(transparent, currentcolor);
  398. }
  399.  
  400. .movemenu button.type-Steel,
  401. .movemenu button.type-Steel:hover,
  402. .movemenu button.type-Steel:active,
  403. .movemenu button.type-Steel.pressed {
  404. color: #747486;
  405. border-color: currentcolor;
  406. background: linear-gradient(transparent, currentcolor);
  407. }
  408.  
  409. .movemenu button.type-Fairy,
  410. .movemenu button.type-Fairy:hover,
  411. .movemenu button.type-Fairy:active,
  412. .movemenu button.type-Fairy.pressed {
  413. color: #ff6680;
  414. border-color: currentcolor;
  415. background: linear-gradient(transparent, currentcolor);
  416. }
  417.  
  418. .movemenu button:disabled {
  419. color: #fff !important;
  420. border-color: grey !important;
  421. background: #575757 !important;
  422. box-shadow: 0 0 3px #575757 !important;
  423. opacity: 0.5;
  424. transform: none
  425. }
  426.  
  427. .movemenu button:disabled small.type,
  428. .movemenu button:disabled small.pp {
  429. color: inherit
  430. } EOT;
  431. style-2 "Style 2" <<<EOT .movemenu button {
  432. text-shadow: none;
  433. box-shadow: none;
  434. border-width: 2px;
  435. transition: box-shadow 0.15s, text-shadow 0.15s
  436. }
  437.  
  438. .movemenu button:hover,
  439. .movemenu button:focus-visible {
  440. box-shadow: 0 0 7px currentcolor;
  441. text-shadow: 0 0 3px currentcolor;
  442. outline: none
  443. }
  444.  
  445. .movemenu button small.type,
  446. .movemenu button small.pp {
  447. color: inherit
  448. }
  449.  
  450. .movemenu button.type-Normal,
  451. .movemenu button.type-Normal:hover,
  452. .movemenu button.type-Normal:active,
  453. .movemenu button.type-Normal.pressed {
  454. color: #9c9c7c;
  455. border-color: currentcolor;
  456. background: transparent;
  457. }
  458.  
  459. .dark .movemenu button.type-Normal,
  460. .dark .movemenu button.type-Normal:hover,
  461. .dark .movemenu button.type-Normal:active,
  462. .dark .movemenu button.type-Normal.pressed {
  463. color: #bdbda8;
  464. }
  465.  
  466. .movemenu button.type-Fire,
  467. .movemenu button.type-Fire:hover,
  468. .movemenu button.type-Fire:active,
  469. .movemenu button.type-Fire.pressed {
  470. color: #ff3700;
  471. border-color: currentcolor;
  472. background: transparent;
  473. }
  474.  
  475. .movemenu button.type-Water,
  476. .movemenu button.type-Water:hover,
  477. .movemenu button.type-Water:active,
  478. .movemenu button.type-Water.pressed {
  479. color: #004cff;
  480. border-color: currentcolor;
  481. background: transparent;
  482. }
  483.  
  484. .movemenu button.type-Electric,
  485. .movemenu button.type-Electric:hover,
  486. .movemenu button.type-Electric:active,
  487. .movemenu button.type-Electric.pressed {
  488. color: #dfb300;
  489. border-color: currentcolor;
  490. background: transparent;
  491. }
  492.  
  493. .movemenu button.type-Grass,
  494. .movemenu button.type-Grass:hover,
  495. .movemenu button.type-Grass:active,
  496. .movemenu button.type-Grass.pressed {
  497. color: #009500;
  498. border-color: currentcolor;
  499. background: transparent;
  500. }
  501.  
  502. .movemenu button.type-Ice,
  503. .movemenu button.type-Ice:hover,
  504. .movemenu button.type-Ice:active,
  505. .movemenu button.type-Ice.pressed {
  506. color: #00b7b7;
  507. border-color: currentcolor;
  508. background: transparent;
  509. }
  510.  
  511. .dark .movemenu button.type-Ice,
  512. .dark .movemenu button.type-Ice:hover,
  513. .dark .movemenu button.type-Ice:active,
  514. .dark .movemenu button.type-Ice.pressed {
  515. color: #0ff;
  516. }
  517.  
  518. .movemenu button.type-Fighting,
  519. .movemenu button.type-Fighting:hover,
  520. .movemenu button.type-Fighting:active,
  521. .movemenu button.type-Fighting.pressed {
  522. color: #c14014;
  523. border-color: currentcolor;
  524. background: transparent;
  525. }
  526.  
  527. .movemenu button.type-Poison,
  528. .movemenu button.type-Poison:hover,
  529. .movemenu button.type-Poison:active,
  530. .movemenu button.type-Poison.pressed {
  531. color: #c0c;
  532. border-color: currentcolor;
  533. background: transparent;
  534. }
  535.  
  536. .movemenu button.type-Ground,
  537. .movemenu button.type-Ground:hover,
  538. .movemenu button.type-Ground:active,
  539. .movemenu button.type-Ground.pressed {
  540. color: #ca800f;
  541. border-color: currentcolor;
  542. background: transparent;
  543. }
  544.  
  545. .movemenu button.type-Flying,
  546. .movemenu button.type-Flying:hover,
  547. .movemenu button.type-Flying:active,
  548. .movemenu button.type-Flying.pressed {
  549. color: #7f54ff;
  550. border-color: currentcolor;
  551. background: transparent;
  552. }
  553.  
  554. .movemenu button.type-Psychic,
  555. .movemenu button.type-Psychic:hover,
  556. .movemenu button.type-Psychic:active,
  557. .movemenu button.type-Psychic.pressed {
  558. color: #ff40b2;
  559. border-color: currentcolor;
  560. background: transparent;
  561. }
  562.  
  563. .movemenu button.type-Bug,
  564. .movemenu button.type-Bug:hover,
  565. .movemenu button.type-Bug:active,
  566. .movemenu button.type-Bug.pressed {
  567. color: #909f0b;
  568. border-color: currentcolor;
  569. background: transparent;
  570. }
  571.  
  572. .movemenu button.type-Rock,
  573. .movemenu button.type-Rock:hover,
  574. .movemenu button.type-Rock:active,
  575. .movemenu button.type-Rock.pressed {
  576. color: #8f7e32;
  577. border-color: currentcolor;
  578. background: transparent;
  579. }
  580.  
  581. .movemenu button.type-Ghost,
  582. .movemenu button.type-Ghost:hover,
  583. .movemenu button.type-Ghost:active,
  584. .movemenu button.type-Ghost.pressed {
  585. color: #711fff;
  586. border-color: currentcolor;
  587. background: transparent;
  588. }
  589.  
  590. .movemenu button.type-Dragon,
  591. .movemenu button.type-Dragon:hover,
  592. .movemenu button.type-Dragon:active,
  593. .movemenu button.type-Dragon.pressed {
  594. color: #4800ff;
  595. border-color: currentcolor;
  596. background: transparent;
  597. }
  598.  
  599. .movemenu button.type-Dark,
  600. .movemenu button.type-Dark:hover,
  601. .movemenu button.type-Dark:active,
  602. .movemenu button.type-Dark.pressed {
  603. color: #4d4d4d;
  604. border-color: currentcolor;
  605. background: transparent;
  606. }
  607.  
  608. .movemenu button.type-Steel,
  609. .movemenu button.type-Steel:hover,
  610. .movemenu button.type-Steel:active,
  611. .movemenu button.type-Steel.pressed {
  612. color: #747486;
  613. border-color: currentcolor;
  614. background: transparent;
  615. }
  616.  
  617. .movemenu button.type-Fairy,
  618. .movemenu button.type-Fairy:hover,
  619. .movemenu button.type-Fairy:active,
  620. .movemenu button.type-Fairy.pressed {
  621. color: #ff6680;
  622. border-color: currentcolor;
  623. background: transparent;
  624. }
  625.  
  626. .movemenu button:disabled {
  627. border: 2px solid #5b5b5b !important;
  628. background: #b3b3b3cc !important;
  629. color: #5b5b5b !important;
  630. text-shadow: none;
  631. opacity: 1
  632. }
  633.  
  634. .dark .movemenu button:disabled {
  635. border: 2px solid #5b5b5b !important;
  636. background: #151515cc !important;
  637. color: #5b5b5b !important;
  638. text-shadow: none
  639. } EOT;
  640. Original "Original" <<<EOT EOT;
  641. }
  642.  
  643. @advanced dropdown trainer-pos-key "Trainer Position" {
  644. Top-And-Side "Top And Side*" <<<EOT .turn {
  645. margin: -50px 0 0 165px
  646. }
  647.  
  648. .weather em {
  649. margin: 60px 0 0 115px
  650. }
  651.  
  652. .leftbar {
  653. width: 320px;
  654. height: 100px;
  655. top: -50px;
  656. }
  657.  
  658. .rightbar {
  659. width: 320px;
  660. height: 100px;
  661. top: -50px;
  662. }
  663.  
  664. .leftbar .trainer {
  665. top: 30px;
  666. right: 192px
  667. }
  668.  
  669. .rightbar .trainer {
  670. top: 30px;
  671. left: 192px
  672. }
  673.  
  674. .trainer div.teamicons {
  675. margin: 0 auto
  676. }
  677.  
  678. .leftbar .teamicons {
  679. position: relative;
  680. left: 120px;
  681. bottom: 120px
  682. }
  683.  
  684. .rightbar .teamicons {
  685. position: relative;
  686. right: 120px;
  687. bottom: 120px
  688. }
  689.  
  690. .rightbar .trainersprite::before {
  691. bottom: 40px
  692. }
  693.  
  694. .leftbar .trainer:nth-of-type(2), .rightbar .trainer-far2 {
  695. top: 150px
  696. }
  697.  
  698. .leftbar .trainer:nth-of-type(2) .teamicons, .rightbar .trainer-far2 .teamicons {
  699. bottom: 0;
  700. left: 0;
  701. right: 0
  702. } EOT;
  703. Normal "Normal" <<<EOT .trainer-near2, .trainer-far2 + .trainer-far {
  704. margin-bottom: 30px
  705. }
  706.  
  707. .turn {
  708. margin: -50px 0 0 0
  709. }
  710.  
  711. .weather em {
  712. margin: -7px 0 0 230px
  713. }
  714.  
  715. .rightbar .trainersprite::before {
  716. bottom: 45px
  717. } EOT;
  718. }
  719.  
  720. @advanced dropdown battlebg-key "Battle Background" {
  721. SPL-RED "SPL-Red*" <<<EOT http://play.pokemonshowdown.com/fx/bg-spl.png EOT;
  722. SPL-BLUE "SPL-Blue" <<<EOT https://i.imgur.com/MQ2FmEW.jpg EOT;
  723. SPL-GREEN "SPL-Green" <<<EOT https://i.imgur.com/ORz9MPo.jpg EOT;
  724. SPL-YELLOW "SPL-Yellow" <<<EOT https://i.imgur.com/69IU3au.jpg EOT;
  725. SPL-ORANGE "SPL-Orange" <<<EOT https://i.imgur.com/VWKs8qw.jpg EOT;
  726. SPL-PURPLE "SPL-Purple" <<<EOT https://i.imgur.com/C1XeD2V.jpg EOT;
  727. Swsh-Gym "Swsh Gym" <<<EOT https://pkmn.pro/resources/bgs/swsh2/rotate.php EOT;
  728. Other-Swsh-BGs "Other Swsh BGs" <<<EOT https://pkmn.pro/resources/bgs/swsh/rotate.php EOT;
  729. Palais-Lane "Palais Lane" <<<EOT https://i.imgur.com/VQZQbew.png EOT;
  730. Grey-Grid "Grey Grid" <<<EOT https://i.imgur.com/I7XCxQ8.jpg EOT;
  731.  
  732. battlebg-key-custom-dropdown "Custom" <<<EOT /*[[battlebg-key-custom]]*\/ EOT;
  733. }
  734. @advanced text battlebg-key-custom "Battle Background (Custom)" "https://example.com/image.png"
  735.  
  736. @advanced text battlebg-width-key "Battle Background Width" 700px
  737.  
  738. @advanced text battlebg-height-key "Battle Background Height" 500px
  739.  
  740. @advanced text battlebg-margintop-key "Battle Background Top Margin" 0px
  741.  
  742. @advanced text battlebg-marginleft-key "Battle Background Left Margin" 0px
  743.  
  744. @advanced dropdown message-bar-key "Battle Message Bar" {
  745. style-1 "Style 1*" <<<EOT .messagebar {
  746. background: var(--main-75a);
  747. box-shadow: 0 2px 5px var(--shading);
  748. color: var(--white)
  749. } EOT;
  750. style-2 "Style 2" <<<EOT .messagebar {
  751. background: var(--main-75a);
  752. box-shadow: 0 0 5px var(--shading);
  753. color: var(--white);
  754. border-radius: 6px 6px 0 0;
  755. bottom: 0;
  756. text-align: center
  757. } EOT;
  758. style-3 "Style 3" <<<EOT .messagebar {
  759. background: rgba(0, 0, 0, 0.8);
  760. color: var(--white)
  761. } EOT;
  762. }
  763.  
  764. ==/UserStyle== */
  765. @-moz-document domain("play.pokemonshowdown.com"), domain("psim.us") {
  766.  
  767. :root {
  768. --main: /*[[main-key]]*/;
  769. --main-50a: /*[[main50a-key]]*/;
  770. --main-75a: /*[[main75a-key]]*/;
  771. --misc: /*[[misc-key]]*/;
  772. --link: rgba(0, 85, 255);
  773. --link-visited: #c0c;
  774. --link-15a: rgba(0, 85, 255, .15);
  775. --link-30a: rgba(0, 85, 255, .3);
  776. --darkbg: /*[[darkbg-key]]*/; /*https://i.imgur.com/5catSRl.png*/
  777. --darkbg2: /*[[darkbg2-key]]*/;
  778. --darkbg3: /*[[darkbg3-key]]*/;
  779. --darktext: /*[[darktext-key]]*/;
  780. --darktext2: /*[[darktext2-key]]*/;
  781. --lightbg: /*[[lightbg-key]]*/; /*https://i.imgur.com/Q8vHT0Y.png*/
  782. --lightbg2: /*[[lightbg2-key]]*/;
  783. --lightbg3: /*[[lightbg3-key]]*/;
  784. --lighttext: /*[[lighttext-key]]*/;
  785. --lighttext2: /*[[lighttext2-key]]*/;
  786. --highlight: rgba(255, 255, 255, .5);
  787. --shading: rgba(0, 0, 0, .5);
  788. --grey: rgb(128, 128, 128);
  789. --grey-15a: rgba(128, 128, 128, .15);
  790. --grey-30a: rgba(128, 128, 128, .3);
  791. --grey-45a: rgba(128, 128, 128, .45);
  792. --notif-light: hsl(36, 100%, 43%);
  793. --notif-light-80a: hsla(36, 100%, 56%, .8);
  794. --notif-light-30a: hsla(36, 100%, 43%, .3);
  795. --notif-dark: hsl(174, 72%, 50%);
  796. --notif-dark-80a: hsla(174, 100%, 20%, .8);
  797. --notif-dark-30a: hsla(174, 72%, 50%, .3);
  798. --revealed-text: rgba(0, 204, 133, .25);
  799. --blue: #1e70c1;
  800. --green: #090;
  801. --red: #cc1f1f;
  802. --light-blue: #4fa0f0;
  803. --black: #000;
  804. --white: #fff
  805. }
  806.  
  807. /***********************************************\
  808. -------------------------------------------------
  809. -MAIN BACKGROUND-
  810. -------------------------------------------------
  811. \***********************************************/
  812.  
  813. body {
  814. background: url("/*[[mainbg-key]]*/") !important;
  815. background-size: cover !important
  816. }
  817.  
  818. /***********************************************\
  819. -------------------------------------------------
  820. -MISCELLANEOUS STUFF-
  821. -------------------------------------------------
  822. \***********************************************/
  823.  
  824. /********************\
  825. -Font-
  826. \********************/
  827.  
  828. body,
  829. .battle-log,
  830. .userlist li,
  831. .userlist li button,
  832. button,
  833. .button,
  834. .folder .selectFolder,
  835. .setmenu button,
  836. .teamlist button,
  837. .chatbox textarea,
  838. .battle,
  839. .message-log h2,
  840. .teambar button,
  841. .utilichart .sortcol,
  842. .battle-log-add,
  843. select,
  844. .checkbox,
  845. .popupmenu button,
  846. .select,
  847. .team {
  848. font-family: /*[[font-key]]*/
  849. }
  850.  
  851. .textbox {
  852. font-family: verdana, helvetica, arial, sans-serif
  853. }
  854.  
  855. .trainer strong,
  856. .rightbar .trainersprite::before,
  857. .turn,
  858. .statbar .hpbar .hptext {
  859. font-family: verdana, sans-serif
  860. }
  861.  
  862. /********************\
  863. -Highlight-
  864. \********************/
  865. /*like when you drag your cursor over text to select it*/
  866.  
  867. ::selection {
  868. background: var(--main-75a);
  869. color: var(--white);
  870. text-shadow: none
  871. }
  872.  
  873. /********************\
  874. -Separating Borders-
  875. \********************/
  876.  
  877. hr {
  878. border: none;
  879. height: 1px;
  880. background-image: linear-gradient(90deg, transparent, var(--main) 25% 75%, transparent)
  881. }
  882.  
  883. /********************\
  884. -Dark Overlay-
  885. \********************/
  886. /*like when you get a popup or something that makes the rest of the screen darker*/
  887.  
  888. .ps-overlay {
  889. background: #0003;
  890. animation: fade-in 0.1s
  891. }
  892.  
  893. .dark .ps-overlay {
  894. background: #0006
  895. }
  896.  
  897. /*animation*/
  898.  
  899. @keyframes fade-in {
  900. 0%{opacity: 0}
  901. 100%{opacity: 1}
  902. }
  903.  
  904. /********************\
  905. -Sliders-
  906. \********************/
  907. /*for volume and ev stuff*/
  908.  
  909. /*track*/
  910.  
  911. input[type=range]::-webkit-slider-runnable-track {
  912. background: var(--lightbg3);
  913. box-shadow: none;
  914. border-color: var(--main-75a);
  915. }
  916.  
  917. input[type=range]:hover::-webkit-slider-runnable-track {
  918. background: var(--lightbg3);
  919. border-color: var(--main);
  920. }
  921.  
  922. .dark input[type=range]::-webkit-slider-runnable-track {
  923. background: var(--darkbg3);
  924. box-shadow: none;
  925. }
  926.  
  927. .dark input[type=range]:hover::-webkit-slider-runnable-track {
  928. background: var(--darkbg3);
  929. }
  930.  
  931. /*thumb*/
  932.  
  933. input[type=range]::-webkit-slider-thumb {
  934. background: var(--lightbg3);
  935. border-color: var(--main-75a);
  936. box-shadow: none;
  937. transition: box-shadow 0.5s
  938. }
  939.  
  940. input[type=range]:hover::-webkit-slider-thumb {
  941. background: var(--lightbg3);
  942. border-color: var(--main);
  943. }
  944.  
  945. input[type=range]:focus::-webkit-slider-thumb {
  946. border-color: var(--main-75a);
  947. box-shadow: none
  948. }
  949.  
  950. input[type=range]:active::-webkit-slider-thumb {
  951. box-shadow: 0 0 0 3px var(--main-50a);
  952. transition: box-shadow 0.15s
  953. }
  954.  
  955. .dark input[type=range]::-webkit-slider-thumb {
  956. background: var(--darkbg3);
  957. box-shadow: none
  958. }
  959.  
  960. .dark input[type=range]:active::-webkit-slider-thumb {
  961. box-shadow: 0 0 0 3px var(--main-50a);
  962. transition: box-shadow 0.15s
  963. }
  964.  
  965. /********************\
  966. -Drop Down Menus-
  967. \********************/
  968.  
  969. select {
  970. background: var(--lightbg3);
  971. border: 1px solid var(--main);
  972. border-radius: 3px;
  973. color: var(--lighttext);
  974. box-shadow: 0 0 3px var(--main);
  975. transition: box-shadow 0.15s
  976. }
  977.  
  978. .dark select {
  979. background: var(--darkbg3);
  980. color: var(--darktext);
  981. }
  982.  
  983. select:hover,
  984. select:focus {
  985. outline: none;
  986. box-shadow: 0 0 3px 1px var(--main)
  987. }
  988.  
  989. /********************\
  990. -Textboxes-
  991. \********************/
  992.  
  993. /*light mode*/
  994.  
  995. .textbox {
  996. background: var(--lightbg3);
  997. box-shadow: inset 0 1px 3px var(--shading);
  998. border-color: var(--grey);
  999. color: var(--lighttext)
  1000. }
  1001.  
  1002. .textbox:hover {
  1003. background: var(--lightbg3);
  1004. border-color: var(--black);
  1005. box-shadow: inset 0 1px 3px var(--shading);
  1006. }
  1007.  
  1008. .textbox:focus {
  1009. background: var(--lightbg3);
  1010. border-color: var(--black);
  1011. box-shadow: inset 0 1px 3px -0.2px var(--shading), 0 0 4px var(--misc), 0 0 4px var(--misc);
  1012. }
  1013.  
  1014. /*dark mode*/
  1015.  
  1016. .dark .textbox {
  1017. background: var(--darkbg3);
  1018. border-color: var(--main);
  1019. color: var(--darktext);
  1020. }
  1021.  
  1022. .dark .textbox:hover,
  1023. .dark .textbox:focus {
  1024. background: var(--darkbg3);
  1025. border-color: var(--main);
  1026. box-shadow: 0 0 4px var(--main), 0 0 4px var(--main)
  1027. }
  1028.  
  1029. /*this is to prevent the textboxes in chatrooms from changing size*/
  1030.  
  1031. .chatbox textarea {
  1032. height: 15px
  1033. }
  1034.  
  1035. /*placeholder text (the grey text in textboxes that appear without you typing it)*/
  1036.  
  1037. ::placeholder {
  1038. color: var(--lighttext2)
  1039. }
  1040.  
  1041. .dark ::placeholder {
  1042. color: var(--darktext2)
  1043. }
  1044.  
  1045. /********************\
  1046. -Background Blurs-
  1047. \********************/
  1048. /*in popups, tooltips, and tournament boxes (only appear in this style, not in showdown normally)*/
  1049.  
  1050. /*[[backgroundblur-key]]*/
  1051.  
  1052. /********************\
  1053. -Pokemon Sprite Drop Shadows-
  1054. \********************/
  1055.  
  1056. /*[[pokeshadow-key]]*/
  1057.  
  1058. /***********************************************\
  1059. -------------------------------------------------
  1060. -SCROLLBARS-
  1061. -------------------------------------------------
  1062. \***********************************************/
  1063.  
  1064. /********************\
  1065. -Size-
  1066. \********************/
  1067.  
  1068. ::-webkit-scrollbar {
  1069. width: 10px;
  1070. height: 10px;
  1071. }
  1072.  
  1073. /********************\
  1074. -Track-
  1075. \********************/
  1076.  
  1077. /*vertical*/
  1078.  
  1079. ::-webkit-scrollbar-track:vertical {
  1080. box-shadow: inset 0 0 0 4px var(--grey-30a);
  1081. border-radius: 8px 0 0 8px;
  1082. border-right: 2px solid transparent
  1083. }
  1084.  
  1085. /*horizontal*/
  1086.  
  1087. ::-webkit-scrollbar-track:horizontal {
  1088. box-shadow: inset 0 0 0 4px var(--grey-30a);
  1089. border-radius: 8px 8px 0 0;
  1090. border-bottom: 2px solid transparent
  1091. }
  1092.  
  1093. /*hover*/
  1094.  
  1095. ::-webkit-scrollbar-track:hover {
  1096. box-shadow: inset 0 0 0 4px var(--grey-45a);
  1097. }
  1098.  
  1099. /********************\
  1100. -Thumb-
  1101. \********************/
  1102.  
  1103. /*vertical*/
  1104.  
  1105. ::-webkit-scrollbar-thumb:vertical {
  1106. box-shadow: inset 0 0 0 4px var(--main-75a);
  1107. border-radius: 8px 0 0 8px;
  1108. border-right: 2px solid transparent
  1109. }
  1110.  
  1111. /*horizontal*/
  1112.  
  1113. ::-webkit-scrollbar-thumb:horizontal {
  1114. box-shadow: inset 0 0 0 4px var(--main-75a);
  1115. border-radius: 8px 8px 0 0;
  1116. border-bottom: 2px solid transparent
  1117. }
  1118.  
  1119. /*hover state*/
  1120.  
  1121. ::-webkit-scrollbar-thumb:hover {
  1122. box-shadow: inset 0 0 0 4px var(--main)
  1123. }
  1124.  
  1125. /********************\
  1126. -Corner-
  1127. \********************/
  1128.  
  1129. ::-webkit-scrollbar-corner {
  1130. background-color: var(--main);
  1131. }
  1132.  
  1133. /***********************************************\
  1134. -------------------------------------------------
  1135. -MAIN MENU-
  1136. -------------------------------------------------
  1137. \***********************************************/
  1138.  
  1139. /********************\
  1140. -Background-
  1141. \********************/
  1142.  
  1143. .menugroup {
  1144. background: var(--lightbg2);
  1145. color: var(--lighttext);
  1146. text-shadow: none;
  1147. box-shadow: 0 2px 5px var(--shading)
  1148. }
  1149.  
  1150. .dark .menugroup {
  1151. background: var(--darkbg2);
  1152. color: var(--darktext)
  1153. }
  1154.  
  1155. /********************\
  1156. -Menu Buttons-
  1157. \********************/
  1158.  
  1159. /*light mode*/
  1160.  
  1161. body .button.mainmenu1,
  1162. body .button.mainmenu2,
  1163. body .button.mainmenu3,
  1164. body .button.mainmenu4,
  1165. body .button.mainmenu5 {
  1166. background: transparent;
  1167. color: var(--lighttext);
  1168. text-shadow: none;
  1169. border-color: var(--main);
  1170. box-shadow: inset 0 0 3px var(--main);
  1171. transition: 0.3s;
  1172. transform: none
  1173. }
  1174.  
  1175. body .button.mainmenu1:hover,
  1176. body .button.mainmenu2:hover,
  1177. body .button.mainmenu3:hover,
  1178. body .button.mainmenu4:hover,
  1179. body .button.mainmenu5:hover,
  1180. body .button.mainmenu1:active,
  1181. body .button.mainmenu2:active,
  1182. body .button.mainmenu3:active,
  1183. body .button.mainmenu4:active,
  1184. body .button.mainmenu5:active,
  1185. body .button.mainmenu1:focus-visible,
  1186. body .button.mainmenu2:focus-visible,
  1187. body .button.mainmenu3:focus-visible,
  1188. body .button.mainmenu4:focus-visible,
  1189. body .button.mainmenu5:focus-visible {
  1190. background: var(--lightbg3);
  1191. border-color: var(--main);
  1192. box-shadow: inset 0 0 3px var(--main), 0 0 5px var(--main), 0 0 15px var(--main);
  1193. }
  1194.  
  1195. /*light mode disabled*/
  1196.  
  1197. .mainmenuwrapper .menugroup .button.disabled,
  1198. .mainmenuwrapper .menugroup .button.disabled:hover,
  1199. .mainmenuwrapper .menugroup .button.disabled:active {
  1200. background: var(--lightbg3);
  1201. color: var(--lighttext);
  1202. text-shadow: none;
  1203. border-color: var(--main);
  1204. box-shadow: inset 0 0 3px var(--main), 0 0 5px var(--main), 0 0 15px var(--main);
  1205. }
  1206.  
  1207. /*dark mode*/
  1208.  
  1209. .dark body .button.mainmenu1,
  1210. .dark body .button.mainmenu2,
  1211. .dark body .button.mainmenu3,
  1212. .dark body .button.mainmenu4,
  1213. .dark body .button.mainmenu5 {
  1214. color: var(--darktext);
  1215. background: transparent;
  1216. box-shadow: inset 0 0 3px var(--main);
  1217. border-color: var(--main);
  1218. }
  1219.  
  1220. .dark body .button.mainmenu1:hover,
  1221. .dark body .button.mainmenu2:hover,
  1222. .dark body .button.mainmenu3:hover,
  1223. .dark body .button.mainmenu4:hover,
  1224. .dark body .button.mainmenu5:hover,
  1225. .dark body .button.mainmenu1:active,
  1226. .dark body .button.mainmenu2:active,
  1227. .dark body .button.mainmenu3:active,
  1228. .dark body .button.mainmenu4:active,
  1229. .dark body .button.mainmenu5:active,
  1230. .dark body .button.mainmenu1:focus-visible,
  1231. .dark body .button.mainmenu2:focus-visible,
  1232. .dark body .button.mainmenu3:focus-visible,
  1233. .dark body .button.mainmenu4:focus-visible,
  1234. .dark body .button.mainmenu5:focus-visible {
  1235. background: var(--darkbg3);
  1236. box-shadow: inset 0 0 3px var(--main), 0 0 5px var(--main), 0 0 15px var(--main);
  1237. }
  1238.  
  1239. /*dark mode disabled*/
  1240.  
  1241. .dark .mainmenuwrapper .menugroup .button.disabled,
  1242. .dark .mainmenuwrapper .menugroup .button.disabled:hover,
  1243. .dark .mainmenuwrapper .menugroup .button.disabled:active {
  1244. background: var(--darkbg3);
  1245. color: var(--darktext);
  1246. }
  1247.  
  1248. /********************\
  1249. -Team And Format Selectors-
  1250. \********************/
  1251.  
  1252. /*light mode*/
  1253.  
  1254. .select {
  1255. background: linear-gradient(var(--main-50a), var(--main-75a));
  1256. box-shadow: none;
  1257. color: var(--lightbg3);
  1258. text-shadow: 0 2px 3px var(--shading);
  1259. border: none;
  1260. position: relative;
  1261. }
  1262.  
  1263. .select:hover,
  1264. .select:focus-visible {
  1265. background: linear-gradient(var(--main-75a), var(--main));
  1266. box-shadow: 0 0 15px var(--main-75a);
  1267. border-color: var(--main);
  1268. outline: none;
  1269. overflow: hidden
  1270. }
  1271.  
  1272. .select:active {
  1273. background: linear-gradient(var(--main), var(--main-75a));
  1274. box-shadow: 0 0 15px var(--main-75a);
  1275. border-color: var(--main);
  1276. }
  1277.  
  1278. /*light mode disabled*/
  1279.  
  1280. .select:disabled {
  1281. background: linear-gradient(var(--main-50a), var(--main-75a));
  1282. box-shadow: inset 0 2px 5px var(--shading);
  1283. color: var(--lightbg3);
  1284. border-color: var(--main);
  1285. opacity: 0.6;
  1286. transition: opacity 0.3s, box-shadow 0.3s
  1287. }
  1288.  
  1289. .teamselect:disabled strong,
  1290. .select:disabled::after,
  1291. .select.preselected,
  1292. .select:disabled.preselected {
  1293. color: var(--lightbg3);
  1294. }
  1295.  
  1296. .select:disabled::before {
  1297. display: none
  1298. }
  1299.  
  1300. /*light stripe*/
  1301.  
  1302. .select:hover::before,
  1303. .select:focus-visible::before {
  1304. content: "";
  1305. position: absolute;
  1306. top: 0%;
  1307. left: -20%;
  1308. width: 10%;
  1309. height: 100%;
  1310. background: var(--highlight);
  1311. transform: skewX(-20deg);
  1312. animation: before 0.5s;
  1313. filter: blur(10px)
  1314. }
  1315.  
  1316. @keyframes before {
  1317. from {left: -14%}
  1318. to {left: 110%}
  1319. }
  1320.  
  1321. /*dark mode*/
  1322.  
  1323. .dark .select {
  1324. background: linear-gradient(var(--main-50a), var(--main-75a));
  1325. box-shadow: none;
  1326. color: var(--darktext);
  1327. }
  1328.  
  1329. .dark .select:hover,
  1330. .dark .select:focus-visible {
  1331. background: linear-gradient(var(--main-75a), var(--main));
  1332. box-shadow: 0 0 15px var(--main-75a);
  1333. color: var(--darktext);
  1334. outline: 0
  1335. }
  1336.  
  1337. .dark .select:active {
  1338. background: linear-gradient(var(--main), var(--main-75a));
  1339. border-color: var(--darkbg3);
  1340. box-shadow: 0 0 15px var(--main-75a);
  1341. }
  1342.  
  1343. /*dark mode disabled*/
  1344.  
  1345. .dark .select:disabled {
  1346. background: linear-gradient(var(--main-50a), var(--main-75a));
  1347. box-shadow: inset 0 2px 5px var(--shading);
  1348. color: var(--darktext);
  1349. }
  1350.  
  1351. .dark .teamselect:disabled strong,
  1352. .dark .select:disabled:after {
  1353. color: var(--darktext);
  1354. }
  1355.  
  1356. /*arrows*/
  1357.  
  1358. .select::after {
  1359. color: var(--lightbg3)
  1360. }
  1361.  
  1362. .dark .select::after {
  1363. color: var(--darktext)
  1364. }
  1365.  
  1366. /********************\
  1367. -Spectator Toggle-
  1368. \********************/
  1369.  
  1370. .checkbox {
  1371. transition: background-color 0.2s;
  1372. color: var(--lighttext);
  1373. }
  1374.  
  1375. .dark .checkbox {
  1376. color: var(--darktext);
  1377. }
  1378.  
  1379. .checkbox abbr {
  1380. font-size: 14px;
  1381. text-decoration: underline;
  1382. font-weight: bold
  1383. }
  1384.  
  1385. input[type="checkbox"]:focus-visible {
  1386. outline: 2px solid var(--misc)
  1387. }
  1388.  
  1389. .menugroup .checkbox:hover {
  1390. color: var(--lighttext);
  1391. background: var(--main-75a);
  1392. }
  1393.  
  1394. .dark .menugroup .checkbox:hover {
  1395. color: var(--darktext);
  1396. background: var(--main-75a);
  1397. }
  1398.  
  1399. /********************\
  1400. -Bottom Links-
  1401. \********************/
  1402.  
  1403. .mainmenufooter {
  1404. color: var(--white);
  1405. text-shadow: 0 1px 3px var(--shading), 0 1px 3px var(--shading), 0 1px 3px var(--shading), 0 1px 3px var(--shading), 0 1px 3px var(--shading), 0 1px 3px var(--shading), 0 1px 3px var(--shading), 0 1px 3px var(--shading);
  1406. font-weight: bold
  1407. }
  1408.  
  1409. .mainmenufooter small a,
  1410. .mainmenufooter small a:hover,
  1411. .dark .mainmenufooter small a {
  1412. color: var(--main);
  1413. text-decoration: none
  1414. }
  1415.  
  1416. /***********************************************\
  1417. -------------------------------------------------
  1418. -PM BOX AND NEWS BOX-
  1419. -------------------------------------------------
  1420. \***********************************************/
  1421.  
  1422. /********************\
  1423. -Header-
  1424. \********************/
  1425.  
  1426. /*normal state*/
  1427.  
  1428. .pm-window h3 {
  1429. background: var(--lightbg2);
  1430. color: var(--lighttext2);
  1431. border-color: var(--main);
  1432. }
  1433.  
  1434. .pm-window h3:hover {
  1435. color: var(--lighttext)
  1436. }
  1437.  
  1438. .dark .pm-window h3 {
  1439. background: var(--darkbg2);
  1440. color: var(--darktext2);
  1441. }
  1442.  
  1443. .dark .pm-window h3:hover {
  1444. color: var(--darktext)
  1445. }
  1446.  
  1447. /*focused state*/
  1448.  
  1449. .pm-window.focused h3,
  1450. .pm-window.focused h3:hover {
  1451. background: var(--lightbg3);
  1452. color: var(--lighttext);
  1453. border-color: var(--main)
  1454. }
  1455.  
  1456. .dark .pm-window.focused h3,
  1457. .dark .pm-window.focused h3:hover {
  1458. background: var(--darkbg3);
  1459. color: var(--darktext);
  1460. border-color: var(--main)
  1461. }
  1462.  
  1463. /*unread message state*/
  1464.  
  1465. .pm-window h3.pm-notifying,
  1466. .pm-window h3.pm-notifying:hover {
  1467. background: var(--notif-light-80a);
  1468. border-color: var(--main)
  1469. }
  1470.  
  1471. .dark .pm-window h3.pm-notifying,
  1472. .dark .pm-window h3.pm-notifying:hover {
  1473. background: var(--notif-dark-80a);
  1474. }
  1475.  
  1476. /*minimize button*/
  1477.  
  1478. .pm-window h3:hover .minimizebutton {
  1479. color: var(--lighttext);
  1480. filter: none
  1481. }
  1482.  
  1483. .dark .pm-window h3:hover .minimizebutton {
  1484. color: var(--darktext)
  1485. }
  1486.  
  1487. /*grey pm usernames (like ~'s name which appears when you change your avatar and do other stuff)*/
  1488.  
  1489. .pm-window h3 small {
  1490. color: var(--lighttext2)
  1491. }
  1492.  
  1493. .dark .pm-window h3 small {
  1494. color: var(--darktext2)
  1495. }
  1496.  
  1497. /********************\
  1498. -Challenge Box-
  1499. \********************/
  1500.  
  1501. .challenge {
  1502. background: var(--notif-light-80a);
  1503. color: var(--lighttext);
  1504. border-color: var(--main)
  1505. }
  1506.  
  1507. .dark .challenge {
  1508. background: var(--notif-dark-80a);
  1509. color: var(--darktext);
  1510. border-color: var(--main)
  1511. }
  1512.  
  1513. /********************\
  1514. -Message Area-
  1515. \********************/
  1516.  
  1517. .pm-log {
  1518. background: var(--lightbg);
  1519. color: var(--lighttext);
  1520. border-color: var(--main)
  1521. }
  1522.  
  1523. .dark .pm-log {
  1524. background: var(--darkbg);
  1525. color: var(--darktext);
  1526. }
  1527.  
  1528. .pm-window.focused .pm-log,
  1529. .dark .pm-window.focused .pm-log {
  1530. border-color: var(--main)
  1531. }
  1532.  
  1533. /*top left buttons*/
  1534.  
  1535. .pm-buttonbar button {
  1536. background: transparent;
  1537. border-color: var(--main);
  1538. border-radius: 0;
  1539. color: var(--lighttext);
  1540. }
  1541.  
  1542. .pm-buttonbar button:hover,
  1543. .pm-buttonbar button:focus-visible {
  1544. background: var(--lightbg3);
  1545. outline: none
  1546. }
  1547.  
  1548. .dark .pm-buttonbar button {
  1549. background: transparent;
  1550. color: var(--darktext);
  1551. }
  1552.  
  1553. .dark .pm-buttonbar button:hover,
  1554. .dark .pm-buttonbar button:focus-visible {
  1555. background: var(--main-50a);
  1556. }
  1557.  
  1558. /********************\
  1559. -News Entries-
  1560. \********************/
  1561.  
  1562. .newsentry {
  1563. border-color: var(--main)
  1564. }
  1565.  
  1566. .newsentry.unread {
  1567. background: var(--notif-light-80a)
  1568. }
  1569.  
  1570. .dark .newsentry.unread {
  1571. background: var(--notif-dark-80a)
  1572. }
  1573.  
  1574. /********************\
  1575. -Bottom Textbox Area-
  1576. \********************/
  1577.  
  1578. .pm-log-add {
  1579. background: var(--lightbg2);
  1580. border-color: var(--main)
  1581. }
  1582.  
  1583. .dark .pm-log-add {
  1584. background: var(--darkbg2);
  1585. }
  1586.  
  1587. .pm-window.focused .pm-log-add {
  1588. border-color: var(--main);
  1589. background: var(--lightbg3);
  1590. }
  1591.  
  1592. .dark .pm-window.focused .pm-log-add {
  1593. border-color: var(--main);
  1594. background: var(--darkbg3);
  1595. }
  1596.  
  1597. /********************\
  1598. -Shadow-
  1599. \********************/
  1600.  
  1601. .pm-window {
  1602. box-shadow: 0 2px 5px var(--shading);
  1603. border-radius: 5px
  1604. }
  1605.  
  1606. /***********************************************\
  1607. -------------------------------------------------
  1608. -BUTTONS-
  1609. -------------------------------------------------
  1610. \***********************************************/
  1611.  
  1612. /********************\
  1613. -Some Buttons-
  1614. \********************/
  1615.  
  1616. /*light mode*/
  1617.  
  1618. .button,
  1619. .popupmenu button.button {
  1620. background: var(--lightbg3);
  1621. color: var(--lighttext);
  1622. text-shadow: none;
  1623. border-color: var(--main);
  1624. box-shadow: 0 2px var(--main);
  1625. transition: none
  1626. }
  1627.  
  1628. .button:hover,
  1629. .popupmenu button.button:hover {
  1630. background: var(--lightbg3);
  1631. border-color: var(--main);
  1632. transform: translateY(1px);
  1633. box-shadow: 0 1px var(--main)
  1634. }
  1635.  
  1636. .button:focus,
  1637. .popupmenu button.button:focus {
  1638. border-color: var(--main);
  1639. transform: translateY(2px);
  1640. box-shadow: inset 0 2px 5px var(--shading)
  1641. }
  1642.  
  1643. .button:active,
  1644. .popupmenu button.button:active {
  1645. background: var(--lightbg3)
  1646. }
  1647.  
  1648. /*light mode disabled*/
  1649.  
  1650. .button.disabled,
  1651. .button.disabled:hover,
  1652. .button.disabled:active {
  1653. background: var(--lightbg3);
  1654. color: var(--lighttext);
  1655. text-shadow: none;
  1656. border-color: var(--main);
  1657. box-shadow: 0 2px var(--main);
  1658. opacity: 0.5;
  1659. transform: none
  1660. }
  1661.  
  1662. /*dark mode*/
  1663.  
  1664. .dark .button,
  1665. .dark .popupmenu button.button {
  1666. background: var(--main-50a);
  1667. color: var(--darktext);
  1668. border-color: var(--main);
  1669. box-shadow: none;
  1670. transition: background-color 0.2s;
  1671. transform: none
  1672. }
  1673.  
  1674. .dark .button:hover,
  1675. .dark .popupmenu button.button:hover {
  1676. background: var(--main-75a);
  1677. border-color: var(--main);
  1678. }
  1679.  
  1680. .dark .button:focus,
  1681. .dark .popupmenu button.button:focus {
  1682. border-color: var(--main);
  1683. box-shadow: 0 0 4px var(--misc), 0 0 4px var(--misc);
  1684. }
  1685.  
  1686. .dark .button:active,
  1687. .dark .popupmenu button.button:active {
  1688. background: var(--main-75a);
  1689. border-color: var(--main);
  1690. }
  1691.  
  1692. /*dark mode disabled*/
  1693.  
  1694. .dark .button.disabled,
  1695. .dark .button.disabled:hover,
  1696. .dark .button.disabled:active {
  1697. background: var(--main-50a);
  1698. color: var(--darktext);
  1699. border-color: var(--main);
  1700. box-shadow: none;
  1701. }
  1702.  
  1703. /*this is so link buttons dont get the wrong color*/
  1704.  
  1705. a.button:visited {
  1706. color: var(--lighttext)
  1707. }
  1708.  
  1709. /********************\
  1710. -Folder Buttons In Popup-
  1711. \********************/
  1712. /*the ones that appear in the popup that appears when you click on the team selector in the main menu*/
  1713.  
  1714. /*light mode*/
  1715.  
  1716. .popupmenu button.folderButton,
  1717. .popupmenu button.folderButtonOpen {
  1718. background: var(--lightbg3);
  1719. color: var(--lighttext);
  1720. text-shadow: none;
  1721. border-color: var(--main);
  1722. box-shadow: 0 2px var(--main);
  1723. transition: none;
  1724. margin-bottom: 3px
  1725. }
  1726.  
  1727. .popupmenu button.folderButton:hover,
  1728. .popupmenu button.folderButtonOpen:hover {
  1729. background: var(--lightbg3);
  1730. border-color: var(--main);
  1731. transform: translateY(1px);
  1732. box-shadow: 0 1px var(--main)
  1733. }
  1734.  
  1735. .popupmenu button.folderButton:focus,
  1736. .popupmenu button.folderButtonOpen:focus {
  1737. transform: translateY(2px);
  1738. box-shadow: inset 0 2px 5px var(--shading)
  1739. }
  1740.  
  1741. /*dark mode*/
  1742.  
  1743. .dark .popupmenu button.folderButton,
  1744. .dark .popupmenu button.folderButtonOpen {
  1745. background: var(--main-50a);
  1746. color: var(--darktext);
  1747. border-color: var(--main);
  1748. box-shadow: none;
  1749. transition: background-color 0.2s;
  1750. transform: none
  1751. }
  1752.  
  1753. .dark .popupmenu button.folderButton:hover,
  1754. .dark .popupmenu button.folderButtonOpen:hover {
  1755. background: var(--main-75a);
  1756. border-color: var(--main);
  1757. }
  1758.  
  1759. .dark .popupmenu button.folderButton:focus,
  1760. .dark .popupmenu button.folderButtonOpen:focus {
  1761. box-shadow: 0 0 4px var(--misc), 0 0 4px var(--misc);
  1762. }
  1763.  
  1764. .dark .popupmenu button.folderButton:active,
  1765. .dark .popupmenu button.folderButtonOpen:active {
  1766. background: var(--main-75a);
  1767. }
  1768.  
  1769. /*some padding*/
  1770.  
  1771. .popupmenu[style="float:left;padding-left:5px"] {
  1772. padding-top: 5px
  1773. }
  1774.  
  1775. /********************\
  1776. -Some Other Buttons-
  1777. \********************/
  1778.  
  1779. button {
  1780. background: var(--main-75a);
  1781. color: var(--white);
  1782. border: 1px solid transparent;
  1783. border-radius: 3px;
  1784. }
  1785.  
  1786. button:hover {
  1787. background-color: var(--main)
  1788. }
  1789.  
  1790. button:focus-visible {
  1791. outline: 2px solid var(--misc)
  1792. }
  1793.  
  1794. button:disabled {
  1795. background: var(--main-75a);
  1796. opacity: 0.5
  1797. }
  1798.  
  1799. /*this is to make sure the styling here doesn't affect other stuff*/
  1800.  
  1801. .closebutton:hover,
  1802. .minimizebutton:hover,
  1803. button.subtle,
  1804. .moveselect button,
  1805. .switchselect button {
  1806. background: initial
  1807. }
  1808.  
  1809. #room-help .infobox-roomintro button {
  1810. color: initial
  1811. }
  1812.  
  1813. /********************\
  1814. -Close And Minimize Buttons-
  1815. \********************/
  1816.  
  1817. .closebutton,
  1818. .minimizebutton {
  1819. color: var(--lighttext2);
  1820. }
  1821.  
  1822. .dark .closebutton,
  1823. .dark .minimizebutton {
  1824. color: var(--darktext2)
  1825. }
  1826.  
  1827. .pm-window h3 .closebutton:hover+.minimizebutton {
  1828. color: var(--lighttext2) !important
  1829. }
  1830.  
  1831. .dark .pm-window h3 .closebutton:hover+.minimizebutton {
  1832. color: var(--darktext2) !important
  1833. }
  1834.  
  1835. .closebutton:hover,
  1836. .minimizebutton:hover,
  1837. .closebutton:focus-visible,
  1838. .minimizebutton:focus-visible {
  1839. color: var(--main);
  1840. outline: none
  1841. }
  1842.  
  1843. .closebutton:active,
  1844. .minimizebutton:active {
  1845. color: var(--main);
  1846. filter: brightness(60%)
  1847. }
  1848.  
  1849. /*tab button closebutton stuff*/
  1850.  
  1851. .closebutton {
  1852. transition: opacity 0.3s;
  1853. }
  1854.  
  1855. .tabbar .closebutton {
  1856. right: 1px
  1857. }
  1858.  
  1859. .tabbar a.button:hover+.closebutton {
  1860. opacity: 0.5;
  1861. }
  1862.  
  1863. .tabbar a.cur:hover+.closebutton {
  1864. opacity: initial
  1865. }
  1866.  
  1867. .tablist a.button:hover+.closebutton {
  1868. opacity: 0.5;
  1869. }
  1870.  
  1871. .tablist a.cur:hover+.closebutton {
  1872. opacity: initial
  1873. }
  1874.  
  1875. /********************\
  1876. -Subtle Buttons-
  1877. \********************/
  1878. /*the "_ lines from ______ hidden" button when someone's messages get hidden*/
  1879.  
  1880. button.subtle {
  1881. color: var(--lighttext2)
  1882. }
  1883.  
  1884. .dark button.subtle {
  1885. color: var(--darktext2)
  1886. }
  1887.  
  1888. /********************\
  1889. -This Is To Space Out The Buttons-
  1890. \********************/
  1891. /*the buttons that appear in the room that appears when you type /sampleteams*/
  1892.  
  1893. #room-view-sampleteams-view ul li .button {
  1894. margin-bottom: 3px
  1895. }
  1896.  
  1897. /***********************************************\
  1898. -------------------------------------------------
  1899. -TOP BAR-
  1900. -------------------------------------------------
  1901. \***********************************************/
  1902.  
  1903. /********************\
  1904. -Background-
  1905. \********************/
  1906.  
  1907. .header {
  1908. background: var(--lightbg2)
  1909. }
  1910.  
  1911. .dark .header {
  1912. background: var(--darkbg2)
  1913. }
  1914.  
  1915. /********************\
  1916. -Username And Icon-
  1917. \********************/
  1918.  
  1919. /*username*/
  1920.  
  1921. .userbar .username,
  1922. .dark .userbar .username {
  1923. text-shadow: none
  1924. }
  1925.  
  1926. /*icon*/
  1927.  
  1928. i.fa.fa-user::before {
  1929. display: none
  1930. }
  1931.  
  1932. .userbar .username::before {
  1933. content: "";
  1934. background: url("/*[[nameicon-key]]*/");
  1935. background-size: cover;
  1936. width: /*[[nameicon-width-key]]*/;
  1937. height: /*[[nameicon-height-key]]*/;
  1938. float: left;
  1939. position: relative;
  1940. top: -11px;
  1941. left: 3px;
  1942. /*[[nameicon-sat-key]]*/
  1943. }
  1944.  
  1945. /********************\
  1946. -Tab Buttons-
  1947. \********************/
  1948.  
  1949. /*bottom bar*/
  1950.  
  1951. .maintabbarbottom {
  1952. border-color: var(--main);
  1953. background: var(--lightbg3);
  1954. box-shadow: none
  1955. }
  1956.  
  1957. .dark .maintabbarbottom {
  1958. border-color: var(--main);
  1959. background: var(--darkbg3)
  1960. }
  1961.  
  1962. /*unread message and notification tabs*/
  1963.  
  1964. .tabbar a.button.subtle-notifying {
  1965. color: var(--notif-light)
  1966. }
  1967.  
  1968. .dark .tabbar a.button.subtle-notifying {
  1969. color: var(--notif-dark)
  1970. }
  1971.  
  1972. .tabbar a.button.notifying {
  1973. background: var(--notif-light);
  1974. border-color: transparent;
  1975. color: var(--black)
  1976. }
  1977.  
  1978. .dark .tabbar a.button.notifying,
  1979. .dark .tabbar a.button.notifying:hover {
  1980. background: var(--notif-dark);
  1981. border-color: transparent;
  1982. color: var(--black)
  1983. }
  1984.  
  1985. /*normal tab buttons*/
  1986.  
  1987. .tabbar a.button {
  1988. border-color: var(--main);
  1989. color: var(--lighttext);
  1990. background: var(--lightbg3);
  1991. text-shadow: none;
  1992. font-size: 10px;
  1993. padding-bottom: 1.5px;
  1994. padding-top: 1.5px;
  1995. margin-right: 2px;
  1996. top: 1px;
  1997. transition: opacity 0.3s;
  1998. z-index: 1;
  1999. transform: none
  2000. }
  2001.  
  2002. .tabbar a.button:hover,
  2003. .tabbar a.button:active,
  2004. .tabbar a.button:focus-visible {
  2005. opacity: 0.5
  2006. }
  2007.  
  2008. .dark .tabbar a.button {
  2009. border-color: var(--main);
  2010. color: var(--darktext);
  2011. background: var(--darkbg3);
  2012. box-shadow: none
  2013. }
  2014.  
  2015. .dark .tabbar a.button:hover,
  2016. .dark .tabbar a.button:active {
  2017. border-color: var(--main);
  2018. background: var(--darkbg3);
  2019. }
  2020.  
  2021. /*currently opened tab buttons*/
  2022.  
  2023. .tabbar a.button.cur,
  2024. .tabbar a.button.cur:hover {
  2025. border-color: var(--main);
  2026. color: var(--lighttext);
  2027. background: var(--lightbg3);
  2028. padding-bottom: 5px;
  2029. padding-top: 3px;
  2030. border-bottom-left-radius: 0px !important;
  2031. border-bottom-right-radius: 0px !important;
  2032. opacity: 1
  2033. }
  2034.  
  2035. .dark .tabbar a.button.cur,
  2036. .dark .tabbar a.button.cur:hover {
  2037. border-color: var(--main);
  2038. color: var(--darktext);
  2039. background: var(--darkbg3);
  2040. }
  2041.  
  2042. /*some border radius stuff*/
  2043.  
  2044. .tabbar li:first-child a.button {
  2045. border-top-left-radius: 5px;
  2046. border-bottom-left-radius: 5px;
  2047. border-top-right-radius: 0px;
  2048. border-bottom-right-radius: 0px;
  2049. }
  2050.  
  2051. .tabbar li:last-child a.button {
  2052. border-top-right-radius: 5px;
  2053. border-bottom-right-radius: 5px;
  2054. }
  2055.  
  2056. /*the button with a tiny logo on it that appears when your screen is small*/
  2057.  
  2058. a.button.minilogo img {
  2059. margin-top: -2px
  2060. }
  2061.  
  2062. /********************\
  2063. -Roomlist Button-
  2064. \********************/
  2065.  
  2066. .maintabbar .overflow .button {
  2067. background: var(--lightbg3);
  2068. transform: none;
  2069. transition: 0.3s;
  2070. box-shadow: 0 0 3px var(--main)
  2071. }
  2072.  
  2073. .maintabbar .overflow .button:hover,
  2074. .maintabbar .overflow .button:active,
  2075. .maintabbar .overflow .button:focus {
  2076. box-shadow: 0 0 5px 1px var(--main)
  2077. }
  2078.  
  2079. .dark .maintabbar .overflow .button {
  2080. background: var(--darkbg3)
  2081. }
  2082.  
  2083. /********************\
  2084. -Logo-
  2085. \********************/
  2086.  
  2087. /*[[logo-key]]*/
  2088.  
  2089. /***********************************************\
  2090. -------------------------------------------------
  2091. -CHATROOMS AND OTHER ROOMS-
  2092. -------------------------------------------------
  2093. \***********************************************/
  2094.  
  2095. /********************\
  2096. -Backgrounds, Text, And Borders-
  2097. \********************/
  2098.  
  2099. .ps-room.ps-room-light {
  2100. background: var(--lightbg);
  2101. color: var(--lighttext);
  2102. border-color: var(--main)
  2103. }
  2104.  
  2105. .dark .ps-room.ps-room-light {
  2106. background: var(--darkbg);
  2107. color: var(--darktext);
  2108. }
  2109.  
  2110. .chat-log, .dark .chat-log {
  2111. background: transparent
  2112. }
  2113.  
  2114. /********************\
  2115. -Room Links-
  2116. \********************/
  2117. /*the ones in the room list*/
  2118.  
  2119. .roomlist a.ilink {
  2120. color: var(--link);
  2121. text-shadow: none;
  2122. border-color: transparent;
  2123. background: var(--link-15a);
  2124. transition: background-color 0.3s
  2125. }
  2126.  
  2127. .roomlist a.ilink:hover,
  2128. .roomlist a.ilink:focus-visible {
  2129. color: var(--link);
  2130. border-color: transparent;
  2131. background: var(--link-30a);
  2132. outline: none
  2133. }
  2134.  
  2135. .roomlist a.ilink:focus-visible {
  2136. transition: none
  2137. }
  2138.  
  2139. .dark .roomlist a.ilink {
  2140. color: var(--link);
  2141. border-color: currentcolor;
  2142. background: var(--link-15a)
  2143. }
  2144.  
  2145. .dark .roomlist a.ilink:hover,
  2146. .dark .roomlist a.ilink:focus-visible {
  2147. color: var(--link);
  2148. border-color: currentcolor;
  2149. background: var(--link-30a)
  2150. }
  2151.  
  2152. /*subroom links*/
  2153.  
  2154. .roomlist .subrooms {
  2155. margin: 0 0 4px 4px
  2156. }
  2157.  
  2158. /********************\
  2159. -Links-
  2160. \********************/
  2161.  
  2162. /*most links*/
  2163.  
  2164. a,
  2165. .dark a {
  2166. color: var(--link)
  2167. }
  2168.  
  2169. a:visited,
  2170. .dark a:visited {
  2171. color: var(--link-visited)
  2172. }
  2173.  
  2174. /*some other links*/
  2175.  
  2176. a.ilink,
  2177. .dark a.ilink {
  2178. color: var(--link)
  2179. }
  2180.  
  2181. a.ilink:hover {
  2182. color: var(--link)
  2183. }
  2184.  
  2185. a.ilink.yours {
  2186. color: var(--link-visited)
  2187. }
  2188.  
  2189. /*in-progress link in tournament boxes*/
  2190.  
  2191. .tournament-bracket-tree-node>text>a,
  2192. .tournament-bracket-tree-node>text>a:hover {
  2193. fill: var(--link)
  2194. }
  2195.  
  2196. /*links in broadcasts*/
  2197.  
  2198. .broadcast-blue a,
  2199. .dark .broadcast-blue a {
  2200. color: var(--blue);
  2201. text-shadow: 0 0 3px var(--shading), 0 0 3px var(--shading), 0 0 3px var(--shading);
  2202. }
  2203.  
  2204. .broadcast-green a,
  2205. .dark .broadcast-green a {
  2206. color: var(--green);
  2207. text-shadow: 0 0 3px var(--shading), 0 0 3px var(--shading), 0 0 3px var(--shading);
  2208. }
  2209.  
  2210. .broadcast-red a,
  2211. .dark .broadcast-red a {
  2212. color: var(--red);
  2213. text-shadow: 0 0 3px var(--shading), 0 0 3px var(--shading), 0 0 3px var(--shading);
  2214. }
  2215.  
  2216. /*links in announcements (use /wall)*/
  2217.  
  2218. .message-announce a, .dark .message-announce a {
  2219. color: var(--light-blue);
  2220. text-shadow: 0 0 3px var(--shading), 0 0 3px var(--shading), 0 0 3px var(--shading);
  2221. }
  2222.  
  2223. /*subtle links (/nds something to see them)*/
  2224.  
  2225. a.subtle {
  2226. color: var(--lighttext)
  2227. }
  2228.  
  2229. .dark a.subtle {
  2230. color: var(--darktext)
  2231. }
  2232.  
  2233. a.subtle:hover {
  2234. color: var(--link)
  2235. }
  2236.  
  2237. /*focus visible state (only visible when pressing the tab key)*/
  2238.  
  2239. a:focus-visible{
  2240. outline: 2px solid var(--link)
  2241. }
  2242.  
  2243. /********************\
  2244. -Message Colors-
  2245. \********************/
  2246.  
  2247. /*normal text*/
  2248.  
  2249. .chat-log {
  2250. color: var(--lighttext)
  2251. }
  2252.  
  2253. .dark .chat-log {
  2254. color: var(--darktext)
  2255. }
  2256.  
  2257. /*your message background*/
  2258.  
  2259. .chat.mine,
  2260. .dark .chat.mine {
  2261. background: var(--grey-15a)
  2262. }
  2263.  
  2264. /*revealed text*/
  2265.  
  2266. .revealed,
  2267. .dark .revealed {
  2268. background: var(--revealed-text)
  2269. }
  2270.  
  2271. /*highlights*/
  2272.  
  2273. .highlighted {
  2274. background: var(--notif-light-30a)
  2275. }
  2276.  
  2277. .dark .highlighted {
  2278. background: var(--notif-dark-30a)
  2279. }
  2280.  
  2281. /*announcements (/wall)*/
  2282.  
  2283. .message-announce{
  2284. background: var(--light-blue);
  2285. color: var(--white)
  2286. }
  2287.  
  2288. /*pm message (appears when you set pms to apper in chatrooms)*/
  2289.  
  2290. .message-pm {
  2291. color: var(--green)
  2292. }
  2293.  
  2294. /*green text (meme arrow text)*/
  2295.  
  2296. .greentext,
  2297. .dark .greentext {
  2298. color: var(--green)
  2299. }
  2300.  
  2301. /*code*/
  2302.  
  2303. code,
  2304. .code,
  2305. .spoiler:hover code,
  2306. .spoiler:active code,
  2307. .spoiler-shown code {
  2308. background: var(--grey-45a);
  2309. border-color: var(--grey);
  2310. color: var(--lighttext)
  2311. }
  2312.  
  2313. .dark code,
  2314. .dark .code,
  2315. .dark .spoiler:hover code,
  2316. .dark .spoiler:active code,
  2317. .dark .spoiler-shown code {
  2318. background: var(--grey-45a);
  2319. border-color: var(--grey);
  2320. color: var(--darktext)
  2321. }
  2322.  
  2323. .broadcast-blue code,
  2324. .broadcast-green code,
  2325. .broadcast-red code,
  2326. .message-announce code {
  2327. background: var(--grey)
  2328. }
  2329.  
  2330. details.readmore summary:focus-visible {
  2331. outline: 3px solid var(--misc);
  2332. }
  2333.  
  2334. /*the "read more" and symbol text in long code*/
  2335.  
  2336. details.readmore summary:after {
  2337. color: var(--lighttext2)
  2338. }
  2339.  
  2340. .dark details.readmore summary:after {
  2341. color: var(--darktext2)
  2342. }
  2343.  
  2344. details.readmore summary:hover:after {
  2345. color: var(--misc)
  2346. }
  2347.  
  2348. details.readmore[open] summary:hover:before {
  2349. color: var(--lighttext)
  2350. }
  2351.  
  2352. .dark details.readmore[open] summary:hover:before {
  2353. color: var(--darktext)
  2354. }
  2355.  
  2356. /*spoilers*/
  2357.  
  2358. .spoiler,
  2359. .dark .spoiler{
  2360. color: var(--grey);
  2361. background: var(--grey)
  2362. }
  2363.  
  2364. .spoiler:hover,
  2365. .spoiler:active,
  2366. .spoiler-shown {
  2367. color: var(--lighttext);
  2368. background: var(--grey-45a)
  2369. }
  2370.  
  2371. .dark .spoiler:hover,
  2372. .dark .spoiler:active,
  2373. .dark .spoiler-shown {
  2374. color: var(--darktext);
  2375. background: var(--grey-45a)
  2376. }
  2377.  
  2378. /*code in spoilers*/
  2379.  
  2380. .spoiler code,
  2381. .dark .spoiler code {
  2382. color: var(--grey);
  2383. background: var(--grey);
  2384. border-color: var(--grey)
  2385. }
  2386.  
  2387. /*error messages*/
  2388.  
  2389. .message-error,
  2390. .dark .message-error {
  2391. color: var(--red)
  2392. }
  2393.  
  2394. /********************\
  2395. -Broadcasts-
  2396. \********************/
  2397. /*(like the colored blocks in the tournament room intro*/
  2398.  
  2399. .broadcast-blue {
  2400. background: var(--blue);
  2401. color: var(--white);
  2402. }
  2403.  
  2404. .broadcast-green {
  2405. background: var(--green);
  2406. color: var(--white);
  2407. }
  2408.  
  2409. .broadcast-red {
  2410. background: var(--red);
  2411. color: var(--white);
  2412. }
  2413.  
  2414. /********************\
  2415. -Infoboxes-
  2416. \********************/
  2417. /*the boxes that have room intros and stuff in them*/
  2418.  
  2419. .infobox {
  2420. border-color: var(--main);
  2421. box-shadow: 0 0 3px var(--main)
  2422. }
  2423.  
  2424. /*the colored "Poll" and "Quiz text"*/
  2425.  
  2426. span[style="border: 1px solid #6a6 ; color: #484 ; border-radius: 4px ; padding: 0 3px"] {
  2427. color: var(--green) !important;
  2428. border-color: var(--green) !important
  2429. }
  2430.  
  2431. span[style="border: 1px solid #777 ; color: #555 ; border-radius: 4px ; padding: 0 3px"] {
  2432. color: var(--grey) !important;
  2433. border-color: var(--grey) !important
  2434. }
  2435.  
  2436. /*this is just to space out the buttons in infoboxes; for the tournament room intro and commands that make a button inside an infobox appear*/
  2437.  
  2438. .infobox .button {
  2439. margin-bottom: 3px
  2440. }
  2441.  
  2442. /*some greyish text that appears when you /nds something*/
  2443.  
  2444. span[style="color: #999999"] {
  2445. color: var(--lighttext2) !important
  2446. }
  2447.  
  2448. .dark span[style="color: #999999"] {
  2449. color: var(--darktext2) !important
  2450. }
  2451.  
  2452. /*the green "can" text that appears when you /learn something*/
  2453.  
  2454. .message-learn-canlearn {
  2455. color: var(--green)
  2456. }
  2457.  
  2458. /*the red "can't" text that appears when you /learn something*/
  2459.  
  2460. .message-learn-cannotlearn {
  2461. color: var(--red)
  2462. }
  2463.  
  2464. /********************\
  2465. -Tournament Boxes-
  2466. \********************/
  2467.  
  2468. /*status and toggle areas*/
  2469.  
  2470. .tournament-status,
  2471. .tournament-toggle {
  2472. background: var(--lightbg2);
  2473. border-color: var(--main)
  2474. }
  2475.  
  2476. .dark .tournament-status,
  2477. .dark .tournament-toggle {
  2478. background: var(--darkbg2);
  2479. color: var(--darktext)
  2480. }
  2481.  
  2482. /*title*/
  2483.  
  2484. .tournament-wrapper {
  2485. border-color: transparent;
  2486. background: var(--lightbg3)
  2487. }
  2488.  
  2489. .dark .tournament-wrapper {
  2490. background: var(--darkbg3)
  2491. }
  2492.  
  2493. /*main box*/
  2494.  
  2495. .tournament-box {
  2496. border-color: var(--main);
  2497. }
  2498.  
  2499. .dark .tournament-box {
  2500. color: var(--darktext)
  2501. }
  2502.  
  2503. .tournament-bracket {
  2504. border-top: 1px solid var(--main)
  2505. }
  2506.  
  2507. /*bottom part*/
  2508.  
  2509. .tournament-tools {
  2510. border-color: var(--main)
  2511. }
  2512.  
  2513. /*tournament tree boxes*/
  2514.  
  2515. .tournament-bracket-tree-node>rect {
  2516. fill: var(--grey-45a);
  2517. stroke: transparent;
  2518. color: var(--white)
  2519. }
  2520.  
  2521. .tournament-bracket-tree-node-loss>rect {
  2522. fill: var(--red);
  2523. stroke: var(--red);
  2524. color: var(--white)
  2525. }
  2526.  
  2527. .tournament-bracket-tree-node-win>rect {
  2528. fill: var(--green);
  2529. stroke: var(--green);
  2530. color: var(--white)
  2531. }
  2532.  
  2533. /*tournament tree box text*/
  2534.  
  2535. .tournament-bracket-tree-node text {
  2536. fill: var(--white);
  2537. }
  2538.  
  2539. .tournament-bracket-tree-node-match-team-draw,
  2540. .tournament-bracket-tree-node-match-team-loss {
  2541. fill: var(--black);
  2542. }
  2543.  
  2544. /*tournament tree lines*/
  2545.  
  2546. .tournament-bracket-tree-link {
  2547. stroke: var(--grey)
  2548. }
  2549.  
  2550. .tournament-bracket-tree-link-active {
  2551. stroke: var(--blue)
  2552. }
  2553.  
  2554. /********************\
  2555. -Userlist-
  2556. \********************/
  2557.  
  2558. /*userlist border*/
  2559.  
  2560. .userlist {
  2561. border-color: var(--main);
  2562. z-index: 1 /*this is to prevent the tournament box from going over the userlist when its collapsable*/
  2563. }
  2564.  
  2565. /*button borders*/
  2566.  
  2567. .userlist li {
  2568. border: none
  2569. }
  2570.  
  2571. /*buttons*/
  2572.  
  2573. .userlist li button {
  2574. border-top: 1px solid transparent;
  2575. border-bottom: 1px solid transparent;
  2576. border-radius: 0;
  2577. transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
  2578. }
  2579.  
  2580. .userlist li button:active,
  2581. .dark .userlist li button:active {
  2582. background: transparent
  2583. }
  2584.  
  2585. .userlist li button:hover,
  2586. .userlist li button:focus-visible {
  2587. background: transparent;
  2588. border-color: var(--main);
  2589. box-shadow: 0 0 5px var(--shading);
  2590. outline: none
  2591. }
  2592.  
  2593. .userlist li button:focus-visible {
  2594. transition: none
  2595. }
  2596.  
  2597. .dark .userlist li button:hover,
  2598. .dark .userlist li button:focus-visible {
  2599. background: var(--darkbg3);
  2600. border-color: var(--main);
  2601. box-shadow: inset 0 0 3px var(--main), 0 0 5px var(--main)
  2602. }
  2603.  
  2604. /*collapsable userlist background*/
  2605.  
  2606. .userlist-minimized,
  2607. .userlist-maximized {
  2608. border-color: var(--main)
  2609. }
  2610.  
  2611. /*usercount button*/
  2612.  
  2613. .userlist-minimized .userlist-count,
  2614. .userlist-maximized .userlist-count {
  2615. color: var(--lighttext);
  2616. transition: background-color 0.3s
  2617. }
  2618.  
  2619. .dark .userlist-minimized .userlist-count,
  2620. .dark .userlist-maximized .userlist-count {
  2621. color: var(--darktext);
  2622. }
  2623.  
  2624. .userlist-minimized .userlist-count:hover,
  2625. .userlist-maximized .userlist-count:hover,
  2626. .dark .userlist-minimized .userlist-count:hover,
  2627. .dark .userlist-maximized .userlist-count:hover {
  2628. background: var(--main-50a);
  2629. }
  2630.  
  2631. /*userlist button text*/
  2632.  
  2633. .dark .userlist strong,
  2634. .dark .userlist span {
  2635. text-shadow: none
  2636. }
  2637.  
  2638. .userlist li em.group {
  2639. color: var(--lighttext2)
  2640. }
  2641.  
  2642. .dark .userlist li em.group {
  2643. color: var(--darktext2)
  2644. }
  2645.  
  2646. /********************\
  2647. -Textbox Area-
  2648. \********************/
  2649.  
  2650. .chat-log-add {
  2651. border-color: var(--main)
  2652. }
  2653.  
  2654. /********************\
  2655. -Tables-
  2656. \********************/
  2657.  
  2658. table {
  2659. border-color: var(--lighttext2)
  2660. }
  2661.  
  2662. .dark table {
  2663. border-color: var(--darktext2)
  2664. }
  2665.  
  2666. /*ladder tables*/
  2667.  
  2668. .ladder table,
  2669. .ladder td,
  2670. .ladder th {
  2671. border-color: var(--lighttext2)
  2672. }
  2673.  
  2674. .dark .ladder table,
  2675. .dark .ladder td,
  2676. .dark .ladder th {
  2677. border-color: var(--darktext2)
  2678. }
  2679.  
  2680. .ladder th {
  2681. background: #cfcfcf;
  2682. color: var(--black);
  2683. }
  2684.  
  2685. .ladder span {
  2686. color: var(--lighttext2)
  2687. }
  2688.  
  2689. .ladder span {
  2690. color: var(--darktext2)
  2691. }
  2692.  
  2693. /********************\
  2694. -Usage Stats-
  2695. \********************/
  2696. /*when someone types "~usage ___ | _____" and brings up a mon's usage stats*/
  2697.  
  2698. /*header*/
  2699.  
  2700. .chat div div[style="float: left ; border-right: 1px solid black"] h2 {
  2701. border-radius: 5px;
  2702. border-left: 1px solid var(--main)
  2703. }
  2704.  
  2705. .chat div div[style="float: left ; border-right: 1px solid black"] {
  2706. border-color: var(--main) !important
  2707. }
  2708.  
  2709. /***********************************************\
  2710. -------------------------------------------------
  2711. -TEAMBUILDER-
  2712. -------------------------------------------------
  2713. \***********************************************/
  2714.  
  2715. /********************\
  2716. -Teams-
  2717. \********************/
  2718.  
  2719. /*light mode*/
  2720.  
  2721. .team {
  2722. color: var(--lightbg3);
  2723. text-shadow: 0 2px 3px var(--shading);
  2724. border: none;
  2725. background: linear-gradient(var(--main-50a), var(--main-75a));
  2726. box-shadow: none
  2727. }
  2728.  
  2729. .team.team-hover,
  2730. .team:focus,
  2731. .team:focus-visible {
  2732. border-color: var(--main);
  2733. background: linear-gradient(var(--main-75a), var(--main));
  2734. box-shadow: none;
  2735. outline: none
  2736. }
  2737.  
  2738. .team:active {
  2739. border-color: var(--main);
  2740. background: linear-gradient(var(--main), var(--main-75a));
  2741. box-shadow: none
  2742. }
  2743.  
  2744. /*dark mode*/
  2745.  
  2746. .dark .team {
  2747. color: var(--darktext);
  2748. background: linear-gradient(var(--main-50a), var(--main-75a));
  2749. box-shadow: 0 2px 5px var(--shading)
  2750. }
  2751.  
  2752. .dark .team.team-hover,
  2753. .dark .team:focus,
  2754. .dark .team:focus-visible {
  2755. color: var(--darktext);
  2756. background: linear-gradient(var(--main-75a), var(--main));
  2757. outline: none
  2758. }
  2759.  
  2760. .dark .team:active {
  2761. background: linear-gradient(var(--main), var(--main-75a));
  2762. box-shadow: 0 2px 5px var(--shading)
  2763. }
  2764.  
  2765. /*the hidden pokemon name text*/
  2766.  
  2767. .teamlist .team .picon span {
  2768. text-shadow: none
  2769. }
  2770.  
  2771. /********************\
  2772. -Set And Team Buttons-
  2773. \********************/
  2774. /*like the edit, duplicate, delete, copy, import/export, etc buttons*/
  2775.  
  2776. .setmenu button,
  2777. .teamlist button {
  2778. color: var(--lighttext);
  2779. transition: border 0.2s, background 0.2s;
  2780. }
  2781.  
  2782. .setmenu button:hover,
  2783. .teamlist button:hover,
  2784. .setmenu button:focus-visible,
  2785. .teamlist button:focus-visible {
  2786. background: var(--lightbg3);
  2787. border-color: var(--main);
  2788. outline: none
  2789. }
  2790.  
  2791. .dark .setmenu button,
  2792. .dark .teamlist button {
  2793. color: var(--darktext);
  2794. }
  2795.  
  2796. .dark .setmenu button:hover,
  2797. .dark .teamlist button:hover,
  2798. .dark .setmenu button:focus-visible,
  2799. .dark .teamlist button:focus-visible {
  2800. background: var(--darkbg3);
  2801. border-color: var(--main);
  2802. color: var(--darktext)
  2803. }
  2804.  
  2805. /*disabled buttons (when you click the "Import/Export" button)*/
  2806.  
  2807. .setmenu button:disabled {
  2808. color: var(--lighttext);
  2809. border-color: transparent;
  2810. background: transparent;
  2811. opacity: 0.5
  2812. }
  2813.  
  2814. .dark .setmenu button:disabled {
  2815. color: var(--darktext);
  2816. border-color: transparent;
  2817. background: transparent
  2818. }
  2819.  
  2820. /********************\
  2821. -Folders-
  2822. \********************/
  2823.  
  2824. /*headers*/
  2825.  
  2826. .folderpane h3 {
  2827. background: var(--lightbg3);
  2828. color: var(--lighttext);
  2829. border-color: var(--main)
  2830. }
  2831.  
  2832. .dark .folderpane h3 {
  2833. background: var(--darkbg3);
  2834. color: var(--darktext);
  2835. }
  2836.  
  2837. /*extra space*/
  2838.  
  2839. .folderlistafter:before,
  2840. .folderlistbefore:before,
  2841. .folderlist .foldersep:before {
  2842. border-color: var(--main);
  2843. background: var(--lightbg3)
  2844. }
  2845.  
  2846. .folderpane {
  2847. border-color: var(--lightbg3);
  2848. }
  2849.  
  2850. .dark .folderlistafter:before,
  2851. .dark .folderlistbefore:before,
  2852. .dark .folderlist .foldersep:before {
  2853. background: var(--darkbg3)
  2854. }
  2855.  
  2856. .dark .folderpane {
  2857. border-color: var(--darkbg3);
  2858. }
  2859.  
  2860. /*icons*/
  2861.  
  2862. .folderpane i {
  2863. color: var(--lighttext)
  2864. }
  2865.  
  2866. .dark .folderpane i {
  2867. color: var(--darktext)
  2868. }
  2869.  
  2870. /*folder buttons*/
  2871.  
  2872. .folder .selectFolder {
  2873. background: var(--lightbg3);
  2874. border-color: var(--main);
  2875. color: var(--lighttext);
  2876. transition: box-shadow 0.4s
  2877. }
  2878.  
  2879. .folder .selectFolder:hover,
  2880. .folder .selectFolder:active {
  2881. background: var(--lightbg3);
  2882. box-shadow: inset -153px 0 var(--main-75a);
  2883. transition: box-shadow 0.15s
  2884. }
  2885.  
  2886. .folder .selectFolder.active {
  2887. background: var(--main);
  2888. color: var(--lighttext);
  2889. }
  2890.  
  2891. .dark .folder .selectFolder {
  2892. background: var(--darkbg3);
  2893. color: var(--darktext);
  2894. }
  2895.  
  2896. .dark .folder .selectFolder:hover,
  2897. .dark .folder .selectFolder:active {
  2898. background: var(--darkbg3);
  2899. }
  2900.  
  2901. .dark .folder .selectFolder.active {
  2902. background: var(--main);
  2903. color: var(--darktext);
  2904. }
  2905.  
  2906. /*currently opened folder button*/
  2907.  
  2908. .folder.cur .selectFolder,
  2909. .folder.cur .selectFolder:hover,
  2910. .folder.cur .selectFolder:active {
  2911. background: transparent;
  2912. border-color: var(--main);
  2913. color: var(--lighttext);
  2914. border-radius: 0;
  2915. box-shadow: none
  2916. }
  2917.  
  2918. .dark .folder.cur .selectFolder,
  2919. .dark .folder.cur .selectFolder:hover,
  2920. .dark .folder.cur .selectFolder:active {
  2921. color: var(--darktext);
  2922. }
  2923.  
  2924. .folderhack1,
  2925. .folderhack2,
  2926. .dark .folderhack1,
  2927. .dark .folderhack2 {
  2928. background: var(--main);
  2929. left: 153px
  2930. }
  2931.  
  2932. /********************\
  2933. -Set Boxes-
  2934. \********************/
  2935.  
  2936. /*big main box that shows the mon and smaller box with nicknames*/
  2937.  
  2938. .setchart,
  2939. .setchart-nickname {
  2940. background-color: var(--lightbg3);
  2941. border-color: var(--main);
  2942. box-shadow: none
  2943. }
  2944.  
  2945. .dark .setchart,
  2946. .dark .setchart-nickname {
  2947. background-color: var(--darkbg3);
  2948. }
  2949.  
  2950. /*labels*/
  2951.  
  2952. .setchart label,
  2953. .setchart-nickname label {
  2954. color: var(--lighttext2)
  2955. }
  2956.  
  2957. .setcol-icon label {
  2958. text-shadow: 1px 1px var(--lightbg3), 1px -1px var(--lightbg3), -1px 1px var(--lightbg3), -1px -1px var(--lightbg3)
  2959. }
  2960.  
  2961. .dark .setchart label,
  2962. .dark .setchart-nickname label {
  2963. color: var(--darktext2)
  2964. }
  2965.  
  2966. .dark .setcol-icon label {
  2967. text-shadow: 1px 1px var(--darkbg3), 1px -1px var(--darkbg3), -1px 1px var(--darkbg3), -1px -1px var(--darkbg3)
  2968. }
  2969.  
  2970. /*textboxes*/
  2971.  
  2972. .setchart input,
  2973. .setchart-nickname input,
  2974. .statform input.inputform,
  2975. .setdetails,
  2976. .setstats {
  2977. border-color: var(--main);
  2978. box-shadow: none;
  2979. transition: box-shadow 0.2s
  2980. }
  2981.  
  2982. .setchart input:hover,
  2983. .setchart input:focus,
  2984. .setchart-nickname input:hover,
  2985. .setchart-nickname input:focus,
  2986. .statform input.inputform:hover,
  2987. .statform input.inputform:focus,
  2988. .setdetails:hover,
  2989. .setdetails:focus,
  2990. .setstats:hover,
  2991. .setstats:focus {
  2992. border-color: var(--main);
  2993. box-shadow: 0 0 3px 1px var(--main)
  2994. }
  2995.  
  2996. .dark .setchart input,
  2997. .dark .setchart-nickname input,
  2998. .dark .setdetails,
  2999. .dark .setstats {
  3000. border-color: var(--main);
  3001. }
  3002.  
  3003. .dark .setchart input:hover,
  3004. .dark .setchart-nickname input:hover,
  3005. .dark .setchart input:focus,
  3006. .dark .setchart-nickname input:focus,
  3007. .dark .setdetails:hover,
  3008. .dark .setstats:hover,
  3009. .dark .setdetails:focus,
  3010. .dark .setstats:focus {
  3011. border-color: var(--main);
  3012. box-shadow: inset 0 0 2px var(--main), 0 0 3px 1px var(--main)
  3013. }
  3014.  
  3015. /*stuff for the "Details" textbox*/
  3016.  
  3017. .setdetails .detailcell {
  3018. border-color: var(--main);
  3019. padding: 2px 2.45px;
  3020. font-size: 7pt;
  3021. }
  3022.  
  3023. .setdetails .detailcell label {
  3024. font-size: 6.7pt;
  3025. padding-bottom: 2px;
  3026. }
  3027.  
  3028. /*stuff for the "Stats" textbox*/
  3029.  
  3030. .setstats .statrow-head em {
  3031. color: var(--lighttext2)
  3032. }
  3033.  
  3034. .dark .setstats .statrow-head em {
  3035. color: var(--darktext2)
  3036. }
  3037.  
  3038. /*red error textboxes*/
  3039.  
  3040. .setchart input.incomplete,
  3041. .setchart input.incomplete:hover {
  3042. border-color: var(--red);
  3043. color: var(--red);
  3044. box-shadow: none
  3045. }
  3046.  
  3047. /*disabled textboxes (when you click the "Import/Export" button)*/
  3048.  
  3049. .setchart input:disabled,
  3050. .setchart-nickname input:disabled,
  3051. .setdetails:disabled,
  3052. .setstats:disabled {
  3053. border-color: var(--main);
  3054. background: var(--lightbg3);
  3055. color: var(--lighttext);
  3056. box-shadow: none;
  3057. opacity: 0.5
  3058. }
  3059.  
  3060. .dark .setchart input:disabled,
  3061. .dark .setchart-nickname input:disabled,
  3062. .dark .setdetails:disabled,
  3063. .dark .setstats:disabled {
  3064. background: var(--darkbg3);
  3065. color: var(--darktext);
  3066. box-shadow: none
  3067. }
  3068.  
  3069. .setdetails:disabled:focus,
  3070. .setdetails:disabled:active {
  3071. border-width: 1px;
  3072. margin: 2px 2px 1px 1px;
  3073. width: 230px;
  3074. height: 34px;
  3075. }
  3076.  
  3077. .setstats:disabled:focus,
  3078. .setstats:disabled:active {
  3079. border-width: 1px;
  3080. margin: 2px 2px 1px 1px;
  3081. width: 138px;
  3082. height: 108px;
  3083. }
  3084.  
  3085. /*sprite changing button*/
  3086.  
  3087. .changeform i {
  3088. background: var(--lightbg3);
  3089. border-color: var(--main);
  3090. color: var(--main);
  3091. box-shadow: none;
  3092. transition: background-color 0.2s, color 0.2s, text-shadow 0.2s
  3093. }
  3094.  
  3095. .changeform i:hover {
  3096. background: var(--main);
  3097. border-color: var(--main);
  3098. color: var(--lightbg3);
  3099. }
  3100.  
  3101. .dark .changeform i {
  3102. background: var(--darkbg3);
  3103. border-color: var(--main);
  3104. color: var(--main);
  3105. box-shadow: 0 0 3px var(--main);
  3106. text-shadow: 0 0 3px var(--main)
  3107. }
  3108.  
  3109. .dark .changeform i:hover {
  3110. background: var(--main);
  3111. border-color: var(--main);
  3112. color: var(--darkbg3);
  3113. text-shadow: none
  3114. }
  3115.  
  3116. /********************\
  3117. -Misc Teambuilder Stuff-
  3118. \********************/
  3119.  
  3120. /*top border with the team name above it*/
  3121.  
  3122. .teamchartbox {
  3123. border-color: var(--main)
  3124. }
  3125.  
  3126. /*illegal amount of evs text*/
  3127.  
  3128. .statform .totalev b {
  3129. color: var(--red)
  3130. }
  3131.  
  3132. /*ev textboxes*/
  3133.  
  3134. .statform input.inputform {
  3135. border-color: var(--main);
  3136. box-shadow: none;
  3137. transition: box-shadow 0.2s
  3138. }
  3139.  
  3140. .statform input.inputform:hover,
  3141. .statform input.inputform:focus {
  3142. border-color: var(--main);
  3143. box-shadow: 0 0 0 2px var(--main-50a)
  3144. }
  3145.  
  3146. /*this is to space out the new box and new team buttons and the textbox next to them*/
  3147.  
  3148. .teampane p .button.big {
  3149. margin-bottom: 3px
  3150. }
  3151.  
  3152. /*the buttons near the big textbox when you import a pokemon set*/
  3153.  
  3154. .pokemonedit-buttons button {
  3155. margin-bottom: 3px
  3156. }
  3157.  
  3158. .teambuilder-import-smogon-sets button {
  3159. margin-right: 3px
  3160. }
  3161.  
  3162. /*clipboard*/
  3163.  
  3164. .teambuilder-clipboard-container {
  3165. border-color: var(--main);
  3166. box-shadow: 0 0 3px var(--main)
  3167. }
  3168.  
  3169. .teambuilder-clipboard-data .section {
  3170. border-color: var(--main)
  3171. }
  3172.  
  3173. .teambuilder-clipboard-data {
  3174. background: var(--main-75a);
  3175. border-color: var(--main);
  3176. color: var(--white);
  3177. text-shadow: 0 1px 3px var(--shading)
  3178. }
  3179.  
  3180. .dark .teambuilder-clipboard-data {
  3181. color: var(--white)
  3182. }
  3183.  
  3184. .teambuilder-clipboard-data:hover {
  3185. background: var(--main-75a);
  3186. border-color: var(--main);
  3187. }
  3188.  
  3189. /********************\
  3190. -Teambar-
  3191. \********************/
  3192. /*the bar that shows the team members when you're editing a mon*/
  3193.  
  3194. /*normal buttons*/
  3195.  
  3196. .teambar button,
  3197. .teambar button:hover {
  3198. border-color: var(--main);
  3199. background: var(--lightbg3);
  3200. color: var(--lighttext);
  3201. border-radius: 0
  3202. }
  3203.  
  3204. .dark .teambar button {
  3205. border-color: var(--main);
  3206. background: var(--darkbg3);
  3207. color: var(--darktext);
  3208. }
  3209.  
  3210. .dark .teambar button:hover,
  3211. .dark .teambar button:focus-visible{
  3212. border-color: var(--main);
  3213. background: var(--darkbg3);
  3214. color: var(--darktext);
  3215. box-shadow: inset 0 0 0 22px var(--main-50a);
  3216. outline: none;
  3217. opacity: 1
  3218. }
  3219.  
  3220. /*disabled button*/
  3221.  
  3222. .teambar button:disabled,
  3223. .teambar button:disabled:hover,
  3224. .teambar button:disabled:active,
  3225. .teambar button:focus-visible {
  3226. border-color: var(--main);
  3227. background: var(--lightbg3);
  3228. color: var(--lighttext);
  3229. opacity: 0.5;
  3230. outline: none
  3231. }
  3232.  
  3233. .dark .teambar button:disabled,
  3234. .dark .teambar button:disabled:hover,
  3235. .dark .teambar button:disabled:active {
  3236. border-color: var(--main);
  3237. background: var(--darkbg3);
  3238. color: var(--darktext);
  3239. box-shadow: inset 0 0 0 22px var(--main-50a)
  3240. }
  3241.  
  3242. /********************\
  3243. -Teambuilder Results/Utilichart-
  3244. \********************/
  3245. /*this appears in chatrooms as the thing that appears when you /dt something*/
  3246.  
  3247. /*headers for format and other stuff*/
  3248.  
  3249. .utilichart h3,
  3250. .dexentry h3,
  3251. .resultheader h3 {
  3252. color: var(--lighttext);
  3253. box-shadow: 0 0 5px var(--main);
  3254. text-shadow: none;
  3255. background: var(--lightbg3);
  3256. border-color: var(--main);
  3257. border-right: 1px solid var(--main);
  3258. border-radius: 5px;
  3259. margin-left: 5px;
  3260. margin-right: 5px;
  3261. text-align: center
  3262. }
  3263.  
  3264. .teambuilder-results,
  3265. .dark .teambuilder-results {
  3266. background: initial
  3267. }
  3268.  
  3269. .teambuilder-results .resultheader h3 {
  3270. border-right: 1px solid var(--main);
  3271. }
  3272.  
  3273. .dark .utilichart h3,
  3274. .dark .dexentry h3,
  3275. .dark .resultheader h3 {
  3276. color: var(--darktext);
  3277. box-shadow: 0 0 5px var(--main);
  3278. text-shadow: none;
  3279. background: var(--darkbg3);
  3280. border-color: var(--main);
  3281. border-right: 1px solid var(--main);
  3282. }
  3283.  
  3284. /*buttons*/
  3285.  
  3286. .teambuilder-results .result a {
  3287. transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s
  3288. }
  3289.  
  3290. .teambuilder-results .result a:hover, /*hover effect*/
  3291. .teambuilder-results .result a.hover /*guessed item*/ {
  3292. background: var(--lightbg2);
  3293. border-color: var(--main-75a)
  3294. }
  3295.  
  3296. .teambuilder-results .result a.cur /*currently selected item*/ {
  3297. background: var(--lightbg2);
  3298. border-color: var(--main-75a)
  3299. }
  3300.  
  3301. .teambuilder-results .result a.cur:hover, /*hover effect for the above*/
  3302. .teambuilder-results .result a.cur.hover /*guessed and currently selected item*/ {
  3303. background: var(--lightbg2);
  3304. border-color: var(--main);
  3305. box-shadow: 0 0 3px var(--main)
  3306. }
  3307.  
  3308. .dark .teambuilder-results .result a:hover,
  3309. .dark .teambuilder-results .result a.hover {
  3310. background: var(--darkbg2);
  3311. border-color: var(--main-75a)
  3312. }
  3313.  
  3314. .dark .teambuilder-results .result a.cur {
  3315. background: var(--darkbg2);
  3316. border-color: var(--main-75a)
  3317. }
  3318.  
  3319. .dark .teambuilder-results .result a.cur:hover,
  3320. .dark .teambuilder-results .result a.cur.hover {
  3321. background: var(--darkbg2);
  3322. border-color: var(--main);
  3323. box-shadow: 0 0 3px var(--main)
  3324. }
  3325.  
  3326. .dark .utilichart .cur .col,
  3327. .dark .utilichart a:hover .col {
  3328. color: var(--darktext)
  3329. }
  3330.  
  3331. /*text*/
  3332.  
  3333. .utilichart .labelcol em,
  3334. .utilichart .widelabelcol em,
  3335. .utilichart .pplabelcol em,
  3336. .utilichart .statcol em,
  3337. .utilichart .bstcol em {
  3338. color: var(--lighttext2)
  3339. }
  3340.  
  3341. .dark .utilichart .labelcol em,
  3342. .dark .utilichart .widelabelcol em,
  3343. .dark .utilichart .pplabelcol em,
  3344. .dark .utilichart .statcol em,
  3345. .dark .utilichart .bstcol em {
  3346. color: var(--darktext2)
  3347. }
  3348.  
  3349. .utilichart .col {
  3350. color: var(--lighttext)
  3351. }
  3352.  
  3353. .dark .utilichart .col {
  3354. color: var(--darktext)
  3355. }
  3356.  
  3357. /*sorting row*/
  3358. /*the bar that sorts mons and moves by name, type, category, etc*/
  3359.  
  3360. .utilichart .sortrow {
  3361. margin-right: 5px;
  3362. margin-left: 5px;
  3363. margin-top: 2px;
  3364. background: var(--lightbg3);
  3365. border: 1px solid var(--main);
  3366. color: var(--lighttext);
  3367. box-shadow: 0 0 5px var(--main);
  3368. border-radius: 5px
  3369. }
  3370.  
  3371. .utilichart .sortcol {
  3372. border-right: 1px solid var(--main);
  3373. color: var(--lighttext);
  3374. transition: background-color 0.1s
  3375. }
  3376.  
  3377. .utilichart .statsortcol {
  3378. width: 26px;
  3379. text-align: center
  3380. }
  3381.  
  3382. .utilichart .sortcol:hover,
  3383. .utilichart .sortcol.cur,
  3384. .utilichart .sortcol.numsortcol.cur,
  3385. .utilichart .sortcol.numsortcol.cur:hover,
  3386. .utilichart .sortcol:focus-visible {
  3387. background: var(--main-50a);
  3388. outline: none
  3389. }
  3390.  
  3391. .dark .utilichart .sortrow {
  3392. background: var(--darkbg3);
  3393. color: var(--darktext)
  3394. }
  3395.  
  3396. .dark .utilichart .sortcol {
  3397. color: var(--darktext)
  3398. }
  3399.  
  3400. /*"Filter" and "Illegal" text*/
  3401.  
  3402. .utilichart .filtercol em {
  3403. border-color: var(--green);
  3404. color: var(--green);
  3405. box-shadow: inset 0 0 3px var(--green)
  3406. }
  3407.  
  3408. .utilichart .illegalcol em {
  3409. border-color: var(--red);
  3410. color: var(--red);
  3411. box-shadow: inset 0 0 3px var(--red)
  3412. }
  3413.  
  3414. /*Filters*/
  3415.  
  3416. .utilichart .filter,
  3417. .searchboxwrapper .filter {
  3418. color: var(--lighttext);
  3419. background: var(--lightbg3);
  3420. border-color: var(--main);
  3421. box-shadow: 0 0 5px var(--main)
  3422. }
  3423.  
  3424. .dark .utilichart .filter,
  3425. .dark .searchboxwrapper .filter {
  3426. color: var(--darktext);
  3427. background: var(--darkbg3);
  3428. }
  3429.  
  3430. .utilichart .filter:hover,
  3431. .searchboxwrapper .filter:hover {
  3432. color: var(--lighttext2);
  3433. }
  3434.  
  3435. .dark .utilichart .filter:hover,
  3436. .dark .searchboxwrapper .filter:hover {
  3437. color: var(--darktext2)
  3438. }
  3439.  
  3440. .utilichart .filter i,
  3441. .searchboxwrapper .filter i {
  3442. color: var(--lighttext2)
  3443. }
  3444.  
  3445. .dark .utilichart .filter i,
  3446. .dark .searchboxwrapper .filter i {
  3447. color: var(--darktext2)
  3448. }
  3449.  
  3450. .utilichart .filter:hover i,
  3451. .searchboxwrapper .filter:hover i {
  3452. color: var(--main)
  3453. }
  3454.  
  3455. /*the text that changes color when searching up something*/
  3456.  
  3457. .utilichart b {
  3458. color: var(--main)
  3459. }
  3460.  
  3461. /*the text next to filters in the teambuilder*/
  3462.  
  3463. small[style="color: #888"] {
  3464. color: var(--lighttext2) !important
  3465. }
  3466.  
  3467. .dark small[style="color: #888"] {
  3468. color: var(--darktext2) !important
  3469. }
  3470.  
  3471. /***********************************************\
  3472. -------------------------------------------------
  3473. -POPUPS-
  3474. -------------------------------------------------
  3475. \***********************************************/
  3476.  
  3477. /********************\
  3478. -Background, Text, Shadow, And Animation-
  3479. \********************/
  3480.  
  3481. .ps-popup {
  3482. border-color: var(--main);
  3483. color: var(--lighttext);
  3484. box-shadow: 0 0 3px var(--main), 0 0 15px var(--main);
  3485. animation: popup 0.1s;
  3486. }
  3487.  
  3488. .dark .ps-popup {
  3489. border-color: var(--main);
  3490. color: var(--darktext);
  3491. box-shadow: 0 0 3px var(--main), 0 0 15px var(--main)
  3492. }
  3493.  
  3494. /*animation*/
  3495.  
  3496. @keyframes popup {
  3497. 0%{transform: scale(0.98)}
  3498. 100%{transform: scale(1)}
  3499. }
  3500.  
  3501. /*muted sound text*/
  3502.  
  3503. .effect-volume em,
  3504. .music-volume em,
  3505. .notif-volume em {
  3506. color: var(--lighttext2)
  3507. }
  3508.  
  3509. .dark .effect-volume em,
  3510. .dark .music-volume em,
  3511. .dark .notif-volume em {
  3512. color: var(--darktext2)
  3513. }
  3514.  
  3515. /*error text*/
  3516.  
  3517. .ps-popup p.error {
  3518. color: var(--red)
  3519. }
  3520.  
  3521. /*some headers*/
  3522.  
  3523. .popupmenu h3 {
  3524. color: var(--main)
  3525. }
  3526.  
  3527. /*user status and rank text*/
  3528.  
  3529. .usergroup {
  3530. color: var(--lighttext2)
  3531. }
  3532.  
  3533. .dark .usergroup {
  3534. color: var(--darktext2)
  3535. }
  3536.  
  3537. .userdetails .offline {
  3538. color: var(--red)
  3539. }
  3540.  
  3541. /*the rank symbol next to room links*/
  3542.  
  3543. small[style="color: #888; font-size: 100%"] {
  3544. color: var(--lighttext2) !important
  3545. }
  3546.  
  3547. .dark small[style="color: #888; font-size: 100%"] {
  3548. color: var(--darktext2) !important
  3549. }
  3550.  
  3551. /*the arrows in the popup that appears when moving a pokemon's spot in its team*/
  3552.  
  3553. .popupmenu i {
  3554. color: var(--lighttext2)
  3555. }
  3556.  
  3557. .dark .popupmenu i {
  3558. color: var(--darktext2)
  3559. }
  3560.  
  3561. /********************\
  3562. -Format And Team Buttons-
  3563. \********************/
  3564.  
  3565. /*normal buttons*/
  3566.  
  3567. .popupmenu button {
  3568. border-width: 0 0 0 3px;
  3569. border-style: solid;
  3570. border-radius: 0;
  3571. transition: background-color 0.3s, border-color 0.3s;
  3572. color: var(--lighttext);
  3573. margin: 0 0 0 2px;
  3574. }
  3575.  
  3576. .popupmenu button:hover,
  3577. .popupmenu button[name="selectTeam"]:focus-visible,
  3578. .popupmenu button[name="selectFormat"]:focus-visible,
  3579. .popupmenu button[name="moveHere"]:focus-visible {
  3580. border-color: var(--main);
  3581. background: var(--grey-30a);
  3582. color: var(--lighttext);
  3583. outline: none
  3584. }
  3585.  
  3586. .popupmenu button[name="selectTeam"]:focus-visible,
  3587. .popupmenu button[name="selectFormat"]:focus-visible,
  3588. .popupmenu button[name="moveHere"]:focus-visible {
  3589. transition: none
  3590. }
  3591.  
  3592. .dark .popupmenu button {
  3593. color: var(--darktext)
  3594. }
  3595.  
  3596. .dark .popupmenu button:hover,
  3597. .dark .popupmenu button[name="selectTeam"]:focus-visible,
  3598. .dark .popupmenu button[name="selectFormat"]:focus-visible,
  3599. .dark .popupmenu button[name="moveHere"]:focus-visible {
  3600. border-color: var(--main);
  3601. background: var(--grey-30a);
  3602. color: var(--darktext)
  3603. }
  3604.  
  3605. /*currently selected option buttons*/
  3606.  
  3607. .popupmenu button.sel {
  3608. border-color: var(--main);
  3609. background: var(--grey-30a)
  3610. }
  3611.  
  3612. .popupmenu button.sel:hover,
  3613. .popupmenu button.sel[name="selectTeam"]:focus-visible,
  3614. .popupmenu button.sel[name="selectFormat"]:focus-visible {
  3615. border-color: var(--main);
  3616. background: var(--grey-45a);
  3617. color: var(--lighttext)
  3618. }
  3619.  
  3620. .dark .popupmenu button.sel:hover,
  3621. .dark .popupmenu button.sel[name="selectTeam"]:focus-visible,
  3622. .dark .popupmenu button.sel[name="selectFormat"]:focus-visible {
  3623. border-color: var(--main);
  3624. background: var(--grey-45a);
  3625. color: var(--darktext)
  3626. }
  3627.  
  3628. /********************\
  3629. -Avatar, Sprite, And Background Buttons-
  3630. \********************/
  3631.  
  3632. /*normal state*/
  3633.  
  3634. .avatarlist button,
  3635. .formlist button,
  3636. .bglist button {
  3637. color: var(--lighttext);
  3638. transition: border-color 0.2s, box-shadow 0.2s
  3639. }
  3640.  
  3641. .dark .avatarlist button,
  3642. .dark .formlist button,
  3643. .dark .bglist button {
  3644. color: var(--darktext)
  3645. }
  3646.  
  3647. /*currently selected button*/
  3648.  
  3649. .avatarlist button.cur,
  3650. .formlist button.cur,
  3651. .bglist button.cur {
  3652. border-color: var(--main)
  3653. }
  3654.  
  3655. /*hover state*/
  3656.  
  3657. .avatarlist button:hover,
  3658. .avatarlist button.cur:hover,
  3659. .bglist button:hover,
  3660. .bglist button.cur:hover,
  3661. .formlist button:hover,
  3662. .formlist button.cur:hover,
  3663. .avatarlist button:focus-visible,
  3664. .avatarlist button.cur:focus-visible,
  3665. .bglist button:focus-visible,
  3666. .bglist button.cur:focus-visible,
  3667. .formlist button:focus-visible,
  3668. .formlist button.cur:focus-visible {
  3669. border-color: var(--main);
  3670. background-color: transparent;
  3671. box-shadow: 0 0 5px var(--main);
  3672. outline: none
  3673. }
  3674.  
  3675. .avatarlist button:focus-visible,
  3676. .avatarlist button.cur:focus-visible {
  3677. transition: none
  3678. }
  3679.  
  3680. .dark .avatarlist button:hover,
  3681. .dark .avatarlist button.cur:hover,
  3682. .dark .bglist button:hover,
  3683. .dark .bglist button.cur:hover {
  3684. border-color: var(--main);
  3685. background-color: transparent;
  3686. color: var(--darktext)
  3687. }
  3688.  
  3689. /********************\
  3690. -Tab Buttons-
  3691. \********************/
  3692.  
  3693. /*normal buttons*/
  3694.  
  3695. .tablist .button {
  3696. background: var(--lightbg3);
  3697. border-color: var(--main);
  3698. color: var(--lighttext);
  3699. margin-bottom: 2px;
  3700. box-shadow: none;
  3701. transition: opacity 0.3s;
  3702. transform: none
  3703. }
  3704.  
  3705. .tablist .button:hover {
  3706. opacity: 0.5;
  3707. }
  3708.  
  3709. .dark .tablist .button {
  3710. background: var(--darkbg3);
  3711. color: var(--darktext);
  3712. box-shadow: none
  3713. }
  3714.  
  3715. /*currently opened tab buttons*/
  3716.  
  3717. .tablist .button.cur {
  3718. opacity: 0.5;
  3719. border-color: var(--main);
  3720. color: var(--lighttext);
  3721. background: var(--lightbg3);
  3722. }
  3723.  
  3724. .dark .tablist .button.cur {
  3725. border-color: var(--main);
  3726. color: var(--darktext);
  3727. background: var(--darkbg3);
  3728. }
  3729.  
  3730. /*unread message and notification tabs*/
  3731.  
  3732. .tablist a.button.subtle-notifying {
  3733. color: var(--notif-light)
  3734. }
  3735.  
  3736. .tablist a.button.notifying {
  3737. background: var(--notif-light);
  3738. border-color: transparent;
  3739. color: var(--black)
  3740. }
  3741.  
  3742. .dark .tablist a.button.subtle-notifying {
  3743. color: var(--notif-dark)
  3744. }
  3745.  
  3746. .dark .tablist a.button.notifying {
  3747. background: var(--notif-dark);
  3748. border-color: transparent;
  3749. color: var(--black)
  3750. }
  3751.  
  3752. /***********************************************\
  3753. -------------------------------------------------
  3754. -BATTLE LOG/CHAT-
  3755. -------------------------------------------------
  3756. \***********************************************/
  3757.  
  3758. /********************\
  3759. -Background And Text-
  3760. \********************/
  3761.  
  3762. .battle-log {
  3763. background: transparent;
  3764. color: var(--lighttext);
  3765. border-color: var(--main);
  3766. }
  3767.  
  3768. .ps-room.ps-room-opaque {
  3769. background: var(--lightbg3);
  3770. color: var(--lighttext)
  3771. }
  3772.  
  3773. .dark .battle-log {
  3774. background: transparent;
  3775. color: var(--darktext)
  3776. }
  3777.  
  3778. .dark .ps-room.ps-room-opaque {
  3779. background: var(--darkbg3);
  3780. color: var(--darktext)
  3781. }
  3782.  
  3783. .battle-history {
  3784. margin-top: 2px
  3785. }
  3786.  
  3787. /*for the symbol before some text*/
  3788.  
  3789. .battle-history small::before {
  3790. content: "» ";
  3791. }
  3792.  
  3793. /********************\
  3794. -Spacing Lines-
  3795. \********************/
  3796.  
  3797. .spacer {
  3798. background-image: linear-gradient(90deg, transparent, var(--main-75a) 15% 85%, transparent);
  3799. height: 1px;
  3800. margin: 6px 10px 6px 0
  3801. }
  3802.  
  3803. .message-log h2+.spacer {
  3804. display: none
  3805. }
  3806.  
  3807. /********************\
  3808. -Turn Headers-
  3809. \********************/
  3810.  
  3811. .message-log h2 {
  3812. background: var(--lightbg3);
  3813. box-shadow: 0 0 5px var(--main);
  3814. border-color: var(--main);
  3815. border-right: 1px solid var(--main);
  3816. margin-right: 10px;
  3817. border-bottom-right-radius: 30px;
  3818. margin-top: -7px
  3819. }
  3820.  
  3821. .dark .message-log h2 {
  3822. background: var(--darkbg3);
  3823. }
  3824.  
  3825. /********************\
  3826. -Miscellaneous Text-
  3827. \********************/
  3828.  
  3829. /*dark mode message text*/
  3830.  
  3831. .dark .battle-log .chat>em {
  3832. color: var(--darktext)
  3833. }
  3834.  
  3835. /*"Rated Battle" text*/
  3836.  
  3837. .message-log .rated strong {
  3838. color: var(--white);
  3839. background: var(--main);
  3840. }
  3841.  
  3842. /*light text (user leave and join text)*/
  3843.  
  3844. .chat small {
  3845. color: var(--lighttext2)
  3846. }
  3847.  
  3848. .dark .chat small {
  3849. color: var(--darktext2)
  3850. }
  3851.  
  3852. /*darker text (for elo stuff and some stuff in the beginning of the battle log)*/
  3853.  
  3854. .chat>strong,
  3855. .dark .chat>strong {
  3856. color: var(--main)
  3857. }
  3858.  
  3859. /*team text at the beginning*/
  3860.  
  3861. .battle-log .chat em[style="color:#445566;display:block;"] {
  3862. color: var(--main) !important
  3863. }
  3864.  
  3865. /********************\
  3866. -Text Input Area-
  3867. \********************/
  3868.  
  3869. .battle-log-add {
  3870. background: var(--lightbg3);
  3871. color: var(--lighttext);
  3872. border-color: var(--main)
  3873. }
  3874.  
  3875. .dark .battle-log-add {
  3876. background: var(--darkbg3);
  3877. color: var(--darktext);
  3878. }
  3879.  
  3880. /***********************************************\
  3881. -------------------------------------------------
  3882. -BATTLE CONTROLS-
  3883. -------------------------------------------------
  3884. \***********************************************/
  3885.  
  3886. /********************\
  3887. -Background And Text-
  3888. \********************/
  3889.  
  3890. .ps-room .battle-controls {
  3891. background: transparent
  3892. }
  3893.  
  3894. .dark .battle-controls {
  3895. color: var(--darktext)
  3896. }
  3897.  
  3898. /*"what will ______ do?" text*/
  3899.  
  3900. .battle-controls .whatdo {
  3901. color: var(--lighttext2)
  3902. }
  3903.  
  3904. .battle-controls .whatdo small {
  3905. border-color: currentcolor
  3906. }
  3907.  
  3908. .dark .whatdo {
  3909. color: var(--darktext2)
  3910. }
  3911.  
  3912. .battle-controls .whatdo small.weak {
  3913. color: hsl(60, 100%, 37%);
  3914. border-color: currentcolor
  3915. }
  3916.  
  3917. .battle-controls .whatdo small.critical {
  3918. color: hsl(0, 100%, 37%);
  3919. border-color: currentcolor
  3920. }
  3921.  
  3922. /********************\
  3923. -Timer Button-
  3924. \********************/
  3925.  
  3926. .timerbutton.timerbutton-on,
  3927. .timerbutton.timerbutton-on:hover {
  3928. color: var(--red);
  3929. font-weight: bold;
  3930. }
  3931.  
  3932. .dark .timerbutton.timerbutton-on {
  3933. text-shadow: 0 1px 2px var(--shading), 0 1px 2px var(--shading)
  3934. }
  3935.  
  3936. /********************\
  3937. -Switch And Attack Text-
  3938. \********************/
  3939. /*these are actually buttons*/
  3940.  
  3941. .moveselect button,
  3942. .switchselect button {
  3943. visibility: hidden
  3944. }
  3945.  
  3946. /********************\
  3947. -Turn Buttons-
  3948. \********************/
  3949. /*this is just to space out the buttons*/
  3950.  
  3951. .battle-controls p .button {
  3952. margin-right: 2px
  3953. }
  3954.  
  3955. /********************\
  3956. -Move Buttons-
  3957. \********************/
  3958.  
  3959. /*[[movebtn-key]]*/
  3960.  
  3961. /********************\
  3962. -Mega Evolution And Z-Move Button-
  3963. \********************/
  3964.  
  3965. .megaevo {
  3966. border-color: var(--main);
  3967. outline: 1px solid var(--main);
  3968. outline-offset: -1px;
  3969. border-radius: 0;
  3970. background: var(--lightbg3);
  3971. box-shadow: 0 0 7px var(--main-50a), inset 0 0 5px var(--main-50a);
  3972. color: var(--main);
  3973. text-shadow: 0 0 3px var(--main-75a);
  3974. text-transform: uppercase;
  3975. transition: box-shadow 0.5s, background-color 0.5s, color 0.5s;
  3976. top: 9px;
  3977. }
  3978.  
  3979. .megaevo:hover {
  3980. background: var(--main);
  3981. color: var(--white);
  3982. border-color: var(--main);
  3983. box-shadow: 0 0 10px var(--main-75a), inset 0 0 var(--main-50a), 0 0 30px var(--main-75a);
  3984. outline-offset: 15px;
  3985. outline-color: transparent;
  3986. transition: outline 0.5s, outline-offset 0.5s, background-color 0.5s, box-shadow 0.5s, color 0.5s
  3987. }
  3988.  
  3989. .dark .megaevo {
  3990. background: var(--darkbg3);
  3991. color: var(--main);
  3992. }
  3993.  
  3994. .dark .megaevo:hover {
  3995. background: var(--main);
  3996. color: var(--white);
  3997. }
  3998.  
  3999. /********************\
  4000. -Switch Buttons-
  4001. \********************/
  4002.  
  4003. .switchmenu button {
  4004. color: var(--lighttext);
  4005. border-color: var(--main);
  4006. background: var(--lightbg3);
  4007. box-shadow: 0 2px 3px var(--shading);
  4008. transition: transform 0.1s
  4009. }
  4010.  
  4011. .switchmenu button:active {
  4012. background: var(--lightbg3)
  4013. }
  4014.  
  4015. .switchmenu button:hover,
  4016. .switchmenu button:focus-visible {
  4017. transform: translateY(1px);
  4018. border-color: var(--main);
  4019. background: var(--lightbg3);
  4020. outline: none
  4021. }
  4022.  
  4023. .switchmenu button.disabled,
  4024. .switchmenu button:disabled {
  4025. border-color: var(--main) !important;
  4026. background: var(--lightbg3) !important;
  4027. color: var(--lighttext) !important;
  4028. box-shadow: 0 2px 3px var(--shading) !important;
  4029. opacity: 0.5;
  4030. transform: initial
  4031. }
  4032.  
  4033. .dark .switchmenu button {
  4034. color: var(--darktext);
  4035. background: var(--darkbg3);
  4036. box-shadow: inset 0 1px 2px var(--highlight)
  4037. }
  4038.  
  4039. .dark .switchmenu button.disabled,
  4040. .dark .switchmenu button:disabled {
  4041. background: var(--darkbg3) !important;
  4042. color: var(--darktext) !important;
  4043. box-shadow: inset 0 1px 2px var(--highlight) !important;
  4044. }
  4045.  
  4046. /***********************************************\
  4047. -------------------------------------------------
  4048. -BATTLE AREA-
  4049. -------------------------------------------------
  4050. \***********************************************/
  4051.  
  4052. /********************\
  4053. -Bigger Battle Space-
  4054. \********************/
  4055.  
  4056. .battle {
  4057. padding-top: 50px
  4058. }
  4059.  
  4060. .ps-room .battle-controls {
  4061. margin-top: 50px
  4062. }
  4063.  
  4064. /********************\
  4065. -Bottom Border-
  4066. \********************/
  4067.  
  4068. .battle {
  4069. border-color: var(--main)
  4070. }
  4071.  
  4072. /********************\
  4073. -Battle Background-
  4074. \********************/
  4075.  
  4076. .backdrop {
  4077. opacity: 1 !important;
  4078. background: url("/*[[battlebg-key]]*/") !important;
  4079. background-size: cover !important;
  4080. width: /*[[battlebg-width-key]]*/;
  4081. height: /*[[battlebg-height-key]]*/;
  4082. margin-top: /*[[battlebg-margintop-key]]*/;
  4083. margin-left: /*[[battlebg-marginleft-key]]*/
  4084. }
  4085.  
  4086. /********************\
  4087. -Effect Backgrounds-
  4088. \********************/
  4089.  
  4090. .background {
  4091. top: -50px
  4092. }
  4093.  
  4094. /********************\
  4095. -Weathers And Terrains-
  4096. \********************/
  4097.  
  4098. .weather {
  4099. margin-top: -50px;
  4100. color: var(--black);
  4101. }
  4102.  
  4103. /*rain (from https://play.pokemonshowdown.com/fx/ though i dont know where the imgur link is from)*/
  4104.  
  4105. .rainweather,
  4106. .raindanceweather {
  4107. background: url(https://i.imgur.com/Ikqq8Jg.gif) no-repeat center;
  4108. background-size: cover;
  4109. color: #00b3ff;
  4110. }
  4111.  
  4112. /*sand (from https://33kk.github.io/uso-archive/?style=180579)*/
  4113.  
  4114. .sandstormweather {
  4115. background: url(https://pkmn.pro/resources/sand-v4.gif) no-repeat center;
  4116. background-size: cover;
  4117. color: #9f8720;
  4118. }
  4119.  
  4120. /*sun (from https://play.pokemonshowdown.com/fx/ though i dont know where the imgur link is from)*/
  4121.  
  4122. .sunweather,
  4123. .sunnydayweather {
  4124. background: url(http://i.imgur.com/DNMtOWR.gif) no-repeat center;
  4125. background-size: cover;
  4126. color: #ff6800;
  4127. }
  4128.  
  4129. /*hail (from https://play.pokemonshowdown.com/fx/ though i dont know where the imgur link is from)*/
  4130.  
  4131. .hailweather {
  4132. background: url(https://i.imgur.com/l2zvHhu.gif) no-repeat center;
  4133. background-size: cover;
  4134. color: #00a2e6;
  4135. }
  4136.  
  4137. /*desolate land/harsh sun (from https://33kk.github.io/uso-archive/?style=180579)*/
  4138.  
  4139. .desolatelandweather {
  4140. background: url(https://pkmn.pro/resources/sun-v4-3.gif) no-repeat center;
  4141. background-size: cover;
  4142. color: red;
  4143. }
  4144.  
  4145. /*primordial sea/heavy rain (from https://33kk.github.io/uso-archive/?style=180579)*/
  4146.  
  4147. .primordialseaweather {
  4148. background: url(https://i.imgur.com/szuvazK.gif);
  4149. background-size: cover;
  4150. color: blue
  4151. }
  4152.  
  4153. /*delta stram/strong winds (from http://freestyler.ws/style/122539/pok-mon-showdown-oras-theme-bidoofscrazyvideos)*/
  4154.  
  4155. .deltastreamweather {
  4156. background: url(https://imgur.com/wAgItk9.gif) no-repeat center;
  4157. background-size: cover;
  4158. color: #737373;
  4159. }
  4160.  
  4161. /*misty terrain (from me and the normal terrain image, using ezgif)*/
  4162.  
  4163. .mistyterrainweather {
  4164. background: url(https://i.imgur.com/BBahRNY.gif) no-repeat;
  4165. background-size: cover;
  4166. }
  4167.  
  4168. /*grassy terrain (from me and the normal terrain image, using ezgif)*/
  4169.  
  4170. .grassyterrainweather {
  4171. background: url(https://i.imgur.com/ZaCtKSS.gif) no-repeat;
  4172. background-size: cover;
  4173. }
  4174.  
  4175. /*electric terrain (from me and the normal terrain image, using ezgif)*/
  4176.  
  4177. .electricterrainweather {
  4178. background: url(https://imgur.com/6EA6phl.gif) no-repeat;
  4179. background-size: cover;
  4180. }
  4181.  
  4182. /*psychic terrain (from me and the normal terrain image, using ezgif)*/
  4183.  
  4184. .psychicterrainweather {
  4185. background: url(https://i.imgur.com/5Wh6z5f.gif) no-repeat;
  4186. background-size: cover;
  4187. }
  4188.  
  4189. /*trick room or gravity (from https://www.youtube.com/watch?v=0tj3U83QP0A)*/
  4190.  
  4191. .pseudoweather,
  4192. .trickroomweather {
  4193. background: url(https://i.imgur.com/ofZtPSI.gif) no-repeat;
  4194. background-size: cover;
  4195. }
  4196.  
  4197. /*weather text*/
  4198.  
  4199. .weather em {
  4200. text-shadow: 1px 1px var(--white), -1px 1px var(--white), 1px -1px var(--white), -1px -1px var(--white), 0 0 7px var(--shading);
  4201. font-weight: bold;
  4202. font-size: 10pt;
  4203. letter-spacing: 0.3px
  4204. }
  4205.  
  4206. .pseudoweather + .weather em {
  4207. color: #48707f
  4208. }
  4209.  
  4210. .mistyterrainweather + .weather em {
  4211. color: #fd9696
  4212. }
  4213.  
  4214. .grassyterrainweather + .weather em {
  4215. color: #18e25b
  4216. }
  4217.  
  4218. .electricterrainweather + .weather em {
  4219. color: #ada334
  4220. }
  4221.  
  4222. .psychicterrainweather + .weather em {
  4223. color: #ae00ff
  4224. }
  4225.  
  4226. /********************\
  4227. -Rightbar, Leftbar, And Trainers-
  4228. \********************/
  4229.  
  4230. /*rightbar and leftbar*/
  4231.  
  4232. .leftbar,
  4233. .rightbar {
  4234. background: transparent;
  4235. border: none;
  4236. color: var(--white);
  4237. text-shadow: 0 0 4px var(--shading), 0 0 4px var(--shading)
  4238. }
  4239.  
  4240. .trainer strong {
  4241. font-size: 8.5px;
  4242. }
  4243.  
  4244. /*trainer opacity*/
  4245.  
  4246. .trainer div {
  4247. opacity: 1
  4248. }
  4249.  
  4250. /*elo*/
  4251.  
  4252. .rightbar .trainersprite::before {
  4253. content: attr(title);
  4254. color: var(--white);
  4255. font-size: 8.5px;
  4256. position: relative;
  4257. background: var(--main-75a);
  4258. border-radius: 7px;
  4259. padding: 2px 5px;
  4260. text-shadow: none;
  4261. font-weight: bold
  4262. }
  4263.  
  4264. /********************\
  4265. -Trainer Positions-
  4266. \********************/
  4267.  
  4268. /*[[trainer-pos-key]]*/
  4269.  
  4270. /********************\
  4271. -Turn Marker-
  4272. \********************/
  4273.  
  4274. /*[[turn-key]]*/
  4275.  
  4276. /********************\
  4277. -Message Bar-
  4278. \********************/
  4279. /*the thing at the bottom that shows the battle log*/
  4280.  
  4281. /*[[message-bar-key]]*/
  4282.  
  4283. /*for the bigger text*/
  4284.  
  4285. .messagebar strong {
  4286. color: var(--white)
  4287. }
  4288.  
  4289. /*for the symbol before some text*/
  4290.  
  4291. .messagebar small::before {
  4292. content: "» ";
  4293. }
  4294.  
  4295. /********************\
  4296. -Tooltips-
  4297. \********************/
  4298. /*the things that appear when you hover over a mon*/
  4299.  
  4300. /*background and borders*/
  4301.  
  4302. #tooltipwrapper .tooltip {
  4303. border-color: var(--main);
  4304. box-shadow: 0 0 3px var(--main), 0 0 15px var(--main);
  4305. animation: popup 0.1s;
  4306. }
  4307.  
  4308. #tooltipwrapper .tooltip h2,
  4309. #tooltipwrapper .tooltip p.section {
  4310. border-color: var(--main)
  4311. }
  4312.  
  4313. /*locked mode*/
  4314.  
  4315. #tooltipwrapper.tooltip-locked .tooltip {
  4316. border-color: var(--main);
  4317. box-shadow: 0 0 3px var(--main), 0 0 15px var(--main);
  4318. }
  4319.  
  4320. /*text*/
  4321.  
  4322. #tooltipwrapper {
  4323. color: var(--lighttext)
  4324. }
  4325.  
  4326. .dark #tooltipwrapper {
  4327. color: var(--darktext)
  4328. }
  4329.  
  4330. .stat-boosted {
  4331. color: var(--green)
  4332. }
  4333.  
  4334. .stat-lowered {
  4335. color: var(--red)
  4336. }
  4337.  
  4338. /********************\
  4339. -Healthbars-
  4340. \********************/
  4341.  
  4342. /*background and hp text*/
  4343.  
  4344. .statbar .hpbar {
  4345. border-color: var(--black);
  4346. background: var(--black);
  4347. border-radius: 0;
  4348. transform: skewX(-15deg)
  4349. }
  4350.  
  4351. .statbar .hpbar .hptext {
  4352. background: var(--black);
  4353. color: var(--white);
  4354. text-shadow: none;
  4355. }
  4356.  
  4357. .statbar .hpbar .hptextborder {
  4358. border-color: transparent
  4359. }
  4360.  
  4361. /*status*/
  4362.  
  4363. .status {
  4364. margin-top: 4px;
  4365. transform: skewX(15deg)
  4366. }
  4367.  
  4368. /*pokemon name*/
  4369.  
  4370. .statbar strong {
  4371. color: var(--black);
  4372. text-shadow: 1px 1px var(--white), -1px 1px var(--white), 1px -1px var(--white), -1px -1px var(--white), 0 0 7px var(--shading)
  4373. }
  4374.  
  4375. /*health*/
  4376.  
  4377. .statbar .hpbar .hp,
  4378. .statbar .hpbar .prevhp {
  4379. border-radius: 0;
  4380. }
  4381.  
  4382. .statbar .hpbar .hp {
  4383. background: linear-gradient(hsl(120, 100%, 37%), hsl(120, 100%, 50%));
  4384. border: none;
  4385. padding: 2px 1px 2px 0;
  4386. }
  4387.  
  4388. .statbar .hpbar .prevhp {
  4389. background: linear-gradient(hsl(120, 100%, 37%, 0.3), hsl(120, 100%, 50%, 0.3));
  4390. }
  4391.  
  4392. .statbar .hpbar .hp-yellow {
  4393. background: linear-gradient(hsl(60, 100%, 37%), hsl(60, 100%, 50%));
  4394. }
  4395.  
  4396. .statbar .hpbar .prevhp-yellow {
  4397. background: linear-gradient(hsl(60, 100%, 37%, 0.3), hsl(60, 100%, 50%, 0.3));
  4398. }
  4399.  
  4400. .statbar .hpbar .hp-red {
  4401. background: linear-gradient(hsl(0, 100%, 37%), hsl(0, 100%, 50%));
  4402. }
  4403.  
  4404. .statbar .hpbar .prevhp-red {
  4405. background: linear-gradient(hsl(0, 100%, 37%, 0.3), hsl(0, 100%, 50%, 0.3));
  4406. }
  4407.  
  4408. /*this is just to prevent there from being a little bit of red at the end when a mon has 0 hp*/
  4409.  
  4410. .statbar .hpbar .hp-red[style="width: 0px; border-right-width: 0px;"] {
  4411. padding-right: 0
  4412. }
  4413.  
  4414. /********************\
  4415. -"Play" Or "Resume" Button-
  4416. \********************/
  4417.  
  4418. .playbutton button {
  4419. visibility: hidden
  4420. }
  4421.  
  4422. .playbutton:last-child button {
  4423. visibility: initial
  4424. }
  4425.  
  4426. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!