A Purple Shell Shocker Theme
// ==UserScript==
// @name Purple Shell Shocker Theme - Custom Scope CrossHair And HealthBar
// @namespace http://urfat.com/
// @version 1.1
// @description A Purple Shell Shocker Theme
// @author Cluck36
// @match https://shellshock.io/*
// @grant none
// ==/UserScript==
(function () {
const addScript = () => {
document.title = "Shell Shockers (Purple)"
document.head.innerHTML += `<style>
/*----------GLOBAL----------*/
:root {
--select-border: #777;
--select-focus: blue;
--select-arrow: var(--select-border);
--ss-transparent: #00000000;
--ss-black: #000;
--ss-adblocker-text: #be60d1;
--ss-white: #FFFFFF;
--ss-offwhite: #FFF3E4;
--ss-yellow0: #F7FFC1;
--ss-yellow: #FAF179;
--ss-yolk0: #b0b0b0;
--ss-yolk: var(--ss-lightoverlay);
--ss-yolk2: #6f6f6f;
--ss-red0: #dddddd;
--ss-red: #cecece;
--ss-red2: #787878;
--ss-egg-org: #EE2524;
--ss-red-bright: #EF3C39;
--ss-pink: #EC008C;
--ss-pink1: #b9006e;
--ss-pink-light: #ff3aaf;
--ss-pink-dark: #a7098c;
--ss-brown: #4F7942
--ss-blue00: #301934;
--ss-blue0: #b973ff;
--ss-blue1: #b973ff;
--ss-blue2: #000000;
--ss-blue3: #800080;
--ss-blue4: #b973ff;
--ss-blue5: #000000;
--ss-blue6: #CBC3E3;
--ss-blue7: #be60d1;
--ss-blue8: #800080;
--ss-green0: #CBC3E3;
--ss-green1: #4F7942;
--ss-green2: #4F7942;
--ss-green-login: #4F7942;
--ss-orange1: #F79520;
--ss-vip-blue: #4F7942;
--ss-vip-pink: #4F7942;
--ss-vip-brown: #4F7942;
--ss-vip-yellow: #4F7942;
--ss-vip-red: #4F7942;
--ss-vip-purple: #40008F;
--ss-vip-gold: linear-gradient(to right, #D1A943, #CFCDAF, #CC8630, #D1AA44, #CC8630);
--ss-gold: #FED838;
--ss-clear: rgba(255, 255, 255, 0);
--ss-blue2clear: rgba(94, 186, 217, 0);
--ss-blue2alpha7: rgba(94, 186, 217, .7);
--ss-white-60: rgba(255,255,255,.6);
--ss-white-90: rgba(255,255,255,.9);
--ss-twitch: #0000;
--twitch-color: #6441a5;
--twitch-yellow: var(--ss-white);
--twitch-pink: #F00DC9;
--twitch-dk-pink: #4F7942;
--twitch-lt-purple: #4F7942;
--twitch-dk-purple: #4F7942;
--twitch-xtr-dk-purple: #4F7942;
--ss-orange: #4F7942;
--ss-brown-2: #4F7942;
--ss-vip: #FFF000;
--ss-red-btn-fill: #dcdcdc;
--ss-red-btn-outline: #7b7b7b;
--ss-limited: #ffb3e8;
--ss-limited-txt: #ff1bba;
--ss-premium: #87ec4a;
--ss-premium-txt: #204908;
----ss-vip: #fff000;
--ss-vip-txt: #676000;
--ss-darkoverlay: rgba(0, 0, 0, 0.6);
--ss-darkoverlay2: rgba(0, 0, 0, 0.2);
--ss-lightoverlay: radial-gradient(var(--ss-blue4), #000);
--ss-lightbackground: linear-gradient(var(--ss-blue1), var(--ss-blue2) );
--ss-blueblend1: linear-gradient(#349ec1, #5fbad8);
--ss-scrollmask1: linear-gradient(var(--ss-blue2clear), #0000);
--ss-scrollmask2: linear-gradient(rgba(56, 158, 192, 0), #0000);
--ss-fieldbg: linear-gradient(#91CADB, #ffffff, #ffffff, #ffffff, #ffffff);
--ss-nugSecs: 3600s;
--ss-me-player-bg: rgb(205 205 205 / 80%);
--ss-team-blue-light: rgb(96, 192, 224);
--ss-team-blue-light-trans: rgb(96, 192, 224, 0.8);
--ss-team-blue-dark: rgb(48, 128, 160);
--ss-team-blue-dark-trans: rgb(48, 96, 160, 0.8);
--ss-team-red-light: rgb(255, 64, 48);
--ss-team-red-light-trans: rgb(255, 64, 48, 0.8);
--ss-team-red-dark: rgb(160, 32, 24);
--ss-team-red-dark-trans: rgb(160, 32, 24, 0.8);
--ss-big-message-border-color: rgb(0, 0, 0);
--ss-header-height: 10em;
--ss-footer-height: 4em;
--ss-main-width: 90em;
--ss-min-width: 68em;
--ss-space-xxxxl: calc(var(--ss-space-lg)*4);
--ss-space-xxl: 2.3em;
--ss-space-xl: 1.5em;
--ss-space-lg: 1em;
--ss-space-md: calc(var(--ss-space-lg)/2);
--ss-space-sm: calc(var(--ss-space-md)/1.5);
--ss-space-xs: calc(var(--ss-space-sm)/2);
--ss-space-micro: calc(var(--ss-space-xs)/2);
--border-radius: 0.4em;
--ss-border-radius-sm: 0.2em;
--ss-common-border-width: .2em;
--ss-logo-width: calc(var(--ss-space-lg)*14);
--ss-menu-width: calc(var(--ss-logo-width) - var(--ss-space-lg));
--ss-main-sidebar-width: 16em;
--ss-sidebar-width: calc(var(--ss-space-lg)*18.2);
--ss-aside-panel-width: 20em;
--ss-item-mask-height: calc(var(--ss-space-lg)*4);
--ss-item-mask-width: calc(var(--ss-aside-panel-width) - 1.3em);
--ss-item-box: calc(var(--ss-space-lg)*5.5);
--ss-account-panel-height: calc(var(--ss-space-lg)*4);
--ss-chat-wrapper-width: 14.5em;
--ss--chat-height: 14.5em;
--ss-media-social-width: 17.7em;
--paused-ui-scale: .6;
--paused-ui-vip-scale: .9;
--chw-bubble-width: 9em;
--chw-bubble-height: 3.3em;
--home-screen-r-padding: .68em;
--ss-box-shadow-1: .16em .16em 0 rgb(0 0 0 / 100%);
--ss-box-shadow-2: .15em .15em 0 rgb(0 0 0 / 90%);
--ss-box-shadow-3: .15em .15em 0 rgba(217,118,17,.9);
--ss-text-shadow-1: .1em .1em 0 rgba(11, 147, 189,.8);
--ss-shadow: rgba(0,0,0,.4);
--ss-blueshadow: #0a577187;
--ss-btn-common-txt-shadow: .1em .1em 0 rgb(0 0 0 / 30%);
--ss-btn-common-txt-shadow-blur: .1em .1em .5em rgb(0 0 0 / 30%);
--ss-shadow-filter: drop-shadow(var(--ss-btn-common-txt-shadow));
--ss-btn-light-bevel: inset 0 .15em .2em;
--ss-btn-dark-bevel: inset -.1em -.15em .1em;
--ss-border-blue5: var(--ss-common-border-width) solid var(--ss-blue5);
--ss-type-icon-size: 2.8em;
--ss-equip-icon-size: 4em;
--ss-media-stats-height: 30.5em;
--ss-alphaclear: #0000
}
/*--------HOME SCREEN TABS-------*/
.main-menu-button:hover .main-nav-item-bg, .current-screen .main-nav-item-bg {
fill: var(--ss-blue0);
stroke: var(--ss-white);
color: var(--ss-white);
}
.ss_field {
border-radius: var(--ss-space-sm);
border: var(--ss-common-border-width) solid var(--ss-blue4);
margin: 0 0 var(--ss-space-md) 0;
padding: var(--ss-space-sm) var(--ss-space-md);
box-shadow: inset -0.3em 0.3em 0.03em rgb(0 0 0 / 30%), 0.2em 0.2em 0.01em #000;
background: #323232;
color: var(--ss-blue3);
font-weight: bold;
min-height: 2.45em;
}
.ss_smtab.selected, .ss_smtab:hover {
background: var(--ss-blue0);
}
.bevel_yolk {
box-shadow: var(--ss-box-shadow-1), var(--ss-btn-dark-bevel) var(--ss-yolk2), var(--ss-btn-light-bevel) var(--ss-yolk2);
}
/*-----------STATS-----------*/
.stat-wrapper .stat:nth-child(even) > div {
background-color: var(--ss-alphaclear);
}
.stat-wrapper .stat:nth-child(odd) > div {
background-color: var(--ss-alphaclear);
}
/*------------INVENTORY-----------*/
.weapon_img {
box-sizing: border-box;
background-color: var(--ss-linear-gradient);
height: 4em;
width: 4em;
border: var(--ss-common-border-width) solid var(--ss-alphaclear);
fill: var(--ss-white);
}
#weapon_select .weapon_selected {
background-color: #000;
}
.weapon_img:hover, #weapon_select .weapon_selected {
border: var(--ss-common-border-width) solid var(--ss-white);
box-shadow: var(--ss-box-shadow-1);
}
.secondary .equip_icon, .primary .equip_icon {
filter: drop-shadow(0 2mm 0 rgba(200, 0, 0, .3));
}
.ico_itemtype {
border-width: var(--ss-common-border-width);
border-style: solid;
border-color: var(--ss-alphaclear);
width: var(--ss-type-icon-size);
height: var(--ss-type-icon-size);
margin: 0 var(--ss-space-micro) 0.25em var(--ss-space-micro);
background: rgb(0 0 0 / 20%);
box-sizing: border-box;
}
.btn_green {
background: radial-gradient(var(--ss-white), var(--ss-black));
border-color: var(--ss-green2);
}
.bevel_green {
box-shadow: var(--ss-box-shadow-1), var(--ss-btn-dark-bevel) rgb(231 231 231), var(--ss-btn-light-bevel) var(--ss-green0);
}
.ss_bigtab {
height: 3em;
text-transform: uppercase;
color: var(--ss-blue5);
border: var(--ss-common-border-width) solid var(--ss-blue5);
background: #000;
min-width: 8em;
padding: var(--ss-space-micro);
cursor: pointer;
/* box-shadow: none !important; */
box-shadow: var(--ss-box-shadow-1) !important;
}
#equip_grid .grid-item:not(.morestuff) {
background: var(--ss-lightoverlay);
border: var(--ss-common-border-width) solid var(--ss-blue5);
}
.secondary .equip_icon, .primary .equip_icon {
filter: drop-shadow(0 2mm 0 rgba(200, 0, 0, .0));
}
/*-----------------Random stuff that I found everywhere--------*/
.bevel_blue {
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);
}
.btn_blue {
background-color: var(--ss-black);
border-color: #fff
}
.bevel_blue_light {
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 );
}
.text_blue1 {
color: #fff !important;
}
.bg_blue2 {
background-color: var(--ss-alphaclear);
}
.bg_blue3 {
background-color: #0000;
}
.bg_blue6 {
background-color: #0000
}
.option-box li:hover {
background: rgb(241 241 241 / 50%);
}
.option-box {
padding: var(--ss-space-md) 0;
bottom: 4em;
right: -50%;
border: var(--ss-common-border-width) solid var(--ss-blue5);
box-shadow: 0.26em 0.26em 0 rgb(0 0 0 / 50%);
}
.changelog_content {
overflow-y: auto;
height: 24em;
padding: var(--ss-space-lg);
color: var(--ss-white);
font-weight: 600;
background: var(--ss-alphaclear);
}
#feedback_panel p, #feedback_panel li {
color: #ffffff;
font-weight: 600;
}
.load_message {
color: var(--ss-white);
margin-top: 5em;
margin-bottom: 3.5em;
}
.btn_red {
background-color: #444444;
border-color: var(--ss-red-btn-outline);
}
.bevel_red {
box-shadow: var(--ss-box-shadow-1), var(--ss-btn-dark-bevel) var(--ss-red0), var(--ss-btn-light-bevel) var(--ss-red0);
}
/*----------SETTINGS WINDOW-------*/
.ss_keybind {
border-radius: var(--ss-space-md);
border: none;
margin: 0 0 var(--ss-space-sm) 0;
padding: var(--ss-space-sm);
color: #ffffff;
background: var(--ss-alphaclear);
font-weight: bold;
width: 9em;
text-align: center;
text-transform: uppercase;
}
.label {
display: inline;
color: #858585;
font-weight: bold;
margin-left: var(--ss-space-md);
font-size: 1em;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 1.9em;
width: 1.9em;
background-color: var(--ss-alphaclear);
border-radius: var(--ss-space-md);
}
.ss_checkbox .checkmark:after {
left: 0.55em;
top: 0.2em;
width: 0.4em;
height: 1em;
border: solid #ffffff;
border-width: 0 0.4em 0.4em 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ss_select {
border-radius: var(--ss-space-sm);
border: var(--ss-common-border-width) solid var(--ss-blue4);
margin: 0 0 var(--ss-space-md) 0;
padding: var(--ss-space-sm);
box-shadow: inset 3px 3px 10px var(--ss-blue1), 0.1em 0.1em 3px var(--ss-blue3);
background: var(--ss-alphaclear);
color: var(--ss-blue3);
font-weight: bold;
min-height: 2.45em;
}
/*---------PRIVATE GAMES-------------*/
#joinPrivateGamePopup .inner-wrapper {
background-color: var(--ss-alphaclear);
padding: var(--ss-space-md) var(--ss-space-xxl) var(--ss-space-lg);
}
/*----------PLAY MENU------------*/
.weapon-select--title h1 {
color: var(--ss-alphaclear);
font-size: 1.3em;
background: none;
margin-bottom: var(--ss-space-md);
}
.playerSlot--name {
overflow: hidden;
color: var(--ss-yolk2) !important;
}
#killTicker span {
color: var(--ss-yolk2) !important;
}
.pause-screen-btn-spectate {
position: absolute;
bottom: var(--ss-space-lg);
left: var(--ss-space-lg);
margin: 0;
min-width: auto;
border-radius: 100%;
width: 4em;
height: 4em;
text-align: center;
padding: 0;
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;
}
.btn-respawn.bevel_green {
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);
}
.btn-respawn.bevel_red {
box-shadow: 0.15em 0.15em 0 rgba(0, 0, 0,.3), var(--ss-btn-dark-bevel) var(--ss-white), var(--ss-btn-light-bevel) var(--ss-red0);
}
/*-----------CHAT----------*/
#chatIn {
display: none;
color: var(--ss-blue7);
bottom: 1em;
left: 1em;
width: 100%;
border: none;
background: none;
}
.chat {
font-weight: bold;
color: #fff;
opacity: 0.7;
z-index: 5;
}
.chat-player-name {
font-weight: bolder;
color: var(--ss-blue4) !important
}
.is-paused .pause-ui-element {
background-color: var(--ss-alphaclear);
border: var(--ss-common-border-width) solid var(--ss-blue5);
bottom: 0;
width: var(--ss-chat-wrapper-width);
height: var(--ss--chat-height);
}
/*---------------READOUTS-------------*/
#inGameUI {
position: absolute;
right: 0.5em;
top: 4em;
right: 1.5em;
top: 5em;
padding: 1em;
background-color: #0000;
border: var(--ss-common-border-width) solid var(--ss-alphaclear);
}
#inGameUI .title {
font-size: .4em;
color: #0000;
}
/*------------CHICKN WINNER--------*/
.chw-circular-timer-container-shadow {
background: rgb(0 0 0 / 0%);
opacity: 1;
width: var(--chw-bubble-width);
height: var(--chw-bubble-height);
align-items: center;
position: relative;
border-radius: 0.5em;
padding: 0.4em 1em;
z-index: 2;
position: absolute;
left: 4.3em;
bottom: 1.6em;
z-index: 1;
}
.egg-chick-wrapper {
background-color: var(--ss-alphaclear);
margin: var(--ss-space-lg) auto;
height: 15em;
align-items: end;
min-width: 51em;
}
.chw-progress-bar-wrap {
width: 23em;
background-color: var(--ss-black);
}
/*------------TWITCH-----------*/
#giveStuffPopup.twitchDrops .twitch-btn {
font-size: 1em;
background: var(--ss-black);
}
#giveStuffPopup.twitchDrops footer {
padding-bottom: 1em;
background-color: var(--ss-alphaclear);
}
#giveStuffPopup.twitchDrops .egg-give-stuff, #giveStuffPopup.twitchDrops .grid-item {
width: 9em;
height: 9em;
max-width: 9em;
max-height: 9em;
min-width: 9em;
min-height: 9em;
border: 0.5em solid;
margin-bottom: 1em;
border-radius: var(--ss-space-lg);
background-color: #0000003b;
}
#healthContainer {
position: absolute;
left: 50%; bottom: 1em;
transform: translateX(-50%);
display: inline-block;
width: 6em; height: 6em;
background: var(--ss-blueshadow);
border-radius: 50%;
text-align: center;
}
#health {
}
#healthHp {
font-family: 'Nunito', sans-serif;
font-weight: bold;
color: #ffffff;
font-size: 1.2em;
transform: translateY(-3.45em);
}
.healthBar {
transform-origin: center;
transform: rotate(90deg);
fill: transparent;
stroke: #9e239e
;
stroke-width: 1em;
stroke-dasharray: 14.4513em;
transition: all 0.3s ease-in-out;
}
.healthYolk {
fill: #8a387a;
}
.healthSvg {
width: 100%; height: 100%;
}
#hardBoiledContainer {
position: absolute;
left: 50%; bottom: 1em;
transform: translateX(-50%);
display: inline-block;
width: 6em; height: 6em;
text-align: center;
}
#hardBoiledValue {
font-family: 'Nunito', sans-serif;
font-weight: bold;
color: #9e239e
;
font-size: 1.6em;
transform: translateY(-2.6em);
}
#hardBoiledShieldContainer {
width: 100%;
height: 100%;
}
.hardBoiledShield {
position: absolute;
transform: translateX(-50%);
height: 100%;
}
#eggBreakerContainer {
position: absolute;
left: calc(50% + 9em); bottom: 1em;
transform: scale(4) translateY(-3em);
transform-origin: 50% 100%;
width: 6em; height: 6em;
}
#eggBreakerContainer.on {
visibility: visible;
transform: scale(1) translateY(0);
transition: 1s;
}
#eggBreakerContainer.off {
visibility: hidden;
}
#eggBreakerIcon {
position: absolute;
height: 100%;
}
#eggBreakerTimer {
position: absolute;
color: #9e239e;
text-shadow: var(--ss-yolk) 0 0 0.1em, black 0 0.1em 0.2em;
font-size: 2.5em;
font-family: 'Nunito', sans-serif;
font-weight: 900;
text-align: center;
width: 100%;
top: 18%;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 6;
}
#maskmiddle {
background: url('https://cdn.discordapp.com/attachments/1026318625436602419/1039020872217940008/imageedit_16_6909081453.png') center center no-repeat;
background-size: contain;
width: 100vh;
height: 100vh;
}
.crosshair {
position: absolute;
transform-origin: 50% top;
top: 50%;
border: solid 0.05em #9e239e;
height: 0.8em;
margin-bottom: 0.12em;
opacity: 0.7;
}
.crosshair.normal {
left: calc(50% - 0.25em);
background: #9e239e;
width: 0.5em;
}
.crosshair {
position: absolute;
transform-origin: 50% top;
top: 50%;
border: solid 0.05em black;
height: 0.8em;
margin-bottom: 0.12em;
opacity: 0.7;
}
.crosshair.normal {
left: calc(50% - 0.15em);
background: #9e239e;
width: 0.3em;
}
.crosshair.powerful {
left: calc(50% - 0.25em);
background: #9e239e;
width: 0.5em;
}
#reticleDot {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: #9e239e;
border: solid 0.05em #9e239e;
width: 0.3em;
height: 0.3em;
opacity: 0.7;
</style>`
}
document.body ? addScript() : document.addEventListener("DOMContentLoaded", e => addScript());
})();