User blog comment:Raznocty2016/Руководства и учебные пособия/@comment-45330230-20200705113519

.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:  1 1px 15px #e7ff00, 0 1px 30px #ff00d0; }

.screen.card-manager-list .card-list-box .g-box .ready:before, .screen.card-manager-list .card-list-box .g-box .ready:after

{ content: "1"; 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: 1 1; 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 #a4a42b, inset 0 0 25px #53ff46c9, inset 0 0 55px #105c73;

-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; }