Skip to content

Instantly share code, notes, and snippets.

@santobollove

santobollove/midnight-waves

Created May 19, 2022 12:51
Show Gist options
  • Save santobollove/74b2f093197d2abdf7b586693c9e3cd1 to your computer and use it in GitHub Desktop.
Save santobollove/74b2f093197d2abdf7b586693c9e3cd1 to your computer and use it in GitHub Desktop.
Download ZIP
MyAnimeList css
Raw
midnight-waves
/* -------------------- Midnight Waves - by: ushruff -------------------- */
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink";
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";
@\import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Overpass:wght@400;700&family=Quicksand:wght@400;600&family=Rubik:wght@300;400;600;700&display=swap');
:root {
--main-back: #101415;
--card-back: #262626;
--bord-rad: 6px;
--clr: #dbe4ec;
--table-width: min(95%, 2710px);
--font-main: "Rubik", sans-serif;
--font-sec: "Lato", sans-serif;
--font-ter: "Overpass", sans-serif;
}
/* ------ Loading ------ */
.list-unit .loading-space {
height: auto;
margin: 18px 0 0
}
.list-unit .loading-space i {
width: 24px;
height: 24px;
background: url(https://image.myanimelist.net/ui/uPWTt-aXqsOCFgzRgUepKIVC-TrkF7ohhFcf8qSTP29mt6FkvaARxi_fOxfZSvK5) center/auto no-repeat;
margin: 0 auto;
font-size: 0;
animation: 1.2s cubic-bezier(.35, 0, .35, 1) 0s infinite both loading
}
@keyframes loading {
from {
transform: rotate(45deg)
}
to {
transform: rotate(405deg)
}
}
[data-owner=""] .list-unit .loading-space i {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwG63SZ3s2rZBMp3GReHkFlM)
}
/* -------------------- */
body.ownlist {
display: flex;
flex-direction: column;
min-height: 100%;
background: center center/cover fixed no-repeat var(--card-back);
background-image: url(https://opengameart.org/sites/default/files/Full%20Moon%20-%20background.png);
background-color: #666;
background-blend-mode: hard-light;
}
footer {
position: relative;
margin-top: auto;
}
footer::before {
content: "";
position: absolute;
width: var(--table-width);
height: 10px;
top: 0;
left: 50%;
transform: translateX(-50%);
border-top: 1px solid rgb(45, 49, 51);
}
#footer-block {
font-family: var(--font-sec);
background: rgba(0, 0, 0, 0) linear-gradient(360deg, rgba(45, 41, 51, 0.75) 0%, rgba(45, 41, 51, 0) 100%) repeat scroll 0% 0%;
}
#copyright::after {
content: "Midnight Waves - by UshRuFF.";
}
.header {
display: flex;
height: 50px;
width: 100%;
flex-direction: row-reverse;
justify-content: space-between;
}
.header .header-menu {
position: relative;
display: flex;
height: 100%;
top: 0;
flex-direction: column;
justify-content: center;
align-items: flex-end;
flex: 1 1 auto;
padding-right: 62.5px;
}
.header .header-title {
position: relative;
height: 100%;
width: 150px;
top: 0;
background: url(https://image.myanimelist.net/ui/uPWTt-aXqsOCFgzRgUepKKS_4qaKfvfxG6opq61fpL1PkHKcMQvTFNDQ8zO_dcZO) 4px/auto 25px no-repeat;
background-position-x: center;
}
.header .header-menu.other {
top: 0;
}
.header .header-menu .btn-menu,
.header .header-menu .btn-menu > a,
.header .header-menu .list-menu .icon-menu {
font-family: var(--font-sec);
color: var(--clr);
}
.header .header-menu .btn-menu {
font-family: var(--font-main);
font-size: 17px;
}
.header .header-info,
.header .header-info > a {
font-family: var(--font-ter);
color: var(--clr);
}
.header .header-menu .list-menu {
top: 30px;
right: 62px;
background-color: var(--card-back);
border-color: var(--main-back);
}
.header .header-menu .list-menu .icon-menu:hover {
background-color: var(--main-back);
}
.header .header-menu .list-menu .icon-menu svg.icon {
fill: var(--clr);
}
.cover-block {
width: var(--table-width);
margin: 0 auto;
}
.cover-block .image-container {
display: block;
width: 100%;
padding-top: 0;
}
.cover-block .image-container img {
max-width: 100%;
width: var(--table-width);
height: min(22vw, 600px);
box-sizing: border-box;
background-size: max(100%, 25rem);
background-position-x: left;
background-position-y: -150px;
background-repeat: no-repeat;
padding-left: var(--table-width);
background-image: url(https://i.imgur.com/zh1QSA2.png);
border-radius: var(--bord-rad);
opacity: 0.75;
}
.cover-block .image-container:hover .btn-list-setting {
right: calc(50% - (var(--table-width) / 2) + 50px);
z-index: 2;
}
.cover-block .image-container .btn-list-setting:hover {
background-color: rgba(8, 43, 112, .5);
border-color: #080811;
color: var(--clr);
}
.status-menu-container {
position: relative;
width: 100%;
background-color: #333131;
border-bottom-color: #242323;
}
.status-menu-container.fixed {
position: sticky;
z-index: 10;
}
.status-menu-container .status-menu .status-button {
font-family: var(--font-ter);
font-size: 1.45em;
font-weight: 800;
color: #ccc;
}
.status-menu-container .status-menu .status-button.on {
color: #ddd;
}
.status-menu-container .search-container {
position: absolute;
right: calc(50% - (var(--table-width) / 2) + 40px);
}
.status-menu-container .search-container #search-box {
line-height: 30px;
margin-top: 6px;
margin-right: 10px;
}
.status-menu-container .search-container #search-box.open {
width: 150px;
}
.status-menu-container .search-container #search-button {
width: 30px;
height: 30px;
line-height: 30px;
margin-top: 16px;
color: var(--clr);
}
#search-box > input {
background: var(--card-back);
border-radius: 100vw;
padding-inline: 10px;
border-color: #333;
}
/* MAIN LIST */
/* LIST STATS & FILTER */
.list-unit,
.list-unit .list-status-title,
.list-unit .list-stats {
position: relative;
width: 100%;
}
.list-unit .list-status-title {
height: 30px;
line-height: 30px;
margin-bottom: 10px;
background-color: transparent;
z-index: 2;
}
.list-unit .list-status-title .text {
display: none;
}
.list-unit .list-status-title .stats {
position: relative;
display: flex;
height: 30px;
right: calc(50% - (var(--table-width) / 2));
flex-direction: row-reverse;
justify-content: flex-start;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 50px;
line-height: 30px;
z-index: 2;
pointer-events: none;
}
.list-unit .list-status-title .stats a {
margin: 0;
color: transparent;
pointer-events: all;
}
.list-unit .list-stats {
width: auto;
margin: -60px 120px 30px;
font-family: var(--font-sec);
letter-spacing: 0.052em;
background-color: transparent;
z-index: 1;
}
#show-stats-button,
#advanced-options-button {
position: relative;
}
#show-stats-button .fa::before,
#advanced-options-button .fa::before {
position: absolute;
display: flex;
width: 30px;
height: 30px;
flex-direction: column;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: center;
align-items: center;
font-size: 2.2em;
color: var(--clr);
}
/* -------------------- */
/* SORT BY */
.list-table > tbody:first-of-type {
position: absolute;
width: 150px;
height: 47px;
top: 10px;
left: calc(50% - (var(--table-width) / 2) + 50px);
font-family: var(--font-ter);
font-size: 15px;
font-weight: 800;
background: transparent;
z-index: 3;
pointer-events: none;
}
.list-table > tbody:first-of-type:hover {
pointer-events: all;
}
.list-table > tbody:first-of-type::before {
content: "Sort";
position: absolute;
display: flex;
width: 57px;
height: 90%;
justify-content: flex-start;
align-items: center;
padding-left: 10px;
line-height: 16px;
border: 1px solid white;
border-radius: var(--bord-rad);
color: var(--clr);
z-index: 1;
pointer-events: all;
}
.list-table > tbody:first-of-type::after {
content: "\f0dc";
position: absolute;
top: 10px !important;
left: 50px;
margin: 2px;
font-size: 14px;
font-family: FontAwesome;
text-align: center;
color: var(--clr);
}
.list-table .list-table-header {
display: flex;
flex-direction: column;
transform: translateY(15%);
padding: 30px 0;
opacity: 0;
}
.list-table .list-table-header .header-title {
display: flex;
width: auto !important;
padding-left: 10px !important;
text-align: left !important;
align-items: center;
background: #333;
border-bottom: var(--card-back) 1px solid;
}
.list-table .list-table-header .header-title .link {
position: relative;
display: flex !important;
width: 100%;
height: 100%;
align-items: center;
font-size: 13px;
padding: 0;
color: var(--clr) !important;
}
.list-table > tbody:first-of-type:hover .list-table-header {
opacity: 1
}
.list-table .list-table-header .header-title .sort-icon {
color: currentcolor;
}
.list-table .list-table-header .header-title .fa-sort-asc::before,
.list-table .list-table-header .header-title .fa-sort-desc::before {
content: "";
position: absolute;
right: 15px;
border: 6px solid transparent;
}
.list-table .list-table-header .header-title .fa-sort-asc::before {
top: 8px;
border-bottom-color: currentcolor;
}
.list-table .list-table-header .header-title .fa-sort-desc::before {
bottom: 8px;
border-top-color: currentcolor;
}
.header-title.days,
.header-title.image,
.header-title.number,
.header-title.status,
.header-title.tags {
display: none !important;
}
/* -------------------- */
/* LIST MENU - credits to Cateinya*/
.header:before {
/* menu icon for click simulation */
content: "";
cursor: pointer;
font-family: FontAwesome;
font-size: 25px;
color: white;
padding: 7px;
box-sizing: border-box;
height: 46px;
left: 0;
position: fixed;
top: 0;
width: 46px;
z-index: 98;
}
.header:active:before {
pointer-events: none;
}
.list-menu-float {
background: var(--card-back);
border: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 0 !important;
bottom: 0;
margin-left: -300px;
transition: margin 0.2s ease 0s, z-index 0s ease 0s;
width: 300px;
z-index: 97;
overflow: hidden;
display: flex;
flex-direction: column;
}
.list-menu-float:before {
content: "\f0c9";
cursor: pointer;
height: 46px;
left: 0;
position: fixed;
top: 0;
width: 46px;
transition: left 0.2s ease 0s, background 0.2s ease 0s;
font-family: FontAwesome;
font-size: 25px;
color: white;
padding: 7px;
box-sizing: border-box;
}
.list-menu-float:hover {
margin-left: 0px;
z-index: 99;
}
.list-menu-float:hover:before {
content: "";
background: #0000004a;
height: 100%;
left: 300px;
width: 100%;
}
.list-menu-float:active:before {
pointer-events: none;
cursor: initial;
transition: 0s;
}
.list-menu-float .icon-menu,
.list-menu-float form {
/* All list menu buttons */
transition: none;
}
.list-menu-float .icon-menu:not(.profile),
.list-menu-float form {
background: transparent !important;
width: 300px !important;
flex: 1 1 100%;
position: relative;
}
.list-menu-float .icon-menu:not(.profile):before,
.list-menu-float form:before {
content: "";
position: absolute;
top: 0;
transition: margin 0.3s ease 0s;
}
.list-menu-float .icon-menu:not(.profile):hover:before,
.list-menu-float form:hover:before {
margin: 0 !important;
}
.list-menu-float .icon-menu .text {
/* text display */
color: var(--clr) !important;
opacity: 1 !important;
width: auto !important;
left: 110px;
transition: none;
}
.list-menu-float .icon {
/* All list menu icons */
fill: var(--clr) !important;
left: 75px !important;
}
.list-menu-float .icon-menu:hover .text {
color: #bde2ee !important;
}
.list-menu-float .icon-menu:hover .icon {
fill: #bde2ee !important;
}
.list-menu-float .icon-menu.profile {
position: absolute;
top: 15px;
left: 15px;
height: 80px;
width: 80px;
border: 2px solid var(--clr);
border-radius: 50%;
pointer-events: none;
}
.icon-menu.profile::before {
color: var(--clr);
content: attr(href);
font-size: 16px;
left: 100%;
overflow: hidden;
pointer-events: none;
position: absolute;
text-align: left;
text-indent: -256px;
top: 12px;
margin-left: 15px;
display: block;
width: 180px;
}
.icon-menu.profile::after {
content: "View my profile";
color: var(--clr);
font-weight: bold;
left: 100%;
position: absolute;
text-align: left;
top: 40px;
margin-left: 5px;
padding-left: 10px;
display: block;
width: 180px;
pointer-events: all;
border-top: 1px solid;
padding-top: 7px;
padding-bottom: 10px;
}
.list-menu-float .icon-menu.quick-add {
margin-top: 115px;
}
/* logout */
.list-menu-float .icon-menu.setting .text {
/* setting button (owner only) */
height: 50px !important;
width: 110px !important;
opacity: 1 !important;
text-align: left;
}
.list-menu-float .icon-menu.setting .text a {
background: transparent !important;
border: none !important;
color: var(--clr) !important;
opacity: 1 !important;
height: auto !important;
padding-bottom: 10px;
position: relative !important;
line-height: initial !important;
top: 0 !important;
}
.list-menu-float .icon-menu.setting .text a:hover {
color: #bde2ee !important;
}
/* -------------------- */
/* TABLE */
.list-container {
width: 100%;
background: transparent;
border: none;
}
div[style="padding-top: 8px"] {
padding-top: 0 !important;
}
.list-block {
margin-top: 0;
}
.status-menu-container.fixed + div.list-block {
margin-top: 28px;
}
.list-table {
display: flex;
width: var(--table-width);
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 40px;
padding-top: 0 !important;
padding: 30px 0;
border: none;
}
.list-item {
position: relative;
width: 234px;
height: 352px;
margin-right: -27px;
margin-left: -27px;
margin-bottom: -83px;
border-radius: var(--bord-rad);
background: transparent !important;
overflow: hidden;
z-index: 1;
}
.list-item .list-table-data .data {
display: block;
padding: 0;
border: none;
}
.list-item a {
color: var(--clr);
}
.list-table .list-table-data a:not(.edit-disabled):hover {
color: var(--clr) !important;
}
/* Image */
.list-item .list-table-data .data.image .image {
display: none;
}
.data.image {
position: absolute;
display: flex;
width: 100%;
height: 100%;
border-radius: var(--bord-rad);
}
.data.image .link,
.data.image .link::before,
.data.image .link::after {
position: absolute;
display: block;
width: 180px;
height: 240px;
top: 0;
left: 50%;
transform: translateX(-50%);
border-radius: var(--bord-rad);
background-size: cover;
background-repeat: no-repeat;
background-color: transparent;
z-index: 2;
}
.data.image .link::before {
content: "";
top: -40px;
transform: scale(0.8) translate(-60%, -13%);
background-color: var(--card-back);
z-index: 5;
opacity: 0;
}
.data.image .link:after {
content: "";
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/YTk3aYm.png);
background-repeat: repeat-x;
background-position-x: 0px;
background-position-y: -20px;
background-size: cover;
filter: invert(0.14);
z-index: -1;
opacity: 0;
}
.data.image .link {
transform: scalex(.5) translateX(-100%);
transform-origin: center center;
}
.data.image .link::before {
top: 0;
transform: scalex(2) translateX(-25%);
transform-origin: center center;
opacity: 1;
}
/* Status */
.list-item .list-table-data .data.status {
position: absolute;
display: block;
width: 100%;
height: 10px;
bottom: -1px;
left: 0;
z-index: 1;
opacity: 0;
transform: scale(0.5);
transform-origin: center;
}
/* Number */
.list-item .list-table-data .data.number {
position: absolute;
display: block;
min-width: 30px;
height: 20px;
top: 0;
right: 40px;
font-size: 1.45em;
font-weight: 600;
padding: 0.5em 0 1.25em;
background: var(--main-back);
clip-path: polygon(100% 0, 100% 100%, 50% 78%, 0% 100%, 0% 0%);
color: var(--clr);
z-index: 3;
opacity: 0.8;
}
/* Title */
.list-item .list-table-data .data.title {
position: absolute;
display: block;
width: 100%;
height: 100%;
font-family: var(--font-main);
padding: 0;
z-index: 5;
}
.list-item .data.title .link {
position: absolute;
width: 190px;
height: 16.5px;
bottom: 85px;
left: calc(50% + 4px);
transform: translateX(-50%);
text-align: left;
font-size: 1.3em !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-item .data.title .icon-watch,
.list-item .data.title .icon-watch-pv {
display: none;
}
/* Content Status */
.list-item .data.title .content-status {
position: absolute;
width: 85px;
top: 24px;
left: 24px;
padding: 3px 0;
transform: rotate(-45deg);
font-family: var(--font-sec);
font-weight: 600;
font-size: 1em !important;
text-align: center;
}
.data.title .content-status::after {
content: "";
position: absolute;
width: 240px;
left: -25px;
top: 0;
height: 100%;
display: block;
background-color: #585fd0c4;
z-index: -1;
clip-path: polygon(9.5% 0%, 100% 0, 100% 100%, 0 100%);
}
/* Edit */
.add-edit-more {
position: absolute;
display: flex;
width: 50%;
top: 66%;
left: 50%;
transform: translateX(-50%);
justify-content: center;
margin: 3px 0 !important;
color: transparent;
opacity: 0;
}
.add-edit-more .more {
display: none;
}
.add-edit-more .edit,
.add-edit-more .add {
position: relative;
display: block;
width: 50%;
left: 5px;
text-align: center;
font-family: var(--font-sec);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 2px 22px 3px 10px;
border-radius: 100vw;
background: #4141be;
}
.add-edit-more .edit a,
.add-edit-more .add a {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
top: -1px;
left: 0;
padding: 3px 12px 1px 2px;
}
.add-edit-more .edit::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 4px;
right: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' %3E%3Cg%3E%3Cpath fill='%23fff' d='M20.5,64v11.5H32l33.8-33.8L54.3,30.2L20.5,64z M74.6,32.9c1.2-1.2,1.2-3.1,0-4.3l-7.1-7.1 c-1.2-1.2-3.1-1.2-4.3,0L57.6,27L69,38.4L74.6,32.9z'/%3E%3C/g%3E%3C/svg%3E");
}
.add-edit-more .add::after {
content: "";
position: absolute;
font: normal normal normal 14px/1 FontAwesome;
font-size: 12px;
line-height: 1.2em;
width: 16px;
height: 16px;
top: 6px;
right: 15px;
color: white;
}
/* Score, Chapter, Progress */
.list-item .list-table-data .data.score,
.list-item .list-table-data .data.chapter,
.list-item .list-table-data .data.progress {
position: absolute;
display: flex;
width: 45%;
height: 20px;
bottom: 60px;
justify-content: center;
align-items: center;
font-family: var(--font-main);
font-size: 12px;
line-height: 1.4;
text-align: center;
z-index: 5;
}
.list-item .list-table-data .data.score {
left: 27.2%;
transform: translateX(-50%);
}
.list-item .list-table-data .data.chapter,
.list-item .list-table-data .data.progress {
right: 27.2%;
transform: translateX(50%);
color: var(--clr);
}
.data.score .link {
padding-left: 35px;
}
.data.score::before {
content: "";
position: absolute;
width: 15px;
top: -1px;
left: 35%;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' %3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23fff;%7D%0A%3C/style%3E%3Cg %3E%3Cpath class='st0' d='M58.1,53.9l10.1-9.8l-13.9-2L48,29.4L41.8,42l-13.9,2l10.1,9.8l-2.4,13.9L48,61.2l12.5,6.6 L58.1,53.9z M75.5,42.1c0,0.5-0.3,1-0.9,1.6l-12,11.7l2.8,16.5c0,0.2,0,0.4,0,0.7c0,1.1-0.5,1.7-1.4,1.7c-0.4,0-0.9-0.1-1.3-0.4 L48,66l-14.8,7.8c-0.5,0.3-0.9,0.4-1.3,0.4c-0.5,0-0.8-0.2-1-0.5c-0.2-0.3-0.3-0.7-0.3-1.2c0-0.1,0-0.4,0.1-0.7l2.8-16.5l-12-11.7 c-0.6-0.6-0.8-1.1-0.8-1.6c0-0.8,0.6-1.3,1.9-1.5l16.6-2.4l7.4-15c0.4-0.9,1-1.4,1.6-1.4s1.2,0.5,1.6,1.4l7.4,15l16.6,2.4 C74.9,40.8,75.5,41.3,75.5,42.1z'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 25px;
background-position: center center;
}
.data.chapter::before,
.data.progress::before {
content: "";
position: absolute;
width: 1px;
top: 1px;
bottom: 1px;
left: -1px;
background: var(--clr);
filter: brightness(0.7);
}
.data.score::after,
.data.chapter::after,
.data.progress::after {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-sec);
font-size: 0.8em;
font-weight: 400;
color: var(--clr);
opacity: 0;
}
.data.score::after {
content: "Score";
padding-left: 25px;
}
.data.chapter::after {
content: "Chapters";
}
.data.progress::after {
content: "Episodes";
}
.data.score select,
.data.chapter input,
.data.progress input {
position: relative;
box-sizing: border-box;
width: 45px !important;
height: 25px;
font-family: var(--font-main);
font-size: 14px;
text-align: center;
background: rgba(255, 255, 255, .1);
border: none;
border-bottom: 2px solid white;
padding: 4px 8px;
margin: 0;
outline: none;
}
.data.score select {
top: -1px;
left: 25px;
}
.data.chapter input,
.data.progress input {
left: -5px;
}
.list-item:not(:hover) .data.score .link,
.list-item:not(:hover) .data.chapter .link,
.list-item:not(:hover) .data.chapter span,
.list-item:not(:hover) .data.progress .link,
.list-item:not(:hover) .data.progress span,
.list-item:not(:hover) .fa-plus-circle::before {
color: #b5b5b5;
}
.list-item:not(:hover) .data.score::before {
filter: brightness(0.8);
}
.list-table .list-table-data a.edit-disabled {
color: #b5b5b5;
}
/* Card Hover */
.list-item:hover {
margin-top: -64px;
z-index: 10;
transform: scale(1.12);
transform-origin: center;
}
.list-item:last-child:hover {
margin-bottom: -19px;
}
.list-item:hover .data.image .link {
width: 100%;
height: 100%;
top: 40px;
transform: translate(-50%, 0);
background-color: #4e4e4e;
background-blend-mode: overlay;
z-index: -1;
transition: transform 220ms cubic-bezier(.81,.61,.33,.86);
}
.list-item:hover .data.image .link:after {
animation: waves linear 7s infinite;
opacity: 1;
}
@keyframes waves {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -262px;
}
}
.list-item:hover .data.image .link::before {
animation: linkbefore cubic-bezier(.81,.61,.33,.86) 220ms forwards;
}
@keyframes linkbefore {
0% {
opacity: 0;
transform: scale(0.8) translatex(-60%);
top: 10px;
}
5% {
opacity: 0.85;
transform: scale(0.8) translatex(-60%);
top: 10px;
}
100% {
opacity: 1;
transform: scale(0.8) translate(-60%, -13%);
top: -40px;
}
}
.list-item:hover .data.status {
transform: scale(1);
opacity: 1;
transition: opacity 240ms cubic-bezier(.81,.61,.33,.86), transform 240ms cubic-bezier(.81,.61,.33,.86);
}
.list-item:hover .data.number {
/* transform: translate(115%, 82%); */
transform: translate(calc(100% + ((45px - 100%)/4)), 82%);
opacity: 1;
transition: opacity 70ms ease-out;
}
.list-item:hover .data.title .link {
left: 50%;
font-size: 1.36em !important;
text-align: center;
padding-bottom: 10px;
transform: translate(-50%, -145%);
}
.list-item:hover .data.title .content-status {
animation: constat cubic-bezier(.81,.61,.33,.86) 240ms forwards;
}
@keyframes constat {
0% {
opacity: 0;
transform: rotate(-45deg) scale(0.9) translate(30%, 132%);
}
30% {
opacity: 0.5;
}
70% {
opacity: 1;
}
100% {
transform: rotate(-45deg) scale(0.9) translate(16px, 32%);
}
}
.list-item:hover .data.title .content-status::after {
animation: constatafter cubic-bezier(.81,.61,.33,.86) 240ms forwards;
}
@keyframes constatafter {
0% {
opacity: 0;
transform: translate(30%, 132%);
}
30% {
opacity: 0.5;
}
70% {
opacity: 1;
}
100% {
transform: translate(3px, 0%);
}
}
.list-item:hover .data.title .add-edit-more {
transform: translate(-50%, -20%);
opacity: 1;
}
.list-item:hover .data.score,
.list-item:hover .data.chapter,
.list-item:hover .data.progress {
font-size: 1.318em;
transform: scale(1.2);
}
.list-item:hover .data.score {
transform: translate(-50%, 50%);
}
.list-item:hover .data.chapter,
.list-item:hover .data.progress {
transform: translate(50%, 50%);
}
.list-item:hover .data.score::after,
.list-item:hover .data.chapter::after,
.list-item:hover .data.progress::after {
opacity: 0.7;
}
/* -------------------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment