Skip to content

Instantly share code, notes, and snippets.

@hibiyasleep

hibiyasleep/_v-archive-tier.overlay.md

Last active September 21, 2023 04:24
Show Gist options
  • Save hibiyasleep/9e54a4aacb014faa3dc96cd78a1ad2cc to your computer and use it in GitHub Desktop.
Save hibiyasleep/9e54a4aacb014faa3dc96cd78a1ad2cc to your computer and use it in GitHub Desktop.
Download ZIP
v-archive 티어표 방송용 스타일시트 (비공식)
Raw
_v-archive-tier.overlay.md

image

대충이렇게됨.

사용법

요약: 이거 복사해서 OBS 브라우저 속성에 CSS에다 던지세요

  1. OBS에 브라우저를 추가하세요.
  2. URL을 선생님의 티어표로 맞추세요.
  3. (선택, 하면좋음) '상호작용'을 열어서 v-archive에 로그인하세요.
  4. 여기 있는 CSS 코드를 싹 긁어서 복사하세요.
  5. 브라우저 속성을 열고, '사용자 지정 CSS' 섹션에 통째로 붙여넣으세요.
  6. (선택) 원하시는 대로 옵션 숫자나 폰트를 조정하시면 OK

image

대충뭐이렇게

image

왼쪽위에 커서올리면 버튼전환이 떠요.

커스텀

:랑 ; 사이 값을 조절하면 됩니다.

  • font-size
    • 글자크기입니다. 기본 20px
  • row-height
    • 한 줄 높이입니다. 기본 36px
  • font
    • 폰트입니다. '폰트명', '폰트명' 식으로 작은따옴표로 묶어서 적으세요
  • numeric-font
    • 숫자 폰트인데 어긋날수도 있음
      왠만하면 바꾸지 말아보시고 바꾸실거면 Lato 부분만 바꾸세요
  • color-뭐시기
    • 제곧내. #rgba #rrggbbaa rgba(0, 0, 255, 1) …
  • order-뭐시기
    • 순서가 이 숫자를 바꿔줍니다. 아무 숫자나 괜찮음
  • display-뭐시기
    • 특정 항목을 가려줍니다.
      양옆의 /*와 */를 지우면 그 항목이 가려짐

면책조항

  • 이 스타일시트는 v-archive.net 티어표를 방송용으로 예쁘게 표시하기 위한 것입니다.
  • v-archive.net으로부터 허가/승인받은 것이 아니며, 그럴 필요도 크게 없고, 이 파일의 제작자가 그 쪽에 대해 아무런 관계나 책임은 없음을 이해해주세요.
    = 그 쪽으로 민원 보내지 마세요!!

변경기록

  • 1.11 (2023/09/21)
    • 공지가 여러개여도 제대로 가림
  • 1.10 (2023/09/04)
    • 이미지 상대경로로 가져오던 바보짓 수정
  • 1.9 (2023/09/03)
    • @import 버그 수정
  • 1.8 (2023/09/03)
    • NEW! 딱지 추가
  • 1.7 (2023/09/02)
    • 코드 가져오기를 @import로 변경
  • 1.6 (2023/09/02)
    • 레이팅 소수점 아래 끝전이 0인 경우에 대응
  • 1.5 (2023/09/02)
    • 산정레벨 없는거 또 고장나서 수정
  • 1.4 (2023/09/01)
    • 로그인 안 했을때 헤더 배경이 투명한 문제 수정
    • 버튼전환 추가
  • 1.3 (2023/09/01)
    • OBS 브라우저(Chrome 103)에서 헤더 배경이 안 뜨는 문제 수정
      이게 뭐하는 짓이지
  • 1.2 (2023/09/01)
    • OBS 브라우저(Chrome 103)에서 '정식 레벨' 표시가 이상해지는 문제 수정
