How to turn Card-Overview Animations off

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 a overwrite CSS to turn these Animations of and want to share the code with you.

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) Hope this helps.
 * 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

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.