settings

code:style.css

.quick-launch::after {

content: '';

display: block;

position: relative;

background-size: 100% !important;

width: 120px;

height: 120px;

font-size: 0;

border-radius: 50%;

transition: ease .2s box-shadow;

animation-name: bounce;

animation-duration: .5s;

animation-iteration-count: 3;

animation-timing-function: linear;

transform-origin: center bottom;

}

.quick-launch::after:hover {

box-shadow: 0 0 65px rgb(233, 179, 255);

}

@keyframes bounce {

0% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態 */

30% { transform: scale(1.5, 0.5) translate(0%, 0%); } /* 地面に着地し、その変動で潰れだす */

40% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 潰れた反動で一瞬元に戻る */

50% { transform: scale(0.8, 1.3) translate(0%, -30%); } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */

60% { transform: scale(1.0, 1.0) translate(0%, -50%); } /* 潰れた反動が終り、空中で元に戻る */

100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態に戻る */

}

.page {

box-shadow: 0 0 38px 12px rgba(138, 64, 168, 0.5);

border-radius: 0;

background-color: rgb(41, 24, 48);

}

body {

background-color: rgb(29, 14, 36);

}

.grid li.page-list-item a {

background-color: rgb(41, 24, 48);

overflow: unset;

transition: ease .2s box-shadow;

}

.grid li.page-list-item a:hover {

box-shadow: 0 0 40px 8px rgba(233, 179, 255, 0.3) !important;

z-index: 999;

}

.grid li.page-list-item a .header {

border-top: rgb(76, 29, 97) solid 10px;

}

.navbar {

background-color: rgba(138, 64, 168, 0.3);

}

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1;

}

.page-list-item.grid-style-item.pin {

filter: brightness(1.45);

}

.grid li.page-list-item a .pin{

background: transparent;

}

.grid li.page-list-item a .pin{

border: 0;

right: 10px;

}

.grid li.page-list-item a .pin::before{

content: '★';

display: block;

font-size: 20px;

animation-name: star;

animation-duration: 1s;

animation-iteration-count: 1;

animation-timing-function: ease-in-out;

transform-origin: center center;

animation-fill-mode: forwards;

position: absolute;

}

@keyframes star {

0% { transform: rotate(0deg) }

100% { transform: rotate(360deg); }

}

.grid li.page-list-item a .pin::after{

content: '★';

display: block;

font-size: 20px;

opacity: 0;

animation-name: star-zoom;

animation-duration: 0.5s;

animation-delay: 0.9s;

animation-iteration-count: 1;

animation-timing-function: ease-in-out;

transform-origin: center center;

animation-fill-mode: forwards;

position: absolute;

}

@keyframes star-zoom {

0% { transform: scale(1); opacity: 1; }

100% { transform: scale(4); opacity: 0; }

}

.grid li.page-list-item a:hover .pin::before{

animation-name: star-hover;

animation-duration: 2s;

animation-iteration-count: infinite;

}

@keyframes star-hover {

0% {

text-shadow:

0 0 8px rgba(255, 255, 0, 0.5), 0 0 12px rgba(255, 255, 0, 0.3),

0 0 16px rgba(255, 165, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.1),

0 0 24px rgba(255, 165, 0, 0.05);

}

50% {

text-shadow:

0 0 15px rgba(255, 255, 0, 0.5), 0 0 20px rgba(255, 255, 0, 0.3),

0 0 25px rgba(255, 165, 0, 0.2), 0 0 30px rgba(255, 165, 0, 0.1),

0 0 35px rgba(255, 165, 0, 0.05);

}

100% {

text-shadow:

0 0 8px rgba(255, 255, 0, 0.5), 0 0 12px rgba(255, 255, 0, 0.3),

0 0 16px rgba(255, 165, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.1),

0 0 24px rgba(255, 165, 0, 0.05);

}

}

.grid li.page-list-item a .header.pinned{

border-color: rgb(76, 29, 97);

}