Raw
index.css
/* v-archive-tier entry point, rv 1.11
* (c) 2023 hibiya inemuri <inemuri@hibiya.moe>
* https://gist.github.com/hibiyasleep/9e54a4aacb014faa3dc96cd78a1ad2cc
*/
@import url('https://gistcdn.githack.com/hibiyasleep/9e54a4aacb014faa3dc96cd78a1ad2cc/raw/v-archive-tier.overlay.css?v=1.11');
:root {
--font-size-header: 20px; /* 티어 부분 크기 배율 */
--font-size: 20px; /* 나머지 부분 크기 배율 */
--row-height: 40px; /* 한 줄 높이 */
--font: Lato, 'Source Han Sans K'; /* 본문 폰트 */
--numeric-font: '____', Lato; /* 숫자 폰트 (왠만하면바꾸지마세요 폰트에딱맞춘거있음) */
--color-maxcombo: #4ea8;
--color-perfect: #e33c;
--color-text: #fff;
--color-shadow: #000;
--color-background: #000c;
--order-index: 0; /* 순번 */
--order-jacket: 1; /* 재킷 */
--order-level: 2; /* 레벨 (산정) */
--order-level2: 3; /* 레벨 (인게임) */
--order-pattern: 4; /* 패턴종류 */
--order-title: 5; /* 제목 */
--order-score: 6; /* 레이트 */
--order-rating: 7; /* 스킬포인트 */
--show-pattern-name: 1; /* 0=숨김, 1=보임 */
--pattern-width: 8px;
/* 앞뒤 */ /*를 지우면 해당 항목이 가려집니다 */
--display-index: none;
/* --display-jacket: none; */
/* --display-level: none; */
--display-level2: none;
/* --display-title: none; */
/* --display-score: none; */
--display-rating: none;
/* --display-new-icon: none; */
}
Raw
v-archive-tier.overlay.css
/* v-archive-tier.css, rv 1.11 (2023/09/21)
* (c) 2023 hibiya inemuri <inemuri@hibiya.moe> CC BY-SA 4.0 (저작자표시, 동일조건변경허락)
* 이거 말고 이거 위에 걸 복사하세요
*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
:root {
--font-size-header: 20px; /* 티어 부분 크기 배율 */
--font-size: 20px; /* 나머지 부분 크기 배율 */
--row-height: 40px;
--font: Lato, 'Source Han Sans K';
--numeric-font: '____', Lato;
--color-maxcombo: #4ea8;
--color-perfect: #e33c;
--color-text: #fff;
--color-shadow: #000;
--color-background: #000c;
--order-index: 0; /* 순번 */
--order-jacket: 1; /* 재킷 */
--order-level: 2; /* 레벨 (산정) */
--order-level2: 3; /* 레벨 (인게임) */
--order-pattern: 4; /* 패턴종류 */
--order-title: 5; /* 제목 */
--order-score: 6; /* 레이트 */
--order-rating: 7; /* 스킬포인트 */
--show-pattern-name: 1; /* 0=숨김, 1=보임 */
--pattern-width: 8px;
/* --display-index: none; */
/* --display-jacket: none; */
/* --display-level: none; */
/* --display-level2: none; */
/* --display-title: none; */
/* --display-score: none; */
/* --display-rating: none; */
}
/**********/
@font-face {
/* '@' '(' ')' '/' 가려주는 전용 폰트 */
font-family: '____';
src: url('data:application/font-woff2;base64,d09GMgABAAAAAAIoAA0AAAAABXgAAAHRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cBmAAgmQIBBEICoEkgUALEgABNgIkAxgEIAWCQQcgG54EIK4LeDL+UWWILRGKo1rmohp+rkXvT4mH/9b43fdmZr9J9opYNG2WRKxaponVLQHppOgJb9A4Z/2Pbb6PVQhRTDqJ0Ggw1euLdStlsVpXxMgwqeP5RCBirk75qsXO/3Ecn3Z+XBQm8M5jyKMw7gKM/gCQdZ54oG3T0QB1PDCabnOPlyCqw0OPIIKmEPDp4SufbOq7Gn/jpUY+zvd4ileILzZHkloBEABw9Fo3xwMby8qQIXsQAFhBKChYQOAcVmABZy8YNyolVjiiAVhh0F8qYpihAB2ooOmIjgBEIgEAQYFK68AIX7SaD0EMJBgFsyAxinEsgXVgAwYGxLVOtKl6LN9rfLUf67/J7xNCSRCI+mWA0buwcftrpPrTs2sfGC+pO7TQpvuui//K4smE4OS9v/Pi9n8myvdj+0UQa7LHqARB9jgFEGsQAKDGHQoQhwAABEaNSpAIgd1CJDDttQCQAoQwIkAKUwIUi3oEqnAXgWbMIwE64ZUi6hhAEVJBSmMothJRpZto5p02O+kZXIzlQSdH97J/tbIgS4VioCUb00wiUKtIxT6DT5Wkd10t5MJYbuURIUuCOrh2zQj5mIWrm017JEvg9WNd47ICDGzhAAAA') format('woff2');
}
* {
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
html {
font-size: var(--font-size);
}
html, body, .bg_white {
font-family: var(--font);
background: transparent;
color: var(--color-text);
text-shadow: 0 0 0.125rem var(--color-shadow), 0 0 0.125rem var(--color-shadow), 0 0 0.5rem var(--color-shadow);
padding: 0;
}
body {
overflow-x: hidden;
overflow-y: scroll;
}
.head_notice.head_notice,
.top,
.header,
.footer,
.user_board_tools,
.layout a[class^="head_notice"] {
display: none;
}
.layout {
position: fixed; /* 상단 모바일형 광고 workaround, 광고 노출수는 아마도 집계 잘 될테니 걱정 마세요 */
top: 0;
width: 100vw !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.layout,
.rating_info,
.rating_list,
.tier_logo_area,
.rating_info .rating_detail,
.rating_list_row .pattern,
.rating_list_row .title{
margin: 0 !important;
padding: 0 !important;
width: unset;
max-width: unset !important;
min-height: unset;
}
.bg_eee {
background-color: transparent !important;
}
/**********/
.archive_top_menu {
position: fixed;
top: 0;
margin: 0;
border: 0;
width: unset;
height: unset;
padding: 1em;
background: black;
opacity: 0.000001;
z-index: 500000000000;
}
.archive_top_menu:hover {
opacity: 1;
}
.archive_top_menu .button.overall {
display: none;
}
.archive_top_menu .button.overall {
background: currentColor;
}
/**********/
.rating_info {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-header);
padding: 0 !important;
width: 100%;
--header-height: calc(var(--font-size-header) * 4);
height: var(--header-height);
text-indent: 0.75em;
background: transparent !important;
text-shadow: 0 0 0.125rem black, 0 0 0.5rem black;
overflow: hidden;
}
.rating_info::after {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
background: black;
z-index: -2000;
}
.tier_logo_area {
display: contents;
font-size: inherit;
}
.tier_logo_area .tier_header,
.tier_logo_area .tier_name {
width: unset !important;
position: unset !important;
line-height: 1.25em;
text-align: left;
}
.tier_logo_area .tier_header {
font-size: 1em;
}
.tier_logo_area .tier_name {
font-size: 1.5em;
}
.tier_logo_area > img {
position: absolute;
top: -1em;
right: -1.5em;
width: 9em !important;
z-index: 10;
mix-blend-mode: lighten;
}
/**********/
.rating_info .rating_detail,
.rating_info .rating_detail > div {
display: contents;
}
/* 레이팅 숫자 */
.rating_detail .rating_detail_row:nth-child(3) {
position: absolute;
top: 0;
right: calc(5.75 * var(--font-size-header));
bottom: 0;
font-size: clamp(1em, 9vw, 2.5em);
height: 1em;
margin: auto;
font-family: var(--numeric-font);
text-shadow: none;
filter: drop-shadow(0 0 0.125em #000) drop-shadow(0 0 0.5em #000);
overflow: hidden;
z-index: 50;
}
.rating_detail .rating_detail_row:nth-child(3) .value {
line-height: 1.1em;
font-variant-numeric: tabular-nums;
text-indent: 0;
min-width: 4.8775em;
margin-right: -1.74em; /* Lato: em scale=2000, numeric width=1160, dot width=475 */
}
/* 헤더 배경을 버튼에서 끌어씀 */
/* 로그인해야(=그래프 버튼이 있어야) 먹힘!! */
.rating_detail > div > .rating_detail_row:nth-child(3) .tier_history {
display: none;
}
button.tier_history {
border: none;
border-radius: 0;
}
button.tier_history > i {
display: none;
}
button.tier_history::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: var(--header-height);
background-size: cover;
background-position: center;
background-color: black;
z-index: -1000;
}
button.tier_history[data-button="4"]::after {
background-image: url('https://v-archive.net/static/images/bg/4B-BG.png');
}
button.tier_history[data-button="5"]::after {
background-image: url('https://v-archive.net/static/images/bg/5B-BG.png');
}
button.tier_history[data-button="6"]::after {
background-image: url('https://v-archive.net/static/images/bg/6B-BG.png');
}
button.tier_history[data-button="8"]::after {
background-image: url('https://v-archive.net/static/images/bg/8B-BG.png');
}
/* 정리 */
.rating_detail .label,
.rating_detail > div > div:nth-child(1),
.rating_detail > div > div:nth-child(4) {
display: none;
}
.rating_detail > div > div:nth-child(2) {
height: 0;
font-size: 0;
z-index: -1000;
}
.rating_info .rating_detail br,
.rating_info .rating_detail p {
display: none;
}
h1 {
display: none;
}
/**********/
.rating_list_row {
display: flex;
position: relative;
width: 100%;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: var(--row-height);
height: var(--row-height);
background: var(--color-background, #000c);
}
.rating_list_row,
.rating_list_row > div {
font-size: inherit;
border: none !important;
width: unset;
}
.rating_list_row a {
text-decoration: none;
}
.rating_list_header {
display: none;
}
/**********/
.rating_list_row .index {
display: var(--display-index, block);
order: var(--order-index);
}
.rating_list_row .record {
display: var(--display-jacket, block);
order: var(--order-jacket);
}
/* level/level2는 아래에서 */
.rating_list_row .title > a {
display: var(--display-pattern, block);
order: var(--order-pattern);
}
.rating_list_row .pattern {
display: var(--display-pattern, block);
order: var(--order-pattern);
}
.rating_list_row .score {
display: var(--display-score, block);
order: var(--order-score);
}
.rating_list_row .rating {
display: var(--display-rating, block);
order: var(--order-rating);
}
/**********/
.rating_list_row .index {
flex-basis: 2.25em;
font-size: 0.8em;
position: unset;
color: inherit;
}
.rating_list_row .index > span {
text-align: center;
}
.rating_list_row .record, .rating_list_row .jacket {
flex-basis: var(--row-height);
width: var(--row-height);
height: var(--row-height);
}
.rating_list_row .title {
display: contents;
}
.rating_list_row .title > a {
/* title */
display: block;
font-size: 1em;
min-width: 0;
max-width: unset !important;
text-indent: 0.5rem;
flex-grow: 10000;
}
.rating_list_row .title > .ago {
display: none !important;
}
.rating_list_row .new_icon {
display: var(--display-new-icon, inline-block);
order: 20;
width: 0;
height: 0;
margin: 0 0 0 -1em;
padding: 0;
text-indent: 1000000em;
background: transparent;
border: none;
border-radius: 0;
border-top: 1em solid yellow;
border-left: 1em solid transparent;
}
.rating_list_row .level,
.rating_list_row .score,
.rating_list_row .rating,
.rating_list_row .pattern {
position: unset !important;
flex-basis: unset;
flex-grow: 0;
flex-shrink: 0;
}
/*
* | level | level2
* level presents | + span | > a
* level not present | :not(:last-child) > a | :last-child::after
*
**/
.rating_list_row .level {
position: relative;
display: contents;
text-align: right;
font-family: var(--numeric-font);
font-variant-numeric: tabular-nums;
}
.rating_list_row .level > span {
margin: 0 !important;
font-size: 1em !important;
}
.rating_list_row .level > span[style] {
display: contents;
}
.rating_list_row .level > span[style] + span, /* 산정 */
.rating_list_row .level > span[style]:last-child::after, /* 산정 없을 때 공식 자리의 빈칸 */
.rating_list_row .level > span[style] > a /* 산정인 척 하는 공식 */ {
padding: 0 0.375em 0 0 !important;
}
/* 산정된 레벨 */
.rating_list_row .level > span[style]:last-child > a, /* 산정인 척 하는 공식 */
.rating_list_row .level > span[style] + span /* 산정 */ {
display: var(--display-level, block);
order: var(--order-level);
flex-basis: 3em;
flex-shrink: 0;
text-align: right;
}
/* 공식 레벨 */
.rating_list_row .level > span[style]:not(:last-child) /* <a>를 level2로 쓰겠다 */ {
display: var(--display-level2, contents);
}
.rating_list_row .level > span[style]:last-child::after, /* 산정 없을 때 공식 자리의 빈칸 */
.rating_list_row .level > span[style]:not(:last-child) > a /* 공식 */ {
box-sizing: border-box;
display: var(--display-level2, block);
order: var(--order-level2);
content: '';
flex-basis: 1.25rem;
flex-shrink: 0;
font-size: 0.75em !important;
opacity: 0.5;
}
/* 산정된 레벨이 없을 때 */
.rating_list_row .level > span[style]:last-child a::after {
content: '.0';
opacity: 0.25;
}
.rating_list_row .pattern {
--flag: clamp(0, var(--show-pattern-name), 1);
align-self: center;
flex-shrink: 0;
height: calc(1.5em * var(--flag) + 100% * (1 - var(--flag)));
line-height: 1.5em;
text-align: center;
text-shadow: none;
flex-basis: calc(2.25em * var(--flag) + var(--pattern-width) * (1 - var(--flag)));
font-size: calc(0.75em * var(--flag));
}
.rating_list_row .score {
grid-area: score;
padding: 0 0.375rem;
font-family: var(--numeric-font);
font-variant-numeric: tabular-nums;
/* text-align: center; */
color: #fff !important;
text-shadow: inherit;
}
.rating_list_row .score.score_clear {
background: none;
color: inherit !important;
}
.rating_list_row .score.score_maxcombo,
.rating_list_row .score.score_perfect {
text-shadow: 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.2em #000;
}
.rating_list_row .score.score_maxcombo {
background: var(--color-maxcombo, #4ea8);
}
.rating_list_row .score.score_perfect {
background: var(--color-perfect, #e33c) !important;
}
.rating_list_row .rating {
white-space: nowrap;
word-break: keep-all;
font-size: 0.75rem;
padding: 0 0.5rem;
/* width: unset !important; */
flex-basis: 5em;
}
.rating_list_row .rating .maxRating {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment