깔끔한 평가 모듈
BHL의 관련 부분을 무식하게 떼어왔다. CSS 변수를 넣어주면 아마 제대로 작동할 것.
정보
A
.page-rate-widget-box { --box-shadow: rgba(var(--swatch-menubg-black-color), 0.15); display: inline-flex; margin-bottom: 0.75rem; box-shadow: 0.0625rem 0.0625rem 0 rgba(12, 12, 12, 0.15); box-shadow: 0.0625rem 0.0625rem 0 var(--box-shadow); border: 0.0625rem solid rgba(12, 12, 12, 0.25); border: 0.0625rem solid rgba(var(--swatch-menubg-black-color), 0.25); border-radius: 0; background: linear-gradient(0deg, hsla(0, 0%, 66.7%, 0.25) 0, hsla(0, 0%, 66.7%, 0.15)); background: linear-gradient(to top, rgba(var(--swatch-tertiary-color), 0.25) 0, rgba(var(--swatch-tertiary-color), 0.15) 100%); background-color: #fcfcfc; background-color: rgb(var(--swatch-background)); padding: 0 0.125rem; height: var(--rating-module-height); overflow: hidden; } .rate-box-with-credit-button .page-rate-widget-box { box-shadow: none; border: none; border-radius: 0; background: 0 0; } .page-rate-widget-box .cancel, .page-rate-widget-box .rate-points, .page-rate-widget-box .ratedown, .page-rate-widget-box .rateup { display: block; margin: 0 0.125rem 0 0; border: none; } .page-rate-widget-box .cancel, .page-rate-widget-box .cancel a, .page-rate-widget-box .ratedown, .page-rate-widget-box .ratedown a, .page-rate-widget-box .rateup, .page-rate-widget-box .rateup a, .rate-box-with-credit-button > .creditButton, .rate-box-with-credit-button > .creditButton > p { display: block; transition: background-color 0.1s ease-in-out; padding: 0; width: 1.3125rem; width: calc(var(--base-font-size) * 0.93333 * 1.5); line-height: var(--rating-module-height); text-align: center; text-transform: uppercase; } .page-rate-widget-box .ratedown a, .page-rate-widget-box .rateup a { background: unset; background-color: none; background-color: rgba(100, 3, 15, 0.1); background-color: rgba(var(--swatch-primary-darkest), 0.1); } .page-rate-widget-box .cancel, .page-rate-widget-box .cancel a, .page-rate-widget-box .rate-points, .page-rate-widget-box .ratedown, .page-rate-widget-box .ratedown a, .page-rate-widget-box .rateup, .page-rate-widget-box .rateup a { --wght: 700; position: relative; background: 0 0; color: #0c0c0c; color: rgb(var(--rating-module-text-color)); font-weight: 700; } .page-rate-widget-box .cancel a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .rateup a { --wght: 700; position: relative; color: #0c0c0c; color: rgb(var(--rating-module-button-color)); font-weight: 700; } .page-rate-widget-box .cancel { font-size: 85%; } .page-rate-widget-box .cancel a:hover, .page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .rateup a:hover { text-decoration: none; } .page-rate-widget-box .rateup a:hover { background-color: rgba(var(--rating-module-button-plus-color), 0.8); } .page-rate-widget-box .ratedown a:hover { background-color: rgba(var(--rating-module-button-negative-color), 0.8); } .page-rate-widget-box .cancel a:hover { background-color: rgba(var(--rating-module-button-cancel-color), 0.8); } .page-rate-widget-box .rate-points { display: flex; background-color: transparent !important; padding: 0 0.4375rem; padding: 0 calc(var(--base-font-size) * 0.93333 * 0.5); color: #0c0c0c !important; color: rgb(var(--rating-module-text-color)) !important; font-size: 0.7rem; font-size: calc(var(--base-font-size) * 0.93333 * 0.8); line-height: var(--rating-module-height); text-transform: uppercase; } .page-rate-widget-box .rate-points .number { font-size: 1.05rem; font-size: calc(var(--base-font-size) * 0.93333 * 1.2); } @media screen { @media (min-width: 0px) { .page-rate-widget-box .cancel a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .rateup a { font-size: 0; } .page-rate-widget-box .cancel a:before, .page-rate-widget-box .ratedown a:before, .page-rate-widget-box .rateup a:before { -webkit-mask-size: calc(var(--rating-module-height) * 0.8); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; position: absolute; top: 0; left: 0; mask-position: center; mask-repeat: no-repeat; mask-size: calc(var(--rating-module-height) * 0.8); background-color: #0c0c0c; background-color: rgb(var(--rating-module-button-color)); width: 1.3125rem; width: calc(var(--base-font-size) * 0.93333 * 1.5); height: var(--rating-module-height); pointer-events: none; content: " "; } .page-rate-widget-box .rateup a:before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } .page-rate-widget-box .ratedown a:before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 13H5v-2h14v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } .page-rate-widget-box .cancel a:before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E"); } .page-rate-widget-box .cancel a:hover:before, .page-rate-widget-box .ratedown a:hover:before, .page-rate-widget-box .rateup a:hover:before { background-color: rgb(var(--rating-module-text-hover-color)); } } } #page-content .creditRate { margin-right: 0; margin-bottom: 0; } #page-content .rate-box-with-credit-button { --box-shadow: rgba(var(--swatch-menubg-black-color), 0.15); display: inline-flex; margin-bottom: 0.75rem; box-shadow: 0.0625rem 0.0625rem 0 rgba(12, 12, 12, 0.15); box-shadow: 0.0625rem 0.0625rem 0 var(--box-shadow); border: 0.0625rem solid rgba(12, 12, 12, 0.25); border: 0.0625rem solid rgba(var(--swatch-menubg-black-color), 0.25); border-radius: 0; background: linear-gradient(0deg, hsla(0, 0%, 66.7%, 0.25) 0, hsla(0, 0%, 66.7%, 0.15)); background: linear-gradient(to top, rgba(var(--swatch-tertiary-color), 0.25) 0, rgba(var(--swatch-tertiary-color), 0.15) 100%); background-color: #fcfcfc; background-color: rgb(var(--swatch-background)); padding: 0 0.125rem; height: var(--rating-module-height); overflow: hidden; } #page-content .rate-box-with-credit-button > .creditButton:hover { background: rgba(50, 50, 50, 0.1); } #page-content .rate-box-with-credit-button > .creditButton > p { display: block; position: relative; margin: 0; padding: 0; } #page-content .rate-box-with-credit-button > .creditButton > p, #page-content .rate-box-with-credit-button > .creditButton > p > a { width: calc(var(--rating-module-height) * 1.5); height: var(--rating-module-height); } #page-content .rate-box-with-credit-button > .creditButton > p > a { display: flex; margin-left: 0; border-left: none; font-size: 1em; } @media screen { @media (min-width: 0px) { #page-content .rate-box-with-credit-button > .creditButton > p > a:before { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 103 205.3' xml:space='preserve'%3E%3Cg fill='%23FFF'%3E%3Cpath d='M4.2 75.6c24.1-2.6 48.2-5.2 74.9-8.1v43.3c0 20.8.4 41.6-.2 62.3-.3 10.5 4 16.3 13.4 20 4 1.5 7.1 5.3 10.6 8-.8 1.4-1.6 2.8-2.4 4.3H3.2c-.9-1.1-1.7-2.3-2.6-3.4 3.3-2.7 6.2-7 9.9-7.8 11.4-2.3 15.3-9 15.2-19.9-.2-20.3-.6-40.5.1-60.8.4-11.8-4.4-18.1-15-22.3-4.4-1.8-7.4-7.2-11-11 1.6-1.6 3-3.1 4.4-4.6zM79.6 27c0 16.3-11 26.9-27.5 26.7-16.5-.2-26.2-9.9-26.2-26C25.9 10.7 36 0 52.4 0c16.2-.1 27.2 10.8 27.2 27z'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-size: calc(var(--rating-module-height) * 0.35); -webkit-mask-position: 0.3em center; -webkit-mask-repeat: no-repeat; position: absolute; top: 0; left: 0; mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' baseProfile='tiny' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 103 205.3' xml:space='preserve'%3E%3Cg fill='%23FFF'%3E%3Cpath d='M4.2 75.6c24.1-2.6 48.2-5.2 74.9-8.1v43.3c0 20.8.4 41.6-.2 62.3-.3 10.5 4 16.3 13.4 20 4 1.5 7.1 5.3 10.6 8-.8 1.4-1.6 2.8-2.4 4.3H3.2c-.9-1.1-1.7-2.3-2.6-3.4 3.3-2.7 6.2-7 9.9-7.8 11.4-2.3 15.3-9 15.2-19.9-.2-20.3-.6-40.5.1-60.8.4-11.8-4.4-18.1-15-22.3-4.4-1.8-7.4-7.2-11-11 1.6-1.6 3-3.1 4.4-4.6zM79.6 27c0 16.3-11 26.9-27.5 26.7-16.5-.2-26.2-9.9-26.2-26C25.9 10.7 36 0 52.4 0c16.2-.1 27.2 10.8 27.2 27z'/%3E%3C/g%3E%3C/svg%3E"); mask-position: 0.3em center; mask-repeat: no-repeat; mask-size: calc(var(--rating-module-height) * 0.35); background-color: #0c0c0c; background-color: rgb(var(--rating-module-button-color)); width: 1.3125rem; width: calc(var(--base-font-size) * 0.93333 * 1.5); height: var(--rating-module-height); pointer-events: none; content: " "; } #page-content .rate-box-with-credit-button > .creditButton > p > a:hover:before { background-color: rgb(var(--rating-module-button-credit-color)); } } } #page-content .rate-box-with-credit-button > .page-rate-widget-box { display: inline-flex; box-shadow: none; border-radius: 0; padding: 0 0.125rem; overflow: hidden; }
페이지 내역: 5, 마지막 수정: 08 Jun 2021 02:38