hyperixn-style.css

@import url("https://github.com/animate-css/animate.css/blob/main/source/");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

@import url("https://fonts.googleapis.com/css2?family=Satisy&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Acme&display=swap");

/* ============================
    Code Credits [Created by]:
    * anilist.co/user/Anzu
    * anilist.co/user/Megumin (Kurisu)
    * anilist.co/user/Sigma
    * anilist.co/user/ThunderBlaze
    ============================
    Code Credits [Edited by]:
    * anilist.co/user/Hyperixn
    ============================
*/

/* ============================| ANIMATIONS |============================ */

@charset "UTF-8";

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

@keyframes swing {
    20% { transform: rotate3d(0, 0, 1, 40deg); }
    40% { transform: rotate3d(0, 0, 1, -40deg); }
    60% { transform: rotate3d(0, 0, 1, 20deg); }
    80% { transform: rotate3d(0, 0, 1, -20deg); }
    to { transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes hinge {
  0% { animation-timing-function: ease-in-out; }

  20%, 60% {
    transform: rotate3d(0, 0, 1, 20deg);
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    transform: rotate3d(0, 0, 1, 10deg);
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig { animation-name: fadeInDownBig; }

.fadeInLeft { animation-name: fadeInLeft; }

.hinge {
    animation-duration: calc(var(--animate-duration) * 2);
    animation-name: hinge;
    transform-origin: top left;
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

/* ============================| SETTINGS |============================ */

:root, .site-theme-dark, .site-theme-contrast {
  --0.5_ease_in_out: all 0.5s ease-in-out;
  --1s_ease_in_out: all 1s ease-in-out;

  --al_logo_border_thickness: 0px;
  --al_logo_border_radius: 0px;
  --al_logo_hover_scale: 1.15;

  --global_border_radius: 10px;
  --global_box_shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, 
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px;

/* ============================| AVATAR SETTINGS |============================ */

  --avatar_border_thickness: 1px;
  --avatar_border_color: var(--avatar_border_thickness) solid rgb(var(--color-foreground));
  --avatar_border_radius: 255px;
  --avatar_hover_scale: 1;
  --avatar_inner_position: 50% 20%;
  --avatar_picture: url("https://divedigital.id/wp-content/uploads/2022/07/4-Anime-Cowok-Dark-Aesthetic.jpg");
  --avatar_size: 100%;
  --avatar_type: 90px;   /* One Value = Square, Two Values = Rectangle */

/* ============================| BANNER SETTINGS |============================ */

  --banner_content_height: calc(330px - 75px);
  --banner_content_color: calc(var(--banner_content_height) / 2);
  --banner_content_color_final: calc(var(--banner_content_color) - 36px / 2 );

/* ============================| NAV SETTINGS |============================ */

  --nav_length: 60%;
  --nav_border_left: calc((100% - var(--nav_length)) / 2);
  --nav_border_radius: 30px;
  --nav_box_shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px;
  --nav_icon_filter: invert(73%) sepia(72%) saturate(362%) hue-rotate(172deg) brightness(105%) contrast(101%);
  --nav_link_filter: invert(99%) sepia(96%) saturate(2%) hue-rotate(184deg) brightness(107%) contrast(100%);
  --nav_logo_border_color: var(--al_logo_border_thickness) solid rgb(var(--color-blue));
}

/* ============================| MAIN-CODE |============================ */
/* ============================| BACKGROUND |============================ */

#app {
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}

body {
    cursor: url(https://i.imgur.com/zCw7Qel.png), auto;

    background: rgb(var(--color-background)) url("https://i.imgur.com/Mwaw5zu.png") center/100% fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Hide scrollbar */
::-webkit-scrollbar { 
    display: none;  /* Chrome, Safari and Opera */
}

html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ============================| HEADER NAV BAR |============================ */

/* Customise Navbar */
body #nav {
    border-radius: 0 var(--global_border_radius) var(--global_border_radius) 0;
    height: 100%;
    max-height: 700px;
    top: 50% !important;
    transform: translateY(-50%);
    width: 13px; 
    background: rgb(var(--color-foreground));
    box-shadow: var(--nav_box_shadow);
    transition: width 0.3s ease-in-out !important;
}

/* Make Navbar a Grid for better display */
body #nav .wrap {
    align-self: center;
    display: grid;
    grid-template-rows: 85px auto auto 100px;
    margin: 0;
    max-height: 750px;
    overflow: hidden;
    padding: 1;
}

/* Navbar Logo Image */
body #nav .wrap .logo img {
/*    content: var(--nav-lg);*/
    left: 0px;
    width: 50px;
    height: 50px;
    position: relative;`
}

/* Add Anilist text after logo */
body #nav .wrap .logo:after {
    content: 'ANILIST';
    position: absolute;
    font-size: 3.0rem;
    left: 85px;
    font-family: "Nevis";
    letter-spacing: 0.3Rem;
    transition: width 0.3s ease-in-out !important;
    visibility: hidden;
    opacity: 0;
    top: inherit;
    color: #FFF;
}

/* Navbar Search */
body #nav .wrap .search {
    grid-row-start: 2;
    grid-column-start: 1;
    padding: 12px 14px;
    background: rgb(var(--nav-link-hover));
    border-radius: 35px;
    margin: 0 12px 0 12px;
    overflow: hidden;
    white-space: nowrap;
    width: 45px;
    transition: width 0.3s ease-in-out !important;
}

/* Change default search icon color */
body #nav .wrap .search svg{ color: var(--fgca1); }

/* Add search Anilist text in search box */
body #nav .wrap .search:after {
    content: "Search AniList";
    margin-left: 16px;
    color: #FFF;
    transition: transition: all 0.1s ease-in-out;
}

/* Move the search Anilist text on hover */
body #nav .wrap .search:hover:after {
    margin-left: 12px; 
}

/* Navbar Links(Home,Profile,....) */
body #nav .wrap .links {
    display: grid;
    grid-row-gap: max(2.6vh,32px);
    grid-template-rows: min(34px,4vh) min(34px,4vh) min(34px,4vh) min(36px,4vh) min(34px,4vh) min(34px,4vh);
    justify-content:left;
    padding: 10px;
}

/* Make the Navbar Links display correctly */
body #nav .wrap .links > a, body #nav .wrap .links span {
    font-family: "Nevis",sans-serif;
    font-size: 2.4rem;
    border-radius: var(--gbr);
    padding: 0px 20px 0px 8px;
    width: 260px;
    height: 48px;
    display: inline-grid;
    grid-template-columns: 44px auto;
    align-items: center;
    column-gap: 20px;
    white-space: nowrap;
    color: var(--fgca1);
    color: #FFF;
    transition: all 0.1s ease-in-out;
}

/* Change Navbar link colors on hover */
body #nav .wrap .links > a:hover, body #nav .wrap .links span:hover {
    background: rgb(var(--nav-link-hover));
    color: rgb(var(--color-blue));
}

/* Change Browse link color on hover */
body #nav .wrap .links span > a:hover { color: rgb(var(--color-blue)); }

/* Make the browse link container display correctly */
body #nav .wrap .links span { display: inline-block; }

/* Make the browse link display correctly */
body #nav .wrap .links span > a {
    padding: 0;
    display: inline-grid;
    grid-template-columns: 44px auto;
    height: 48px;
    align-items: center;
    column-gap: 20px;
}

/* Add Navbar Icons */
body #nav .wrap .links > a::before, body #nav .wrap .links > span > a::before {
    content: '';
    background-size: 32px;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--nav_link_filter);
}

/* Icon Background Images */
/* Home */
body #nav .wrap .links > a:nth-child(1)::before{ background-image: url('https://i.imgur.com/wTvQHFy.png'); }

/* Profile */
body #nav .wrap .links > a:nth-child(2)::before{ 
    background-size: 26px; 
    background-image: url('https://i.imgur.com/v16GY66.png'); 
}

/* Anime list */
body #nav .wrap .links > a:nth-child(3)::before{ background-image: url('https://i.imgur.com/NXOCS2d.png'); }

/* Manga list */
body #nav .wrap .links > a:nth-child(4)::before{ background-image: url('https://i.imgur.com/8FDvVVC.png'); }

/* Browse */
body #nav .wrap .links > span > a::before{ background-image: url('https://i.imgur.com/63znEdV.png'); }

/* Forum */
body #nav .wrap .links > a:nth-child(6)::before{ background-image: url('https://i.imgur.com/yABQ1y8.png'); }

/* Change colors of icons through filter, Since I used png */
body #nav .wrap .links > a:hover::before, body #nav .wrap .links > span:hover > a::before {
    filter: var(--nav_icon_filter);
}      

/* Edit browse dropdown location */
body #nav .wrap .links .browse-wrap .dropdown {
    top: 50%;
    margin-top: min(20px,1vh);
    left: 250px;
    position: fixed;
}

/* Hide browse dropdown arrow */
body #nav .wrap .links .browse-wrap .dropdown:before { visibility: hidden; }

/* Navbar User Photo and Dropdown Arrow */
body #nav .wrap .user {
    justify-self: left;
    display: grid;
    height: 100px;
}

/* Add a border around profile photo */
body #nav .wrap .user .user-wrap .avatar {
    border: solid 1px rgba(var(--color-blue), 1);
    border-radius: var(--nav_border_radius);
}

/* Hide profile arrow */
body #nav .wrap .user .user-wrap .chevron { visibility: hidden; }

/* Edit dropdown location */
body #nav .wrap .user .user-wrap .dropdown {
    left: 50px;
    position: fixed;
}

@media (height <= 800px) {
    body #nav .wrap .user .user-wrap .dropdown{
        bottom: 5px;
        top: auto;
    }
}

@media (height > 800px) {
    body #nav .wrap .user .user-wrap .dropdown{
        top: 50%;
        margin-top: 150px;
    }
 }

/* Hide Profile dropdown arrow */
body #nav .wrap .user .user-wrap .dropdown:before { visibility: hidden; }

/* Navbar Notification Dot */
body #nav .wrap .user .notification-dot{ grid-row-start: 1; }
    
 /* Change navbar width on hover */
body #nav:hover { width: 250px; }

/* Make anilist text appear on hover */
body #nav:hover .wrap .logo:after {
    visibility: visible;
    opacity: 1;
}

/* Make the search expand */
body #nav:hover .wrap .search { width: calc(100% - 24px); }

/* ============================| BANNER |============================ */
.banner {
    visibility: hidden;
}

.banner > .container {
    visibility: visible;
    align-items: center;
    justify-content: center;
}

.container > .banner-content {
    position: absolute;
    height: var(--banner_content_height);
    width: 0;
    align-items: center;
    justify-content: center;
}

.banner-content > .avatar {
    padding: var(--avatar_type);
    background: var(--avatar_picture);
    background-size: var(--avatar_size);
    background-repeat: no-repeat;
    background-position: var(--avatar_inner_position);
    border-radius: var(--avatar_border_radius);
    border: var(--avatar_border_color);
    box-shadow: var(--global_box_shadow);

    animation: fadeInDownBig;
    animation-duration: 2s;
    animation-iteration-count: 1;
    position: absolute;

    /* transform: rotate(-5deg);
    animation: fadeInDownBig, swing;
    animation-duration: 2s, 20s;
    animation-iteration-count: 1, infinite; */
}

.banner-content > .title { display: none }

.banner-content:hover > .avatar {
    border-color: rgb(var(--color-blue));
    transform: scale(var(--avatar_hover_scale));
}

.banner-content > .name-wrapper {
    position: absolute;
    transform: translateY(75px);
}

.banner-content > .name-wrapper .name {
    font-size: 5.5rem;
    color: rgb(var(--color-blue), 0.75);

    padding: 30px 50px 0px 10px;
    display: flex;
    align-items: center;

    font-family: "Acme", serif;
    filter: drop-shadow(0px 0px 6px black);
    opacity: 0;
    pointer-events: none;
}

.banner-content > .mod-badge-wrap {
    position: absolute;
    transform: translateY(-95px);
    transition: var(--1s_ease_in_out);

    margin: 0;
    padding: 3px 6px;
    white-space: nowrap;
}

.banner-content > .mod-badge-wrap:hover {
    background: rgba(var(--color-blue), 1);
}

.banner-content > .actions {
    position: absolute;
    transform: translate(135px, 20px);

    bottom: var(--banner_content_color_final);
    margin: 0;
    padding: 0;
    opacity: 0;
}

.actions > .nav-btn {
    width: 100px;
    padding: 5px 5px;

    transition: var(--1s_ease_in_out);
    opacity: 0;
}

.banner-content:hover > .actions {
    opacity: 1;
}

.donator-badge[data-v-1cc2919e] {
    display: none;
}

.actions > .dropdown {
    transform: translate(-15px, 30px);
}

/* Set Animations for Name and Donator Badge  */ 
.banner-content:hover > .actions > .nav-btn { 
    animation: fadeInLeft ; 
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition: var(--1s_ease_in_out);
}

.banner-content:hover > .name-wrapper > .name { 
    animation: fadeInDownBig, hinge; 
    animation-duration: 5s, 8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition: var(--1s_ease_in_out);
}

.header-wrap .nav-wrap .nav .link {
  margin: 0 30px;
  font-size: 1.7rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  transition: 0.5s;
}

.header-wrap .nav-wrap .nav .link:hover {
  border-bottom: 2px solid rgba(var(--color-blue), 0.35);
  transition: 0.2s;
}

.header-wrap .nav-wrap .nav .link.router-link-active {
  border-bottom: 3px solid rgba(var(--color-blue), 1);
}

.header-wrap .nav-wrap .nav .link:nth-child(7),
.header-wrap .nav-wrap .nav .link:nth-child(8) {
  width: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
}

/* ============================| SHORT NAV BAR |============================ */

.header-wrap > .nav-wrap {
    background: rgb(var(--color-foreground));
    border-style: solid;
    border-width: 2px;
    border-color: rgba(0, 0, 0, 0);

    width: 70%;
    margin: 0 auto;
    padding: 0px;
    transform: translate(0px, 1px);

    border-radius: 60px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* ============================| ALTERNATIVE STATS |============================ */

.section > .stats-wrap > .list-stats {
  border-style: solid;
  border-width: 2px;
  border-radius: 25px !important;
  border-color: rgba(0, 0, 0, 0);
}

.section > .stats-wrap > .list-stats > .stats-wrap {
    display: grid;
    grid-auto-flow: column;
    grid-row-gap: 10px;
    grid-template-columns: auto auto;
    padding: 20px 20px;
    text-align: center;
}

.section > .stats-wrap > .list-stats > .stats-wrap .stat .value {
  font-size: 3rem;
  font-weight: 700;
  padding-bottom: 0px;
}

.section > .stats-wrap > .list-stats > .stats-wrap .stat .label {
  font-size: 1.2rem;
  font-weight: 400;
  color: rgb(var(--color-text-light));
}

/*.section > .stats-wrap > .list-stats > .stats-wrap .stat:nth-child(1) {
  grid-row-start: span 2;
}*/

.section > .stats-wrap > .list-stats:nth-child(2) .stat:nth-child(1) .label,
.section > .stats-wrap > .list-stats:nth-child(1) .stat:nth-child(1) .label {
  color: rgb(var(--color-text-light));
}

/* .section > .stats-wrap > .list-stats:nth-child(1) .stat:nth-child(1) .label:before {
    font-family: FontAwesome;
    content: "\f26c";
    margin-right: 5px;
}

.section>.stats-wrap>.list-stats:nth-child(1) .stat:nth-child(2) .label:before {
    font-family: FontAwesome;
    content: "\f133";
    margin-right: 5px;
}

.section>.stats-wrap>.list-stats:nth-child(2) .stat:nth-child(1) .label:before {
    font-family: FontAwesome;
    content: "\f02d";
    margin-right: 5px;
}

.section>.stats-wrap>.list-stats:nth-child(2) .stat:nth-child(2) .label:before {
    font-family: FontAwesome;
    content: "\f0c5";
    margin-right: 5px;
} */

.stats-wrap > .stat:nth-child(3) {
    display: none ;
}

.section > .stats-wrap > .list-stats > .footer {
    width: 0;
    height: 0;
}

/* ============================| PROFILE |============================ */

.user .about > div.content-wrap, .activity-history{
    border-radius: 15px !important;
    max-height: 3000px;
}

.favourite { border-radius: 30px !important; }

/* Hide Genre Overview section */
.desktop:nth-of-type(3) {
    height: 0;
    visibility: hidden;
}

/* ============================| ACTIVITIES |============================ */

.activity-entry > .wrap > .text .avatar {
    border-style: solid;
    border-width: thin;
    border-radius: 20px;
    border-color: rgba(0, 0, 0, 0);
    transition: transform .8s;
}

.activity-entry > .wrap > .text .avatar:hover  {
    border-color: rgba(var(--color-foreground), 0.5);
    transform: scale(1.1);
}

.activity-message > .wrap > .time,
.activity-text > .wrap > .time  {
    left: 72px;
    top: 45px;
    font-weight: 300;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

.activity-entry.activity-text > .wrap > .actions, 
.activity-entry.activity-message > .wrap > .actions  {
    right: 0;
    bottom: 0;
    font-size: 1.35rem;
    position: relative;
    margin: 10px 10px 10px 15px;
}

.activity-entry > .wrap > .text {
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(var(--color-text), 0.1);
    padding-bottom: 1px;
}

.wrap, .reply {
    border-radius: 15px !important;
}

/* ============================| LOAD MORE |============================ */

.scroller > .load-more {
    font-family: 'Acme', serif;
    font-size: 1.5rem;
    color: rgb(var(--color-blue), 0.75);
    margin: auto;
    max-width: 200px;
    filter: drop-shadow(0px 0px 6px black);
}

.desktop > .section-header, .section-header, .list-wrap > .section-name {
    font-family: 'Satisfy', serif;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: rgba(var(--color-blue), 1);
    text-decoration: underline;
}

/* ============================| ANIME / MANGA LIST TAB |============================ */

.filters > .filter-group, .medialist > .lists {
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: rgba(0, 0, 0, 0);
    color: rgba(var(--color-blue), 1);
}

/* ============================| STATS TAB |============================ */

.stats > .filters > .filter-wrap {
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: rgba(0, 0, 0, 0);
    color: rgba(var(--color-blue), 1);
}

/* ============================| ALIGNMENT FIXES |============================ */
/* ============================| EXTRAS | BUG-FIXES |============================ */
.pinned{ padding-left: 20px; }

p { margin: 5px; }

.markdown img { border-radius: 0px; }

.markdown hr { border: solid 1px rgba(var(--color-blue), 1); }

.markdown blockquote { margin-right: auto; }

.hohColourPicker, .theme-selector > .contrast, .hohDismiss { display: none; }

.site-theme-dark{ --color-foreground: 16, 24, 35, 1; }

.content.container {
    max-width: 70%;
    padding: 0.1%;
}

.activity-feed-wrap, .stats-wrap {
    padding: 0.5%;
    max-width: 100%
}

.medialist > .lists {
   padding-left: 50px;
   padding-right: 50px;
}

.medialist > .lists > .actions { transform: translate(-50px, 25px); }

.favourites > .section-header {
  padding-left: 12px;
  align-items: center;
}

/* ============================| HEADER NAV BAR OLD |============================ */
/*
#nav {
    background: rgb(var(--color-foreground)) !important;
    color: rgb(var(--color-text-light)) !important;
    border-radius: 0 0 var(--br) var(--br);
    left: var(--nav_border_left);
    width: var(--nav_length);
    box-shadow: var(--global_box_shadow);
}

.hide, .nav.nav-unscoped { top: -65px !important; }

.nav.nav-unscoped.transparent, .nav:hover { top: 0px !important; }

.links > .link:hover { color: rgb(var(--color-blue)); }

#app > .progress { background-color: rgb(var(--color-blue)); }

.logo > img {
    content: url("https://cdn.countryflags.com/thumbs/scotland/flag-heart-3d-250.png");
    border-radius: var(--al_logo_border_radius);
    border: var(--nav_logo_border_color);
    transition: var(--0.5_ease_in_out);
}

.logo > img:hover {
    transform: scale(var(--al_logo_hover_scale));
}*/