[ripple] { z-index: 1; position: relative; overflow: hidden; } .darkmode--deactivated [ripple] .ripple { position: absolute; background: #FFFFFF; width: 12px; height: 12px; border-radius: 100%; -webkit-animation: ripple 1.6s; animation: ripple 1.6s; } .darkmode--activated [ripple] .ripple { position: absolute; background: #3f3f3f; width: 12px; height: 12px; border-radius: 100%; -webkit-animation: ripple 1.6s; animation: ripple 1.6s; } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.2; } 100% { -webkit-transform: scale(40); transform: scale(40); opacity: 0; } } @keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.2; } 100% { -webkit-transform: scale(40); transform: scale(40); opacity: 0; } } .darkmode--deactivated .tabs { z-index: 15px; position: relative; background: #FFFFFF; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.1); box-sizing: border-box; overflow: hidden; } .darkmode--activated .tabs { z-index: 15px; position: relative; background: #3f3f3f; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.1); box-sizing: border-box; overflow: hidden; } .tabs-header { position: relative; background: #5E24C3; overflow: hidden; } .tabs-header ul { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; flex-wrap: wrap; width: calc(100% - 68px); margin: 0 !important; } .tabs-header li { -webkit-transition: 0.3s ease; transition: 0.3s ease; list-style: none !important; } .tabs-header .active { border-bottom: 3px solid #F4B142 !important } .tabs-header a { z-index: 1; display: block; box-sizing: border-box; padding: 15px 20px; color: #FFFFFF; font-weight: 500; text-decoration: none; text-transform: uppercase; } .tabs-header a:hover { color: #ffdf80 !important; } .tabs-nav { position: absolute; top: 0; right: 0; background: #5E24C3; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; height: 100%; padding: 0 10px; color: #FFFFFF; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tabs-nav:before { content: ''; z-index: 1; position: absolute; top: 0; left: 0; height: 100%; box-shadow: 0 0 20px 10px #5E24C3; } .tabs-nav i { border-radius: 100%; cursor: pointer; } .tabs-content { position: relative; padding: 30px; -webkit-transition: 0.3s ease; transition: 0.3s ease; overflow: hidden; } .tabs-content .tab { display: none; } .tabs-content .tab.active { display: block; } .darkmode--deactivated .gametype-stats ul li { background: #e5e5e5 !important; margin-bottom: 5px !important; border-radius: 3px !important; } .darkmode--activated .gametype-stats ul li { background: #4f4f4f !important; margin-bottom: 5px !important; border-radius: 3px !important; } .darkmode--activated .box-2 { background-color: #4f4f4f !important } .tabs-header .border { position: absolute; bottom: 0; left: 0; background: #F4B142 !important; width: auto; height: 2px; -webkit-transition: 0.3s ease; transition: 0.3s ease; border: none !important }