div#content p a {
border-bottom: 1px solid var(--primary-color);
padding-bottom: 2px;
color: var(--primary-color);
background-image: linear-gradient(var(--primary-color), var(--primary-color));
background-position-x: 0;
background-position-y: 100%;
background-repeat: no-repeat;
background-size: 0 1em;
transition: background-size .2s ease-in-out;
}
div#content p a:hover {
background-size: 100% 2em;
color: #fff;
}
.custom-title {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 1.5rem;
}
.custom-title h1,
.custom-title h2,
.custom-title h3,
.custom-title h4,
.custom-title h5 {
width: fit-content;
margin-bottom: 0;
}
.custom-seperator {
flex: 1;
height: 2px;
background: linear-gradient(90deg, #fff 45%, var(--primary-color));
}
.custom-seperator.cright {
flex: 1;
height: 2px;
background: linear-gradient(to left, #fff 45%, var(--primary-color));
}
.toplist-item-rating-start {
background: linear-gradient(90deg, red var(--rating-percent), grey var(--rating-percent));
background-clip: text;
width: fit-content;
font-size: 20px;
letter-spacing: 2px;
color: transparent;
}
.toplist {
display: flex;
flex-direction: column;
gap: 20px;
container: toplist / inline-size;
}
.toplist-item {
display: flex;
align-items: center;
flex-wrap: wrap;
background: #fff;
border-radius: 4px;
border: 1px solid #e5e5e5;
padding: 8px 5px;
box-shadow: 0 0 25px 0 rgb(0 0 0 / 20%);
position: relative;
gap: 8px;
}
.toplist-item-logo {
width: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.toplist-item-logo img {
margin: 0;
max-width: 80px;
}
.toplist-item-brand {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.toplist-item-brand-name {
font-size: 1.2rem;
font-weight: bold;
width: 100%;
}
.toplist-item-rating {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.toplist-item-action {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 10px;
}
.toplist-item-brand-num {
position: absolute;
}
.toplist-item-action a {
padding: 5px 8px;
border-radius: 25px;
background: var(--primary-color);
color: #fff;
font-size: 1.1rem;
width: 120px;
text-align: center;
}
.toplist-item-action a:hover {
color: #fff;
opacity: 0.8;
}
.toplist-item-action a:first-child {
animation: horizontal-shaking 0.5s linear infinite;
}
.toplist-item-action a:nth-child(2) {
background: #2ecc71;
}
.toplist-item-brand-num {
position: absolute;
top: -12px;
left: 10px;
width: 35px;
height: 35px;
border-radius: 4px;
background: var(--primary-color);
color: #fff;
text-align: center;
line-height: 35px;
font-size: 1.2rem;
}
@container toplist (min-width: 768px) {
.toplist-item {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 15px 5px;
}
.toplist-item-logo {
border-right: 1px solid #e5e5e5;
width: auto;
}
.toplist-item-logo img {
margin: 0;
max-width: 100px;
}
.toplist-item-brand {
width: auto;
padding: 5px;
border-right: 1px solid #e5e5e5;
}
.toplist-item-brand-name {
font-size: 1.3rem;
}
.toplist-item-brand-des {
font-size: 1.1rem;
font-weight: 500;
}
.toplist-item-rating {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid #e5e5e5;
width: auto;
}
.toplist-item-rating-point {
font-size: 1.2rem;
font-weight: bold;
}
.toplist-item-action {
flex-direction: column;
}
}
@keyframes horizontal-shaking {
0% {
transform: translateX(0)
}
25% {
transform: translateX(5px)
}
50% {
transform: translateX(-5px)
}
75% {
transform: translateX(5px)
}
100% {
transform: translateX(0)
}
} .hl-body ul {
list-style: none;
}
.hl-body {
background:#f3f3f3;
margin-top: 2px;
}
.hl-title {
background: var(--fb-primary-color);
padding: 3px 6px;
}
.hl-title h3 {
color: #fff !important;
margin: 0;
padding: 0;
font-size: 18px;
}
.hl-body ul {
margin-top: 0.5rem;
}
.hl-body ul li {
border-bottom: 1px solid #ececec;
margin-bottom: 0;
}
.hl-body ul li a {
padding: 5px;
display: block;
color: #333;
font-weight: 600;
font-size: 15px;
}
.hl-body ul li:hover {
background: var(--fb-primary-color);
}
.hl-body ul li:hover a {
color: #fff;
}
.hl-ads {
container: custom-widget / inline-size;
display: flex;
gap: 2px;
flex-direction: column;
}
.hl-ads a img {
width: 100%;
}
.page-wrapper {
padding-top: 7px;
}
.col {
padding: 0 7px 30px !important;
}
.league-links div {
visibility: hidden;
}
.custom-ads {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.custom-ads a {
min-width: 300px;
flex: 1;
}
.custom-ads a img {
display: block;
margin: 0 auto;
}
.sidebar-ads-wrp {
display: flex;
gap: 2px;
}
.sidebar-ads-list {
width: 50%;
display: flex;
gap: 2px;
flex-direction: column;
}
.sidebar-ads-list img {
width: 100%;
}
@media screen and (min-width: 768px) {
.box-list-schedule-all {
font-size: 15px !important;
}
}
@media screen and (max-width: 849px) {
.custom-od {
order: -1;
} }
@container custom-widget (min-width: 375px) {
.hl-ads a img {
width: auto;
}
}
@media only screen and (max-width: 48em) { }