ThatOneGuySS' Shell Shockers Theme

ThatOneGuy's official theme for Shell Shockers (v45.0 and up)

  1. // ==UserScript==
  2. // @name ThatOneGuySS' Shell Shockers Theme
  3. // @namespace http://greasyfork.org/
  4. // @version 1.9
  5. // @description ThatOneGuy's official theme for Shell Shockers (v45.0 and up)
  6. // @author ThatOneGuySS
  7. // @match https://algebra.best/*
  8. // @match https://algebra.vip/*
  9. // @match https://biologyclass.club/*
  10. // @match https://deadlyegg.com/*
  11. // @match https://deathegg.world/*
  12. // @match https://egg.dance/*
  13. // @match https://eggboy.club/*
  14. // @match https://eggboy.xyz/*
  15. // @match https://eggcombat.com/*
  16. // @match https://eggfacts.fun/*
  17. // @match https://egghead.institute/*
  18. // @match https://eggisthenewblack.com/*
  19. // @match https://eggsarecool.com/*
  20. // @match https://eggshooter.best/*
  21. // @match https://geometry.best/*
  22. // @match https://geometry.monster/*
  23. // @match https://geometry.pw/*
  24. // @match https://geometry.report/*
  25. // @match https://hardboiled.life/*
  26. // @match https://hardshell.life/*
  27. // @match https://humanorganising.org/*
  28. // @match https://mathactivity.xyz/*
  29. // @match https://mathdrills.info/*
  30. // @match https://mathdrills.life/*
  31. // @match https://mathfun.rocks/*
  32. // @match https://mathgames.world/*
  33. // @match https://math.international/*
  34. // @match https://mathlete.fun/*
  35. // @match https://mathlete.pro/*
  36. // @match https://new.shellshock.io/*
  37. // @match https://overeasy.club/*
  38. // @match https://scrambled.best/*
  39. // @match https://scrambled.tech/*
  40. // @match https://scrambled.today/*
  41. // @match https://scrambled.us/*
  42. // @match https://scrambled.world/*
  43. // @match https://shellshock.io/*
  44. // @match https://shellsocks.com/*
  45. // @match https://shellshockers.club/*
  46. // @match https://shellshockers.site/*
  47. // @match https://shellshockers.us/*
  48. // @match https://shellshockers.world/*
  49. // @match https://shellshockers.xyz/*
  50. // @match https://softboiled.club/*
  51. // @match https://urbanegger.com/*
  52. // @match https://violentegg.club/*
  53. // @match https://violentegg.fun/*
  54. // @match https://yolk.best/*
  55. // @match https://yolk.life/*
  56. // @match https://yolk.quest/*
  57. // @match https://yolk.rocks/*
  58. // @match https://yolk.tech/*
  59. // @match https://yolk.today/*
  60. // @match https://zygote.cafe/*
  61. // @grant none
  62. // ==/UserScript==
  63.  
  64. (function () {
  65. const addScript = () => {
  66. document.title="youtube.com/thatoneguyss"
  67. document.head.innerHTML += `<style>
  68.  
  69.  
  70. /*----------GLOBAL----------*/
  71.  
  72. :root {
  73. --select-border: #777;
  74. --select-focus: blue;
  75. --select-arrow: var(--select-border);
  76. --ss-transparent: #00000000;
  77. --ss-black: #000;
  78. --ss-adblocker-text: #003449;
  79. --ss-white: #FFFFFF;
  80. --ss-offwhite: #FFF3E4;
  81. --ss-yellow0: #F7FFC1;
  82. --ss-yellow: #FAF179;
  83. --ss-yolk0: #ff6060;
  84. --ss-yolk: var(--ss-lightoverlay);
  85. --ss-yolk2: #6c0000;
  86. --ss-red0: #e29092;
  87. --ss-red: #d15354;
  88. --ss-red2: #801919;
  89. --ss-egg-org: #EE2524;
  90. --ss-red-bright: #EF3C39;
  91. --ss-pink: #EC008C;
  92. --ss-pink1: #b9006e;
  93. --ss-pink-light: #ff3aaf;
  94. --ss-pink-dark: #a7098c;
  95. --ss-brown: #fff
  96. --ss-blue00: #000;
  97. --ss-blue0: #9d9d9d;
  98. --ss-blue1: #000;
  99. --ss-blue2: #000;
  100. --ss-blue3: #fff;
  101. --ss-blue4: #780000;
  102. --ss-blue5: #fff;
  103. --ss-blue6: #2e2e2e;
  104. --ss-blue7: #560000;
  105. --ss-blue8: #bc1111;
  106. --ss-green0: #ffffff;
  107. --ss-green1: #606060;
  108. --ss-green2: #000000;
  109. --ss-green-login: #a7a7a7;
  110. --ss-orange1: #F79520;
  111. --ss-vip-blue: #0E7FFF;
  112. --ss-vip-pink: #FF5AF5;
  113. --ss-vip-brown: #9F5600;
  114. --ss-vip-yellow: #FFFC00;
  115. --ss-vip-red: #EE2B2D;
  116. --ss-vip-purple: #40008F;
  117. --ss-vip-gold: linear-gradient(to right, #D1A943, #CFCDAF, #CC8630, #D1AA44, #CC8630);
  118. --ss-gold: #FED838;
  119. --ss-clear: rgba(255, 255, 255, 0);
  120. --ss-blue2clear: rgba(94, 186, 217, 0);
  121. --ss-blue2alpha7: rgba(94, 186, 217, .7);
  122. --ss-white-60: rgba(255,255,255,.6);
  123. --ss-white-90: rgba(255,255,255,.9);
  124. --ss-twitch: #0000;
  125. --twitch-color: #6441a5;
  126. --twitch-yellow: var(--ss-white);
  127. --twitch-pink: #F00DC9;
  128. --twitch-dk-pink: #c00aa0;
  129. --twitch-lt-purple: #0000;
  130. --twitch-dk-purple: #40008F;
  131. --twitch-xtr-dk-purple: #1e0043;
  132. --ss-orange: #F7941D;
  133. --ss-brown-2: #894B00;
  134. --ss-vip: #FFF000;
  135. --ss-red-btn-fill: #E81616;
  136. --ss-red-btn-outline: #881A1A;
  137. --ss-limited: #ffb3e8;
  138. --ss-limited-txt: #ff1bba;
  139. --ss-premium: #87ec4a;
  140. --ss-premium-txt: #204908;
  141. ----ss-vip: #fff000;
  142. --ss-vip-txt: #676000;
  143. --ss-darkoverlay: rgba(0, 0, 0, 0.6);
  144. --ss-darkoverlay2: rgba(0, 0, 0, 0.2);
  145. --ss-lightoverlay: radial-gradient(var(--ss-blue4), #000);
  146. --ss-lightbackground: linear-gradient(var(--ss-blue1), var(--ss-blue2) );
  147. --ss-blueblend1: linear-gradient(#349ec1, #5fbad8);
  148. --ss-scrollmask1: linear-gradient(var(--ss-blue2clear), #0000);
  149. --ss-scrollmask2: linear-gradient(rgba(56, 158, 192, 0), #0000);
  150. --ss-fieldbg: linear-gradient(#91CADB, #ffffff, #ffffff, #ffffff, #ffffff);
  151. --ss-nugSecs: 3600s;
  152. --ss-me-player-bg: rgb(205 205 205 / 80%);
  153. --ss-team-blue-light: rgb(96, 192, 224);
  154. --ss-team-blue-light-trans: rgb(96, 192, 224, 0.8);
  155. --ss-team-blue-dark: rgb(48, 128, 160);
  156. --ss-team-blue-dark-trans: rgb(48, 96, 160, 0.8);
  157. --ss-team-red-light: rgb(255, 64, 48);
  158. --ss-team-red-light-trans: rgb(255, 64, 48, 0.8);
  159. --ss-team-red-dark: rgb(160, 32, 24);
  160. --ss-team-red-dark-trans: rgb(160, 32, 24, 0.8);
  161. --ss-big-message-border-color: rgb(0, 0, 0);
  162. --ss-header-height: 10em;
  163. --ss-footer-height: 4em;
  164. --ss-main-width: 90em;
  165. --ss-min-width: 68em;
  166. --ss-space-xxxxl: calc(var(--ss-space-lg)*4);
  167. --ss-space-xxl: 2.3em;
  168. --ss-space-xl: 1.5em;
  169. --ss-space-lg: 1em;
  170. --ss-space-md: calc(var(--ss-space-lg)/2);
  171. --ss-space-sm: calc(var(--ss-space-md)/1.5);
  172. --ss-space-xs: calc(var(--ss-space-sm)/2);
  173. --ss-space-micro: calc(var(--ss-space-xs)/2);
  174. --border-radius: 0.4em;
  175. --ss-border-radius-sm: 0.2em;
  176. --ss-common-border-width: .2em;
  177. --ss-logo-width: calc(var(--ss-space-lg)*14);
  178. --ss-menu-width: calc(var(--ss-logo-width) - var(--ss-space-lg));
  179. --ss-main-sidebar-width: 16em;
  180. --ss-sidebar-width: calc(var(--ss-space-lg)*18.2);
  181. --ss-aside-panel-width: 20em;
  182. --ss-item-mask-height: calc(var(--ss-space-lg)*4);
  183. --ss-item-mask-width: calc(var(--ss-aside-panel-width) - 1.3em);
  184. --ss-item-box: calc(var(--ss-space-lg)*5.5);
  185. --ss-account-panel-height: calc(var(--ss-space-lg)*4);
  186. --ss-chat-wrapper-width: 14.5em;
  187. --ss--chat-height: 14.5em;
  188. --ss-media-social-width: 17.7em;
  189. --paused-ui-scale: .6;
  190. --paused-ui-vip-scale: .9;
  191. --chw-bubble-width: 9em;
  192. --chw-bubble-height: 3.3em;
  193. --home-screen-r-padding: .68em;
  194. --ss-box-shadow-1: .16em .16em 0 rgb(0 0 0 / 100%);
  195. --ss-box-shadow-2: .15em .15em 0 rgb(0 0 0 / 90%);
  196. --ss-box-shadow-3: .15em .15em 0 rgba(217,118,17,.9);
  197. --ss-text-shadow-1: .1em .1em 0 rgba(11, 147, 189,.8);
  198. --ss-shadow: rgba(0,0,0,.4);
  199. --ss-blueshadow: #0a577187;
  200. --ss-btn-common-txt-shadow: .1em .1em 0 rgb(0 0 0 / 30%);
  201. --ss-btn-common-txt-shadow-blur: .1em .1em .5em rgb(0 0 0 / 30%);
  202. --ss-shadow-filter: drop-shadow(var(--ss-btn-common-txt-shadow));
  203. --ss-btn-light-bevel: inset 0 .15em .2em;
  204. --ss-btn-dark-bevel: inset -.1em -.15em .1em;
  205. --ss-border-blue5: var(--ss-common-border-width) solid var(--ss-blue5);
  206. --ss-type-icon-size: 2.8em;
  207. --ss-equip-icon-size: 4em;
  208. --ss-media-stats-height: 30.5em;
  209. --ss-alphaclear: #0000
  210. }
  211.  
  212.  
  213. /*--------HOME SCREEN TABS-------*/
  214. .main-menu-button:hover .main-nav-item-bg, .current-screen .main-nav-item-bg {
  215. fill: #b50a0a;
  216. stroke: var(--ss-white);
  217. color: var(--ss-white);
  218. }
  219. .ss_field, .firebaseui-input {
  220. border-radius: var(--ss-space-sm) !important;
  221. border: var(--ss-common-border-width) solid var(--ss-blue4) !important;
  222. margin: 0 0 var(--ss-space-md) 0 !important;
  223. padding: var(--ss-space-sm) var(--ss-space-md) !important;
  224. box-shadow: inset 0.3em 0.3em 0.03em rgb(0 0 0 / 50%) !important;
  225. background: var(--ss-white) !important;
  226. color: #000 !important;
  227. font-weight: bold !important;
  228. min-height: 2.45em !important;
  229. }
  230. .ss_smtab.selected, .ss_smtab:hover {
  231. background: #440000;
  232. }
  233. .bevel_yolk {
  234. box-shadow: var(--ss-box-shadow-1), var(--ss-btn-dark-bevel) var(--ss-yolk2), var(--ss-btn-light-bevel) #420000;
  235. }
  236.  
  237. /*-----------STATS-----------*/
  238. .stat-wrapper .stat:nth-child(even) > div {
  239. background-color: var(--ss-alphaclear);
  240. }
  241. .stat-wrapper .stat:nth-child(odd) > div {
  242. background-color: var(--ss-alphaclear);
  243. }
  244.  
  245.  
  246. /*------------INVENTORY-----------*/
  247. .weapon_img {
  248. box-sizing: border-box;
  249. background-color: #000;
  250. height: 4em;
  251. width: 4em;
  252. border: var(--ss-common-border-width) solid var(--ss-blue3);
  253. fill: var(--ss-white);
  254. }
  255. #weapon_select .weapon_selected {
  256. background-color: #000;
  257. }
  258. .weapon_img:hover, #weapon_select .weapon_selected {
  259. border: var(--ss-common-border-width) solid #ff0000;
  260. box-shadow: var(--ss-box-shadow-1);
  261. }
  262. .secondary .equip_icon, .primary .equip_icon {
  263. filter: drop-shadow(0 2mm 0 rgba(200, 0, 0, .3));
  264. }
  265. .ico_itemtype {
  266. border-width: var(--ss-common-border-width);
  267. border-style: solid;
  268. border-color: #740000;
  269. width: var(--ss-type-icon-size);
  270. height: var(--ss-type-icon-size);
  271. margin: 0 var(--ss-space-micro) 0.25em var(--ss-space-micro);
  272. background: rgb(0 0 0 / 20%);
  273. box-sizing: border-box;
  274. }
  275. .btn_green {
  276. background: radial-gradient(#ffffff, #858585, #000000);
  277. border-color: var(--ss-green2);
  278. }
  279. .bevel_green {
  280. box-shadow: var(--ss-box-shadow-1), var(--ss-btn-dark-bevel) rgb(231 231 231), var(--ss-btn-light-bevel) var(--ss-green0);
  281. }
  282. .ss_bigtab {
  283. height: 3em;
  284. text-transform: uppercase;
  285. color: var(--ss-blue5);
  286. border: var(--ss-common-border-width) solid var(--ss-blue5);
  287. background: #000;
  288. min-width: 8em;
  289. padding: var(--ss-space-micro);
  290. cursor: pointer;
  291. /* box-shadow: none !important; */
  292. box-shadow: var(--ss-box-shadow-1) !important;
  293. }
  294. #equip_grid .grid-item:not(.morestuff) {
  295. background: var(--ss-lightoverlay);
  296. border: var(--ss-common-border-width) solid var(--ss-blue5);
  297. }
  298. .secondary .equip_icon, .primary .equip_icon {
  299. filter: drop-shadow(0 2mm 0 rgba(200, 0, 0, .0));
  300. }
  301.  
  302.  
  303. /*-----------------Random stuff that I found everywhere--------*/
  304. .main-menu-button .menu-icon.menu-icon-star, .icon-star {
  305. transform: rotate(35deg) !important;
  306. fill: #fff;
  307. stroke: var(--ss-yolk);
  308. stroke-width: 3px;
  309. right: -1em;
  310. height: 2em;
  311. width: 2em;
  312. }
  313. .popup_window {
  314. z-index: 2000;
  315. position: absolute;
  316. display: flex;
  317. flex-direction: column;
  318. align-items: center;
  319. padding: var(--ss-space-lg);
  320. color: var(--ss-white);
  321. background-image: var(--ss-lightoverlay);
  322. border: var(--ss-common-border-width) solid var(--ss-blue5);
  323. }
  324. .bevel_blue {
  325. box-shadow: var(--ss-box-shadow-1), var(--ss-btn-dark-bevel) rgb(0 0 0), var(--ss-btn-light-bevel) rgb(255 255 255);
  326. }
  327. .btn_blue {
  328. background-color: #780000;
  329. border-color: #fff
  330. }
  331. .bevel_blue_light {
  332. box-shadow: var(--ss-box-shadow-1), var(--ss-btn-dark-bevel) rgb(110 110 110), var(--ss-btn-light-bevel) rgb(110 110 110 );
  333. }
  334. .text_blue1 {
  335. color: #fff !important;
  336. }
  337. .text_blue4 {
  338. color: #a9a9a9 !important;
  339. }
  340. .text_blue8 {
  341. color: #ffffff !important;
  342. }
  343. .bg_blue2 {
  344. background-color: var(--ss-alphaclear);
  345. }
  346. .bg_blue3 {
  347. background-color: #0000 !important;
  348. }
  349. .bg_blue5 {
  350. background-color: var(--ss-black) !important;
  351. }
  352. .bg_blue6 {
  353. background-color: #0000 !important;
  354. }
  355. .option-box li:hover {
  356. background: rgb(241 241 241 / 50%);
  357. }
  358. .option-box {
  359. padding: var(--ss-space-md) 0;
  360. bottom: 4em;
  361. right: -50%;
  362. border: var(--ss-common-border-width) solid var(--ss-blue5);
  363. box-shadow: 0.26em 0.26em 0 rgb(0 0 0 / 50%);
  364. }
  365. .changelog_content {
  366. overflow-y: auto;
  367. height: 24em;
  368. padding: var(--ss-space-lg);
  369. color: var(--ss-white);
  370. font-weight: 600;
  371. background: var(--ss-alphaclear);
  372. }
  373. #feedback_panel p, #feedback_panel li {
  374. color: #ffffff;
  375. font-weight: 600;
  376. }
  377. .load_message {
  378. color: var(--ss-white);
  379. margin-top: 5em;
  380. margin-bottom: 3.5em;
  381. }
  382. .text_yellow {
  383. color: var(--ss-white);
  384. }
  385.  
  386.  
  387. /*----------SETTINGS WINDOW-------*/
  388. .ss_keybind {
  389. border-radius: var(--ss-space-md);
  390. border: none;
  391. margin: 0 0 var(--ss-space-sm) 0;
  392. padding: var(--ss-space-sm);
  393. color: #ffffff;
  394. background: var(--ss-alphaclear);
  395. font-weight: bold;
  396. width: 9em;
  397. text-align: center;
  398. text-transform: uppercase;
  399. }
  400. .label {
  401. display: inline;
  402. color: #858585;
  403. font-weight: bold;
  404. margin-left: var(--ss-space-md);
  405. font-size: 1em;
  406. }
  407. .checkmark {
  408. position: absolute;
  409. top: 0;
  410. left: 0;
  411. height: 1.9em;
  412. width: 1.9em;
  413. background-color: var(--ss-alphaclear);
  414. border-radius: var(--ss-space-md);
  415. }
  416. .ss_checkbox .checkmark:after {
  417. left: 0.55em;
  418. top: 0.2em;
  419. width: 0.4em;
  420. height: 1em;
  421. border: solid #ffffff;
  422. border-width: 0 0.4em 0.4em 0;
  423. -webkit-transform: rotate(45deg);
  424. -ms-transform: rotate(45deg);
  425. transform: rotate(45deg);
  426. }
  427. .ss_select {
  428. border-radius: var(--ss-space-sm);
  429. border: var(--ss-common-border-width) solid var(--ss-blue4);
  430. margin: 0 0 var(--ss-space-md) 0;
  431. padding: var(--ss-space-sm);
  432. box-shadow: inset 3px 3px 10px var(--ss-blue1), 0.1em 0.1em 3px var(--ss-blue3);
  433. background: var(--ss-alphaclear);
  434. color: var(--ss-blue3);
  435. font-weight: bold;
  436. min-height: 2.45em;
  437. }
  438. /*---------PRIVATE GAMES-------------*/
  439. #joinPrivateGamePopup .inner-wrapper {
  440. background-color: var(--ss-alphaclear);
  441. padding: var(--ss-space-md) var(--ss-space-xxl) var(--ss-space-lg);
  442. }
  443.  
  444. /*----------PLAY MENU------------*/
  445. .weapon-select--title h1 {
  446. color: var(--ss-alphaclear);
  447. font-size: 1.3em;
  448. background: none;
  449. margin-bottom: var(--ss-space-md);
  450. }
  451. .playerSlot--name {
  452. overflow: hidden;
  453. color: var(--ss-yolk2) !important;
  454. }
  455. #killTicker span {
  456. color: var(--ss-yolk2) !important;
  457. }
  458. .pause-screen-btn-spectate {
  459. box-shadow: 0.15em 0.15em 0 rgba(0, 0, 0,.3), var(--ss-btn-dark-bevel) var(--ss-black), var(--ss-btn-light-bevel) var(--ss-black) !important;
  460. }
  461. .btn-respawn.bevel_green {
  462. box-shadow: 0.15em 0.15em 0 rgba(0, 0, 0,.3), var(--ss-btn-dark-bevel) rgb(255 255 255), var(--ss-btn-light-bevel) var(--ss-green0);
  463. }
  464. #weapon_select .weapon_disabled {
  465. background-image: url('https://emptyImageMaker.com/');
  466. fill: var(--ss-blue1);
  467. border-color: var(--ss-blue2);
  468. background-color: var(--ss-blue2);
  469. }
  470.  
  471. /*-----------CHAT----------*/
  472. #chatIn {
  473. display: none;
  474. color: var(--ss-blue7);
  475. bottom: 1em;
  476. left: 1em;
  477. width: 100%;
  478. border: none;
  479. background: none;
  480. }
  481. #chatOut span {
  482. color: #fff !important;
  483. }
  484. .chat {
  485. font-weight: bold;
  486. color: #fff;
  487. opacity: 0.7;
  488. z-index: 5;
  489. }
  490. .chat-player-name {
  491. font-weight: bolder;
  492. color: var(--ss-blue4) !important
  493. }
  494. .is-paused .pause-ui-element {
  495. background-color: var(--ss-alphaclear);
  496. border: var(--ss-common-border-width) solid var(--ss-blue5);
  497. bottom: 0;
  498. width: var(--ss-chat-wrapper-width);
  499. height: var(--ss--chat-height);
  500. }
  501.  
  502. /*---------------READOUTS-------------*/
  503. #inGameUI {
  504. position: absolute;
  505. right: 0.5em;
  506. top: 4em;
  507. right: 1.5em;
  508. top: 5em;
  509. padding: 1em;
  510. background-color: #0000;
  511. border: var(--ss-common-border-width) solid #561212;
  512. }
  513. #inGameUI .title {
  514. font-size: .4em;
  515. color: #0000;
  516. }
  517. #tutorialPopup {
  518. background-image: var(--ss-lightoverlay);
  519. }
  520. .tutorial-keyboard {
  521. width: 19em;
  522. opacity: 1;
  523. content: url(https://lh3.google.com/u/0/d/1KA67a5GEuSDv6S3MvPGVTjFIp3ATo_HH=w1308-h945-iv1);
  524. }
  525. .tutorial-mouse {
  526. width: 7em;
  527. opacity: 1;
  528. content: url(https://lh3.google.com/u/0/d/1zX_6BQB1To3TWT-UWsD0LI-veQtcjUH9=w1308-h945-iv1);
  529. }
  530. .tutorial-egg {
  531. width: 5em;
  532. opacity: 1;
  533. content: url(https://lh3.google.com/u/0/d/1b35cOEhD75GKit0v96HlTMhlQduAh2ma=w1308-h945-iv1);
  534. }
  535. .tutorial-labels span:not(.tutorial-special-keys) {
  536. font-size: 80%;
  537. color: var(--ss-white);
  538. line-height: 1.2;
  539. text-align: center;
  540. }
  541. .tutorial-list li {
  542. line-height: 1.2;
  543. padding: 0.4em 1.8rem;
  544. background-position: 0 center;
  545. background-size: 1.3rem;
  546. background-repeat: no-repeat;
  547. background-image: url(https://lh3.google.com/u/0/d/1LzydH9TlMFbCBH1MxA1RwsksqGPVkzbT=w1308-h945-iv1);
  548. font-size: 90%;
  549. }
  550. #best_streak_container h1 {
  551. margin: 0;
  552. padding: 0;
  553. display: inline;
  554. text-shadow: var(--ss-space-micro) var(--ss-space-micro) var(--ss-shadow);
  555. font-family: 'Nunito', sans-serif !important;
  556. font-size: 2.5em !important;
  557. color: var(--ss-white) !important;
  558. font-weight: bold !important;
  559. text-transform: lowercase;
  560. padding-left: 1.25em;
  561. padding-top: 0em;
  562. background-image: url(https://lh3.google.com/u/0/d/1ZImxpOhFiciQwmfTwsqtL1TJk-S0PavS=w1308-h945-iv1);
  563. background-position: left center;
  564. background-size: contain;
  565. background-repeat: no-repeat;
  566. }
  567.  
  568. /*------------CHICKN WINNER--------*/
  569. .chw-circular-timer-container-shadow {
  570. background: rgb(0 0 0 / 0%);
  571. opacity: 1;
  572. width: var(--chw-bubble-width);
  573. height: var(--chw-bubble-height);
  574. align-items: center;
  575. position: relative;
  576. border-radius: 0.5em;
  577. padding: 0.4em 1em;
  578. z-index: 2;
  579. position: absolute;
  580. left: 4.3em;
  581. bottom: 1.6em;
  582. z-index: 1;
  583. }
  584. .egg-chick-wrapper {
  585. background-color: var(--ss-alphaclear);
  586. margin: var(--ss-space-lg) auto;
  587. height: 15em;
  588. align-items: end;
  589. min-width: 51em;
  590. }
  591.  
  592. /*------------TWITCH-----------*/
  593. #giveStuffPopup.twitchDrops .twitch-btn {
  594. font-size: 1em;
  595. background: var(--ss-black);
  596. }
  597. #giveStuffPopup.twitchDrops footer {
  598. padding-bottom: 1em;
  599. background-color: var(--ss-alphaclear);
  600. }
  601. #giveStuffPopup.twitchDrops .egg-give-stuff, #giveStuffPopup.twitchDrops .grid-item {
  602. width: 9em;
  603. height: 9em;
  604. max-width: 9em;
  605. max-height: 9em;
  606. min-width: 9em;
  607. min-height: 9em;
  608. border: 0.5em solid;
  609. margin-bottom: 1em;
  610. border-radius: var(--ss-space-lg);
  611. background-color: #0000003b;
  612. }
  613.  
  614. .notify-group {
  615. height: 36em;
  616. width: 23em;
  617. padding: var(--ss-space-lg);
  618. color: var(--ss-white);
  619. background-image: var(--ss-lightoverlay);
  620. border: var(--ss-common-border-width) solid var(--ss-blue5);
  621. }
  622.  
  623. .notify-group .egg-give-stuff h2 {
  624. font-size: 3em;
  625. color: var(--ss-red-white);
  626. margin: 0;
  627. }
  628.  
  629. .play-panel-panels {
  630. width: 38em;
  631. display: flex;
  632. flex-direction: column;
  633. align-items: center;
  634. padding: var(--ss-space-xl);
  635. color: var(--ss-white);
  636. background-image: var(--ss-lightoverlay);
  637. border: var(--ss-common-border-width) solid var(--ss-blue5);
  638. }
  639.  
  640. #maskmiddle {
  641. background: url(https://lh3.google.com/u/0/d/1WpH9BfTW5X-omV3It8VKRC3Hti4IQLba=w1308-h945-iv1) center center no-repeat;
  642. background-size: contain;
  643. width: 100vh;
  644. height: 100vh;
  645. }
  646.  
  647. .hardBoiledShield {
  648. position: absolute;
  649. transform: translateX(-50%);
  650. height: 100%;
  651. content: url('https://shellshock.io/img/hardBoiledEmpty.png');
  652. }
  653. #hardBoiledShieldFill {
  654. content: url('https://lh3.google.com/u/0/d/1jY944SWvkMe4DaZcrPDJD4cvPcd73qvt=w1308-h945-iv1');
  655. }
  656. .player-challenges-container {
  657. width: 100%;
  658. background: rgb(0, 192, 255);
  659. background: linear-gradient(225deg, rgb(0 0 0) 0%, var(--ss-blue4) 100%);
  660. }
  661. .player-challenge-single-action-claimed {
  662. background: var(--ss-black);
  663. width: 35%;
  664. padding: .2em 0 .2em 1em;
  665. position: absolute;
  666. bottom: 0;
  667. right: 0;
  668. transform-origin: bottom left;
  669. -ms-transform: skew(-30deg, 0deg);
  670. -webkit-transform: skew(-30deg, 0deg);
  671. transform: skew(-30deg, 0deg);
  672. overflow: hidden;
  673. }
  674. .text_yellow_bright {
  675. color: var(--ss-white);
  676. }
  677. .bg_yellow {
  678. background-color: var(--ss-white) !important;
  679. }
  680. #shellStreakCaptionStreak span {
  681. font-size: 0.6em;
  682. content: url();
  683. }
  684. .playerSlot--icons {
  685. width: 3.5em;
  686. display: block;
  687. position: absolute;
  688. right: -3.8em;
  689. top: 0;
  690. color: var(--ss-blue4);
  691. }
  692. #account_panel .svg-icon {
  693. fill: var(--ss-white);
  694. width: 1.5em;
  695. height: 1.5em;
  696. }
  697. #stamp-controls .button {
  698. box-sizing: border-box;
  699. background: var(--ss-lightoverlay);
  700. height: 4em;
  701. width: 4em;
  702. border: var(--ss-common-border-width) solid var(--ss-blue5);
  703. border-radius: var(--ss-space-md);
  704. cursor: pointer;
  705. box-shadow: var(--ss-box-shadow-1), var(--ss-btn-dark-bevel) #000, var(--ss-btn-light-bevel);
  706. }
  707. #stamp-controls .button .arrow {
  708. width: 2em;
  709. height: 2em;
  710. margin-top: .25em;
  711. fill: var(--ss-white);
  712. }
  713. #healthContainer {
  714. position: absolute;
  715. left: 50%;
  716. bottom: 1em;
  717. transform: translateX(-50%);
  718. display: inline-block;
  719. width: 6em;
  720. height: 6em;
  721. background: var(--ss-blue4);
  722. border-radius: 50%;
  723. text-align: center;
  724. }
  725.  
  726.  
  727. </style>`
  728. }
  729. document.body ? addScript() : document.addEventListener("DOMContentLoaded", e => addScript());
  730. })();