How to turn Card-Overview Animations off

From SmutstoneWiki

The general card screen draws an impressive amount of CPU resources. This is because of the shitty JavaScript/CSS Animations which make the cards glow. I've written an overwrite CSS to turn these Animations of and want to share the code with you.

Before
After

Code, unformated so you can copy/paste:

.screen.card-manager-list .card-list-box { display: block; width: auto; height: 420px; position: absolute; left: 50px; top: 115px; right: 50px; bottom: auto; font-size: 0; } .screen.card-manager-list .card-list-box .g-box { display: inline-block; width: 96px; height: 125px; position: relative; margin: 4px 7px; vertical-align: top; cursor: pointer; -webkit-transform: scaleX(1) scaleY(1); -moz-transform: scaleX(1) scaleY(1); -ms-transform: scaleX(1) scaleY(1); -o-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); -webkit-transition: transform 0.11s; -moz-transition: transform 0.11s; -ms-transition: transform 0.11s; -o-transition: transform 0.11s; transition: transform 0.11s; } .screen.card-manager-list .card-list-box .g-box:hover { -webkit-transform: scaleX(1.1) scaleY(1.1); -moz-transform: scaleX(1.1) scaleY(1.1); -ms-transform: scaleX(1.1) scaleY(1.1); -o-transform: scaleX(1.1) scaleY(1.1); transform: scaleX(1.1) scaleY(1.1); } .screen.card-manager-list .card-list-box .g-box:hover .card .p-color { box-shadow: 0 1px 15px #0ff, 0 1px 30px #0ff; } .screen.card-manager-list .card-list-box .g-box .ready:before, .screen.card-manager-list .card-list-box .g-box .ready:after { content: ""; display: block; width: 96px; height: 125px; position: absolute; left: 0; top: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; background-image: url(../img/dots2.png); background-size: 100% 200%; background-position: 0 0; opacity: 0.55; pointer-events: none; } .screen.card-manager-list .card-list-box .g-box .ready:after { background-image: url(../img/dots-a3.png); background-size: 100% 600%; background-position: 0 0; -webkit-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -moz-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -ms-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -o-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; pointer-events: none; } .screen.card-manager-list .card-list-box .g-box .ready:before { box-shadow: 0 0 10px #ffa0, inset 0 0 25px #ffa0, inset 0 0 55px #ffa0; -webkit-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -moz-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -ms-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -o-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; }

You need a browser extension which features userdefined CSS like Stylus (which is what I'm using)

  1. Get Stylus
  2. Visit Smutstone
  3. Open Stylus from the top of your browser
  4. Click Manage and create a new Style for the URL (Smutstone and v2.Smutstone are differentiated)
  5. Paste the Code above into the Code Editor shown
  6. Save

Hope this helps.

PS: I will not play support for people who can't get it running with this tutorial and the code above. It's free, it's a gift, accept it or ignore it. Don't expect me to wipe your ass too.

Good Luck.