/* ============================================================ [01.0] GLOBAL BASE ============================================================ */ /* ------------------------------------------------------------ [01.1] Reset & Normalization ------------------------------------------------------------ */ :root { /* Generic base colors */ --bg: #ffffff; --text: #000000; /* Generic button system (used by both themes) */ --btn-radius: 6px; --btn-font-size: 12px; --btn-font-weight: 500; --btn-padding-y: 3px; --btn-padding-x: 10px; --btn-secondary-bg: #dcdcdc; --btn-secondary-bg-hover: #e6e6e6; --btn-secondary-text: #444; } /* ------------------------------------------------------------ [01.2] Global Typography ------------------------------------------------------------ */ body { margin: 0; /* VAR NEEDED — suggested: --global-font-family Original value: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif Location: [01.2] Global Typography */ font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* VAR NEEDED — suggested: --global-background Original value: #000 url('peacefuljay-channel_background_image.jpeg') no-repeat center top fixed Location: [01.2] Global Typography */ background: #000 url('peacefuljay-channel_background_image.jpeg') no-repeat center top fixed; /* VAR NEEDED — suggested: --global-text-color Original value: #ddd Location: [01.2] Global Typography */ color: #ddd; } /* ------------------------------------------------------------ [01.3] Global Buttons ------------------------------------------------------------ */ /* (No global button selectors in your original file — variables only) */ /* ------------------------------------------------------------ [01.4] Global Containers ------------------------------------------------------------ */ /* (No global container selectors in your original file — variables only) */ /* ============================================================ [02.0] JTV 2011 THEME ============================================================ */ /* ------------------------------------------------------------ [02.1] 2011 VARIABLE DIRECTORY ------------------------------------------------------------ */ body.jtv2011, body.jtv2011-dark { /* NAVBAR */ --2011-navbar-bg: #202a32; --2011-navbar-text-color: #ffffff; --2011-navbar-font-family: "Inter", sans-serif; --2011-navbar-padding: 0 450px; --2011-navbar-position: relative; --2011-navbar-top: 0; --2011-navbar-z: 9; --2011-navbar-height: 120px; --2011-navbar-border-bottom: 1px solid #0f3c7a; --2011-navbar-shadow: 0 3px 6px rgba(0, 0, 0, 0.35); /* HEADER */ --2011-header-position: sticky; --2011-header-top: 0; --2011-header-z: 10; /* CHANNEL TITLE */ --2011-channel-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2011-channel-title-font-size: 16px; --2011-channel-title-font-weight: normal; --2011-channel-title-color: #000000; --2011-channel-title-margin: 0 0 10px 0; --2011-channel-title-padding: 0; --2011-channel-title-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* CHANNEL TITLE DARK */ --2011-channel-title-font-size-dark: 24px; --2011-channel-title-font-weight-dark: bold; --2011-channel-title-color-dark: #ffffff; --2011-channel-title-text-shadow-dark: 0 2px 4px #ffffff80; /* FOLLOW BUTTON */ --2011-follow-bg: linear-gradient(#589adb, #3d6b99); --2011-follow-text: #e0e7ef; --2011-follow-padding-y: 4px; --2011-follow-padding-x: 12px; --2011-follow-font-family: "Inter", Helvetica, Arial, sans-serif; --2011-follow-font-size: 12px; --2011-follow-font-weight: normal; --2011-follow-border-radius: 7px; --2011-follow-border: 1px solid #b5b5b5; --2011-follow-margin-right: 10px; --2011-follow-text-hover-dark: #ffffff; --2011-follow-text-shadow: 0 2px 4px #ffffffb3; --2011-follow-bg-hover-dark: #7fa6cc; --2011-follow-bg-shadow-dark: 0 0 10px #b6cce2b3; /* MAIN WRAPPER */ --2011-main-wrapper-display: block; --2011-main-wrapper-width: 100%; --2011-main-wrapper-max-width: 1000px; --2011-main-wrapper-margin: 0 auto 40px auto; --2011-main-wrapper-overflow: auto; /* CONTENT CONTAINER */ --2011-content-bg: #ffffff; --2011-content-border: 1px solid #c8c8c8; --2011-content-radius: 6px; --2011-content-padding: 15px; --2011-content-margin-top: 0; --2011-content-margin-bottom: 40px; --2011-content-margin-left: auto; --2011-content-margin-right: auto; --2011-content-shadow: 0 0 8px rgba(0, 0, 0, 0.15); --2011-content-position: relative; --2011-content-z: 10; --2011-content-display: block; /* COLUMNS */ --2011-left-column-float: left; --2011-left-column-width: 640px; --2011-left-column-box-sizing: border-box; --2011-right-column-float: left; --2011-right-column-width: 300px; --2011-right-column-margin-left: 15px; --2011-right-column-box-sizing: border-box; /* CHANNEL INFO LEFT */ --2011-channel-info-left-display: flex; --2011-channel-info-left-align-items: center; --2011-channel-info-left-gap: 10px; --2011-channel-info-left-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2011-channel-info-left-font-size: 14px; --2011-channel-info-left-font-weight: bold; --2011-channel-info-left-color: #000000; --2011-channel-info-left-color-dark: #ffffff; --2011-channel-info-left-margin: 0 0 5px 0; --2011-channel-info-left-padding: 0; /* CHANNEL INFO RIGHT */ --2011-channel-info-right-display: flex; --2011-channel-info-right-align-items: center; --2011-channel-info-right-gap: 8px; --2011-channel-info-right-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2011-channel-info-right-font-size: 13px; --2011-channel-info-right-font-weight: normal; --2011-channel-info-right-color: #000000; --2011-channel-info-right-margin: 0; --2011-channel-info-right-padding: 0; /* CHANNEL DESCRIPTION */ --2011-channel-description-font-family: "Inter Tight", Helvetica, Arial, sans-serif; --2011-channel-description-font-size: 13px; --2011-channel-description-font-weight: normal; --2011-channel-description-color: #000000; --2011-channel-description-color-dark: #ffffff; --2011-channel-description-line-height: 1.4; --2011-channel-description-margin: 4px 0 10px 0; --2011-channel-description-padding: 0; --2011-channel-description-max-width: 600px; --2011-channel-description-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* FACEBOOK BUTTON */ --2011-facebook-display: inline-flex; --2011-facebook-align-items: center; --2011-facebook-gap: 4px; --2011-facebook-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2011-facebook-font-size: 12px; --2011-facebook-font-weight: bold; --2011-facebook-color: #ffffff; --2011-facebook-bg: #3b5998; --2011-facebook-border: 1px solid #2d4373; --2011-facebook-radius: 3px; --2011-facebook-padding: 2px 6px; --2011-facebook-margin: 0; --2011-facebook-icon-size: 12px; --2011-facebook-icon-color: #ffffff; /* SPLIT PILL BUTTONS */ --2011-pill-font-family: "Inter Tight", Helvetica, Arial, sans-serif; --2011-pill-font-size: 12px; --2011-pill-font-weight: normal; --2011-pill-padding-y: 3px; --2011-pill-padding-x: 4px; --2011-pill-radius: 7px; --2011-pill-border: 1px solid rgba(0, 0, 0, 0.4); --2011-pill-gray-bg: linear-gradient(#c5d0db, #8a9199); --2011-pill-gray-text: #334d66; --2011-pill-blue-bg: linear-gradient(#589adb, #3d6b99); --2011-pill-blue-text: #ffffff; --2011-pill-gap: 0; --2011-pill-right-bg: #3d6b99; --2011-pill-right-text: #e0e7ef; --2011-pill-gray-bg-dark: #666666; --2011-pill-gray-text-dark: #e0e7ef; /* SUGGESTED CHANNELS */ --2011-sc-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2011-sc-title-font-size: 14px; --2011-sc-title-font-weight: bold; --2011-sc-title-color: #000000; --2011-sc-title-color-dark: #ffffff; --2011-sc-title-margin: 10px 0 8px 0; --2011-sc-item-display: flex; --2011-sc-item-gap: 8px; --2011-sc-item-padding: 6px 0; --2011-sc-thumb-width: 100px; --2011-sc-thumb-height: 58px; --2011-sc-thumb-radius: 3px; --2011-sc-thumb-bg: #444444; --2011-sc-info-font-family: "Inter", Helvetica, Arial, sans-serif; --2011-sc-info-font-size: 12px; --2011-sc-info-color: #3d6b99; --2011-sc-info-color-dark: #ffffff; --2011-sc-info-line-height: 1.3; --2011-sc-meta-font-size: 12px; --2011-sc-meta-color: #aaaaaa; /* VIDEO ARCHIVE */ --2011-va-item-display: flex; --2011-va-item-gap: 10px; --2011-va-item-padding: 10px 0; --2011-va-item-border-bottom: 1px solid rgba(255, 255, 255, 0.1); --2011-va-thumb-width: 120px; --2011-va-thumb-height: 90px; --2011-va-thumb-radius: 3px; --2011-va-thumb-bg: #444444; --2011-va-title-font-family: "Inter Tight", Helvetica, Arial, sans-serif; --2011-va-title-font-size: 13px; --2011-va-title-font-weight: normal; --2011-va-title-color: #3d6b99; --2011-va-title-color-dark: #ffffff; --2011-va-title-line-height: 1.3; --2011-va-meta-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2011-va-meta-font-size: 12px; --2011-va-meta-color: #000000; --2011-va-meta-line-height: 1.3; --2011-va-item-hover-bg: rgba(255, 255, 255, 0.05); /* MORE VIDEOS BUTTON */ --2011-more-videos-display: block; --2011-more-videos-width: 100%; --2011-more-videos-padding: 3px 0; --2011-more-videos-margin: 15px 0 0 0; --2011-more-videos-bg: linear-gradient(#c5d0db, #8a9199); --2011-more-videos-bg-hover: linear-gradient(#e0e6eb, #acb3b9); --2011-more-videos-border: 1px solid #000; --2011-more-videos-radius: 4px; --2011-more-videos-font-family: "Inter", Helvetica, Arial, sans-serif; --2011-more-videos-font-size: 12px; --2011-more-videos-font-weight: normal; --2011-more-videos-color: #334d66; --2011-more-videos-bg-hover-dark: #4d4d4d; --2011-more-videos-text-shadow-dark: 0 0 10px #ffffffb3; --2011-more-videos-box-shadow-dark: 0 0 10px #ffffffb3; /* NAVBAR COMPONENTS */ --2011-nav-font-size: 13px; --2011-nav-font-weight: 500; --2011-nav-link-hover-color: #ffffff; --2011-nav-pill-bg: #3b3b3b; --2011-nav-pill-bg-hover: #4a4a4a; --2011-nav-pill-text-color: #ffffff; --2011-nav-pill-padding: 6px 12px; --2011-nav-pill-radius: 20px; --2011-nav-search-bg: #ffffff; --2011-nav-search-border: 1px solid #cccccc; --2011-nav-search-radius: 20px 0 0 20px; --2011-nav-search-padding: 6px 12px; --2011-nav-search-button-bg: #e0e0e0; --2011-nav-search-button-bg-hover: #d0d0d0; --2011-nav-search-button-color: #333333; --2011-nav-search-button-radius: 0 20px 20px 0; /* FOOTER */ --2011-footer-z: -1; /* 2011 TAB BAR */ --2011-tabbar-bg: #f0f0f0; --2011-tabbar-border-bottom: 1px solid #4a90e2; --2011-tabbar-height: 32px; --2011-tab-font-family: "Inter", Helvetica, Arial, sans-serif; --2011-tab-font-size: 12px; --2011-tab-font-weight: normal; --2011-tab-color: #000000; --2011-tab-color-active: #000000; --2011-tab-padding: 0 14px; --2011-tab-border-right: 1px solid #2f2f2f; --2011-tab-active-underline: 3px solid #4a90e2; --2011-tab-active-border: 1px solid #4a90e2; --2011-tab-active-border-radius: 5px; /* 2011 FOOTER */ --2011-footer-bg: #2f2f2f; --2011-footer-text-color: #cccccc; --2011-footer-link-color: #b38bff; --2011-footer-link-hover-color: #d3b3ff; --2011-footer-padding: 0; --2011-footer-font-family: "Inter", Helvetica, Arial, sans-serif; --2011-footer-font-size: 12px; /* 2011 FOOTER PILL */ --2011-footer-pill-bg: #3a3a3a50; --2011-footer-pill-border: 1px solid #1f1f1f; --2011-footer-pill-radius: 16px; --2011-footer-pill-padding: 6px 12px; --2011-footer-pill-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); --2011-footer-pill-gap: 10px; /* CHANNEL INFO BOX */ --2011-info-box-bg: #ffffff; --2011-info-box-border: 1px solid #c8c8c8; --2011-info-box-radius: 4px; --2011-info-box-padding: 10px; /* VIDEO PLACEHOLDER */ --2011-video-ph-bg: #000000; --2011-video-ph-border: 1px solid #333333; --2011-video-ph-radius: 4px; --2011-video-ph-color: #cccccc; --2011-video-ph-margin-bottom: 15px; /* CHAT SECTION */ --2011-chat-section-bg: #111111; --2011-chat-section-border: 1px solid #333333; --2011-chat-section-radius: 4px; --2011-chat-section-padding: 10px; --2011-chat-section-color: #dddddd; /* CHAT BOX */ --2011-chat-box-bg: #000000; --2011-chat-box-border: 1px solid #444444; --2011-chat-box-radius: 4px; --2011-chat-box-padding: 8px; /* CHAT LINES */ --2011-chat-lines-height: 300px; --2011-chat-lines-margin-bottom: 10px; --2011-chat-line-border: 1px solid rgba(255, 255, 255, 0.05); --2011-chat-line-font-size: 12px; --2011-chat-line-padding: 2px 0; /* SUGGESTED CHANNELS (2011) */ --2011-sc-item-padding: 6px 0; --2011-sc-thumb-radius: 3px; --2011-sc-meta-font-size: 12px; --2011-sc-meta-color: #aaaaaa; /* VIDEO ARCHIVE (2011) */ --2011-va-item-padding: 10px 0; --2011-va-item-border-bottom: 1px solid rgba(255, 255, 255, 0.1); --2011-va-thumb-radius: 3px; --2011-va-title-margin-bottom: 4px; --2011-va-meta-font-size: 12px; --2011-va-meta-color: #000000; /* SPLIT PILL BUTTONS (2011) */ --2011-pill-margin-right: 10px; --2011-pill-divider: 1px solid rgba(0, 0, 0, 0.4); /* SHARE PILL (2011) */ --2011-share-pill-bg: linear-gradient(#c5d0db, #8a9199); --2011-share-pill-text: #334d66; --2011-share-pill-padding-y: 3px; --2011-share-pill-padding-x: 4px; --2011-share-pill-radius: 7px; --2011-share-pill-border: 1px solid rgba(0, 0, 0, 0.4); /* CHANNEL DESCRIPTION (2011) */ --2011-description-line-height: 1.4; /* CHANNEL INFO LEFT / RIGHT (2011) */ --2011-info-left-gap: 10px; --2011-info-right-gap: 8px; /* 2011 TAB BAR — NEW VARIABLES */ /* Tab bar container */ --2011-tabbar-bg: #f0f0f0; --2011-tabbar-border-bottom: 1px solid #4a90e2; --2011-tabbar-height: 32px; /* Inactive tabs */ --2011-tab-bg-top: #eeeeee; --2011-tab-bg-bottom: #dcdcdc; --2011-tab-text-color: #000000; --2011-tab-padding: 0 14px; --2011-tab-border-right: 1px solid #2f2f2f; /* Active tab */ --2011-tab-active-bg: #ffffff; --2011-tab-active-border: 1px solid #4a90e2; --2011-tab-active-radius-top: 5px; --2011-tab-active-radius-bottom: 5px; --2011-tab-active-text-color: #000000; /* Tab alignment + overlap */ --2011-tab-active-offset-y: 1px; --2011-tab-content-offset-y: -1px; /* Dark mode overrides */ --2011-tabbar-bg-dark: #1a1a1a; --2011-tab-bg-top-dark: #333333; --2011-tab-bg-bottom-dark: #222222; --2011-tab-text-color-dark: #dddddd; --2011-tab-active-bg-dark: #222222; --2011-tab-active-text-color-dark: #ffffff; --2011-tab-active-border-dark: 1px solid #7fa6cc; /* 2011 FOLLOW BUTTON LEFTOVERS */ --2011-follow-text-hover: #ffffff; --2011-follow-bg-hover: #7fa6cc; --2011-follow-bg-shadow: 0 0 10px #b6cce2b3; /* 2011 FACEBOOK BUTTON LEFTOVERS */ --2011-facebook-bg: #3b5998; --2011-facebook-border: 1px solid #2d4373; --2011-facebook-radius: 3px; --2011-facebook-padding: 2px 6px; --2011-facebook-icon-size: 12px; --2011-facebook-icon-color: #ffffff; /* 2011 NOW PLAYING TEXT */ --2011-np-user-color: #000000; --2011-np-doing-color: #000000; --2011-np-game-color: #3d6b99; --2011-np-font-size: 12px; /* 2011 DARK MODE NOW PLAYING */ --2011-np-user-color-dark: #ffffff; --2011-np-doing-color-dark: #ffffff; --2011-np-game-color-dark: #ffffff; /* 2011 FOOTER BEVELED LINK GROUP */ --2011-footer-pill-padding: 6px 12px; --2011-footer-pill-radius: 14px; --2011-footer-pill-bg: linear-gradient(to bottom, #1c2230 0%, #131822 100%); --2011-footer-pill-border: 1px solid #0b0e14; --2011-footer-pill-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.10), inset 0 -1px 2px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); --2011-footer-pill-gap: 14px; --2011-footer-link-blue: #8ab8e9; --2011-footer-link-blue-hover: #ffffff; /* Dark mode */ --2011-footer-pill-bg-dark: linear-gradient(to bottom, #11161f 0%, #0b0e14 100%); --2011-footer-pill-border-dark: 1px solid #000000; --2011-footer-pill-shadow-dark: inset 0 1px 2px rgba(255, 255, 255, 0.05), inset 0 -1px 2px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5); --2011-footer-link-blue-dark: #c8d0dd; --2011-footer-link-blue-hover-dark: #ffffff; } /* ============================================================ [02.2] 2011 VARIABLE MAPPING ============================================================ */ body.jtv2011, body.jtv2011-dark { /* NAVBAR */ --navbar-bg: var(--2011-navbar-bg); --navbar-text-color: var(--2011-navbar-text-color); --navbar-font-family: var(--2011-navbar-font-family); --navbar-padding: var(--2011-navbar-padding); --navbar-position: var(--2011-navbar-position); --navbar-top: var(--2011-navbar-top); --navbar-z: var(--2011-navbar-z); --navbar-height: var(--2011-navbar-height); --navbar-border-bottom: var(--2011-navbar-border-bottom); --navbar-shadow: var(--2011-navbar-shadow); /* HEADER */ --header-position: var(--2011-header-position); --header-top: var(--2011-header-top); --header-z: var(--2011-header-z); /* CHANNEL TITLE */ --channel-title-font-family: var(--2011-channel-title-font-family); --channel-title-font-size: var(--2011-channel-title-font-size); --channel-title-font-weight: var(--2011-channel-title-font-weight); --channel-title-color: var(--2011-channel-title-color); --channel-title-margin: var(--2011-channel-title-margin); --channel-title-padding: var(--2011-channel-title-padding); --channel-title-text-shadow: var(--2011-channel-title-text-shadow); /* CHANNEL TITLE DARK */ --channel-title-font-family-dark: var(--2011-channel-title-font-family); --channel-title-font-size-dark: var(--2011-channel-title-font-size-dark); --channel-title-font-weight-dark: var(--2011-channel-title-font-weight-dark); --channel-title-color-dark: var(--2011-channel-title-color-dark); --channel-title-margin-dark: var(--2011-channel-title-margin-dark); --channel-title-padding-dark: var(--2011-channel-title-padding-dark); --channel-title-text-shadow-dark: var(--2011-channel-title-text-shadow-dark); /* FOLLOW BUTTON */ --follow-button-background: var(--2011-follow-bg); --follow-button-text: var(--2011-follow-text); --follow-button-padding-y: var(--2011-follow-padding-y); --follow-button-padding-x: var(--2011-follow-padding-x); --follow-button-font-family: var(--2011-follow-font-family); --follow-button-font-size: var(--2011-follow-font-size); --follow-button-font-weight: var(--2011-follow-font-weight); --follow-button-border-radius: var(--2011-follow-border-radius); --follow-button-border: var(--2011-follow-border); --follow-button-margin-right: var(--2011-follow-margin-right); --follow-button-text-hover: var(--2011-follow-text-hover); --follow-button-text-hover-dark: var(--2011-follow-text-hover-dark); --follow-button-text-background-hover-dark: var(--2011-follow-bg-hover-dark); --follow-button-text-shadow: var(--2011-follow-text-shadow); --follow-button-background-shadow-dark: var(--2011-follow-bg-shadow-dark); /* MAIN WRAPPER */ --main-wrapper-display: var(--2011-main-wrapper-display); --main-wrapper-width: var(--2011-main-wrapper-width); --main-wrapper-max-width: var(--2011-main-wrapper-max-width); --main-wrapper-margin: var(--2011-main-wrapper-margin); --main-wrapper-overflow: var(--2011-main-wrapper-overflow); /* CONTENT CONTAINER */ --content-container-background: var(--2011-content-bg); --content-container-border: var(--2011-content-border); --content-container-border-radius: var(--2011-content-radius); --content-container-padding: var(--2011-content-padding); --content-container-margin-top: var(--2011-content-margin-top); --content-container-margin-bottom: var(--2011-content-margin-bottom); --content-container-margin-left: var(--2011-content-margin-left); --content-container-margin-right: var(--2011-content-margin-right); --content-container-box-shadow: var(--2011-content-shadow); --content-container-position: var(--2011-content-position); --content-container-z-index: var(--2011-content-z); --content-container-display: var(--2011-content-display); /* COLUMNS */ --left-column-float: var(--2011-left-column-float); --left-column-width: var(--2011-left-column-width); --left-column-box-sizing: var(--2011-left-column-box-sizing); --right-column-float: var(--2011-right-column-float); --right-column-width: var(--2011-right-column-width); --right-column-margin-left: var(--2011-right-column-margin-left); --right-column-box-sizing: var(--2011-right-column-box-sizing); /* CHANNEL INFO LEFT */ --channel-info-left-display: var(--2011-channel-info-left-display); --channel-info-left-align-items: var(--2011-channel-info-left-align-items); --channel-info-left-gap: var(--2011-channel-info-left-gap); --channel-info-left-font-family: var(--2011-channel-info-left-font-family); --channel-info-left-font-size: var(--2011-channel-info-left-font-size); --channel-info-left-font-weight: var(--2011-channel-info-left-font-weight); --channel-info-left-color: var(--2011-channel-info-left-color); --channel-info-left-color-dark: var(--2011-channel-info-left-color-dark); --channel-info-left-margin: var(--2011-channel-info-left-margin); --channel-info-left-padding: var(--2011-channel-info-left-padding); /* CHANNEL INFO RIGHT */ --channel-info-right-display: var(--2011-channel-info-right-display); --channel-info-right-align-items: var(--2011-channel-info-right-align-items); --channel-info-right-gap: var(--2011-channel-info-right-gap); --channel-info-right-font-family: var(--2011-channel-info-right-font-family); --channel-info-right-font-size: var(--2011-channel-info-right-font-size); --channel-info-right-font-weight: var(--2011-channel-info-right-font-weight); --channel-info-right-color: var(--2011-channel-info-right-color); --channel-info-right-margin: var(--2011-channel-info-right-margin); --channel-info-right-padding: var(--2011-channel-info-right-padding); /* CHANNEL DESCRIPTION */ --channel-description-font-family: var(--2011-channel-description-font-family); --channel-description-font-size: var(--2011-channel-description-font-size); --channel-description-font-weight: var(--2011-channel-description-font-weight); --channel-description-color: var(--2011-channel-description-color); --channel-description-color-dark: var(--2011-channel-description-color-dark); --channel-description-line-height: var(--2011-channel-description-line-height); --channel-description-margin: var(--2011-channel-description-margin); --channel-description-padding: var(--2011-channel-description-padding); --channel-description-max-width: var(--2011-channel-description-max-width); --channel-description-text-shadow: var(--2011-channel-description-text-shadow); /* FACEBOOK BUTTON */ --facebook-display: var(--2011-facebook-display); --facebook-align-items: var(--2011-facebook-align-items); --facebook-gap: var(--2011-facebook-gap); --facebook-font-family: var(--2011-facebook-font-family); --facebook-font-size: var(--2011-facebook-font-size); --facebook-font-weight: var(--2011-facebook-font-weight); --facebook-color: var(--2011-facebook-color); --facebook-bg: var(--2011-facebook-bg); --facebook-border: var(--2011-facebook-border); --facebook-radius: var(--2011-facebook-radius); --facebook-padding: var(--2011-facebook-padding); --facebook-margin: var(--2011-facebook-margin); /* SPLIT PILL BUTTONS */ --pill-font-family: var(--2011-pill-font-family); --pill-font-size: var(--2011-pill-font-size); --pill-font-weight: var(--2011-pill-font-weight); --pill-padding-y: var(--2011-pill-padding-y); --pill-padding-x: var(--2011-pill-padding-x); --pill-radius: var(--2011-pill-radius); --pill-border: var(--2011-pill-border); --pill-gray-bg: var(--2011-pill-gray-bg); --pill-gray-text: var(--2011-pill-gray-text); --pill-blue-bg: var(--2011-pill-blue-bg); --pill-blue-text: var(--2011-pill-blue-text); --pill-gap: var(--2011-pill-gap); --pill-right-bg: var(--2011-pill-right-bg); --pill-right-text: var(--2011-pill-right-text); --pill-gray-bg-dark: var(--2011-pill-gray-bg-dark); --pill-gray-text-dark: var(--2011-pill-gray-text-dark); /* SUGGESTED CHANNELS */ --sc-title-font-family: var(--2011-sc-title-font-family); --sc-title-font-size: var(--2011-sc-title-font-size); --sc-title-font-weight: var(--2011-sc-title-font-weight); --sc-title-color: var(--2011-sc-title-color); --sc-title-color-dark: var(--2011-sc-title-color-dark); --sc-title-margin: var(--2011-sc-title-margin); --sc-item-display: var(--2011-sc-item-display); --sc-item-gap: var(--2011-sc-item-gap); --sc-item-padding: var(--2011-sc-item-padding); --sc-thumb-width: var(--2011-sc-thumb-width); --sc-thumb-height: var(--2011-sc-thumb-height); --sc-thumb-radius: var(--2011-sc-thumb-radius); --sc-thumb-bg: var(--2011-sc-thumb-bg); --sc-info-font-family: var(--2011-sc-info-font-family); --sc-info-font-size: var(--2011-sc-info-font-size); --sc-info-color: var(--2011-sc-info-color); --sc-info-color-dark: var(--2011-sc-info-color-dark); --sc-info-line-height: var(--2011-sc-info-line-height); --sc-meta-font-size: var(--2011-sc-meta-font-size); --sc-meta-color: var(--2011-sc-meta-color); /* VIDEO ARCHIVE */ --va-item-display: var(--2011-va-item-display); --va-item-gap: var(--2011-va-item-gap); --va-item-padding: var(--2011-va-item-padding); --va-item-border-bottom: var(--2011-va-item-border-bottom); --va-thumb-width: var(--2011-va-thumb-width); --va-thumb-height: var(--2011-va-thumb-height); --va-thumb-radius: var(--2011-va-thumb-radius); --va-thumb-bg: var(--2011-va-thumb-bg); --va-title-font-family: var(--2011-va-title-font-family); --va-title-font-size: var(--2011-va-title-font-size); --va-title-font-weight: var(--2011-va-title-font-weight); --va-title-color: var(--2011-va-title-color); --va-title-color-dark: var(--2011-va-title-color-dark); --va-title-line-height: var(--2011-va-title-line-height); --va-meta-font-family: var(--2011-va-meta-font-family); --va-meta-font-size: var(--2011-va-meta-font-size); --va-meta-color: var(--2011-va-meta-color); --va-meta-line-height: var(--2011-va-meta-line-height); --va-item-hover-bg: var(--2011-va-item-hover-bg); /* MORE VIDEOS BUTTON */ --more-videos-display: var(--2011-more-videos-display); --more-videos-width: var(--2011-more-videos-width); --more-videos-padding: var(--2011-more-videos-padding); --more-videos-margin: var(--2011-more-videos-margin); --more-videos-bg: var(--2011-more-videos-bg); --more-videos-bg-hover: var(--2011-more-videos-bg-hover); --more-videos-border: var(--2011-more-videos-border); --more-videos-radius: var(--2011-more-videos-radius); --more-videos-font-family: var(--2011-more-videos-font-family); --more-videos-font-size: var(--2011-more-videos-font-size); --more-videos-font-weight: var(--2011-more-videos-font-weight); --more-videos-color: var(--2011-more-videos-color); --more-videos-bg-hover-dark: var(--2011-more-videos-bg-hover-dark); --more-videos-text-shadow-dark: var(--2011-more-videos-text-shadow-dark); --more-videos-box-shadow-dark: var(--2011-more-videos-box-shadow-dark); /* NAVBAR COMPONENTS */ --nav-font-size: var(--2011-nav-font-size); --nav-font-weight: var(--2011-nav-font-weight); --nav-link-hover-color: var(--2011-nav-link-hover-color); --nav-pill-bg: var(--2011-nav-pill-bg); --nav-pill-bg-hover: var(--2011-nav-pill-bg-hover); --nav-pill-text-color: var(--2011-nav-pill-text-color); --nav-pill-padding: var(--2011-nav-pill-padding); --nav-pill-radius: var(--2011-nav-pill-radius); --nav-search-bg: var(--2011-nav-search-bg); --nav-search-border: var(--2011-nav-search-border); --nav-search-radius: var(--2011-nav-search-radius); --nav-search-padding: var(--2011-nav-search-padding); --nav-search-button-bg: var(--2011-nav-search-button-bg); --nav-search-button-bg-hover: var(--2011-nav-search-button-bg-hover); --nav-search-button-color: var(--2011-nav-search-button-color); --nav-search-button-radius: var(--2011-nav-search-button-radius); --nav-search-button-bg: var(--2011-nav-search-button-bg); --nav-search-button-bg-hover: var(--2011-nav-search-button-bg-hover); --nav-search-button-color: var(--2011-nav-search-button-color); --nav-search-button-radius: var(--2011-nav-search-button-radius); /* FOOTER */ --footer-z: var(--2011-footer-z); /* TAB BAR */ --tabbar-bg: var(--2011-tabbar-bg); --tabbar-border-bottom: var(--2011-tabbar-border-bottom); --tabbar-height: var(--2011-tabbar-height); --tab-font-family: var(--2011-tab-font-family); --tab-font-size: var(--2011-tab-font-size); --tab-font-weight: var(--2011-tab-font-weight); --tab-color: var(--2011-tab-color); --tab-color-active: var(--2011-tab-color-active); --tab-padding: var(--2011-tab-padding); --tab-border-right: var(--2011-tab-border-right); --tab-active-underline: var(--2011-tab-active-underline); --tab-active-border: var(--2011-tab-active-border); --tab-active-border-radius: var(--2011-tab-active-border-radius); --footer-bg: var(--2011-footer-bg); --footer-text-color: var(--2011-footer-text-color); --footer-link-color: var(--2011-footer-link-color); --footer-link-hover-color: var(--2011-footer-link-hover-color); --footer-padding: var(--2011-footer-padding); --footer-font-family: var(--2011-footer-font-family); --footer-font-size: var(--2011-footer-font-size); --footer-pill-bg: var(--2011-footer-pill-bg); --footer-pill-border: var(--2011-footer-pill-border); --footer-pill-radius: var(--2011-footer-pill-radius); --footer-pill-padding: var(--2011-footer-pill-padding); --footer-pill-shadow: var(--2011-footer-pill-shadow); --footer-pill-gap: var(--2011-footer-pill-gap); } /* ============================================================ [02.3] 2011 BASE LAYOUT ============================================================ */ body.jtv2011 #main.page_wrapper, body.jtv2011-dark #main.page_wrapper { display: var(--main-wrapper-display); width: var(--main-wrapper-width); max-width: var(--main-wrapper-max-width); margin: var(--main-wrapper-margin); overflow: var(--main-wrapper-overflow); } body.jtv2011 #content_container, body.jtv2011-dark #content_container { background: var(--content-container-background); border: var(--content-container-border); border-radius: var(--content-container-border-radius); padding: var(--content-container-padding); margin-top: var(--content-container-margin-top); margin-bottom: var(--content-container-margin-bottom); margin-left: var(--content-container-margin-left); margin-right: var(--content-container-margin-right); box-shadow: var(--content-container-box-shadow); position: var(--content-container-position); z-index: var(--content-container-z-index); display: var(--content-container-display); } body.jtv2011 #left_column, body.jtv2011-dark #left_column { float: var(--left-column-float); width: var(--left-column-width); box-sizing: var(--left-column-box-sizing); } body.jtv2011 #right_column, body.jtv2011-dark #right_column { float: var(--right-column-float); width: var(--right-column-width); margin-left: var(--right-column-margin-left); box-sizing: var(--right-column-box-sizing); } body.jtv2011 #content_container::after, body.jtv2011 #main.page_wrapper::after, body.jtv2011-dark #content_container::after, body.jtv2011-dark #main.page_wrapper::after { content: ""; display: block; clear: both; } /* ============================================================ [02.4] 2011 NAVBAR — FLOAT-BASED ============================================================ */ /* ------------------------------------------------------------ [02.4.1] Header Wrapper ------------------------------------------------------------ */ body.jtv2011 #site_header, body.jtv2011-dark #site_header { position: var(--header-position); top: var(--header-top); z-index: var(--header-z); width: 100%; /* VAR NEEDED — suggested: --2011-header-height Original value: var(--navbar-height) Location: [02.4.1] Header Wrapper */ height: var(--navbar-height); display: block; } body.jtv2011 #site_header, body.jtv2011-dark #site_header { padding: 0; /* VAR NEEDED — suggested: --2011-header-margin-bottom Original value: -60px Location: [02.4.1] Header Wrapper */ margin-bottom: -60px; } /* ------------------------------------------------------------ [02.4.2] Top Navbar Strip ------------------------------------------------------------ */ body.jtv2011 #top_navbar, body.jtv2011-dark #top_navbar { height: var(--navbar-height); background: var(--navbar-bg); border-bottom: var(--navbar-border-bottom); padding: var(--navbar-padding); position: var(--navbar-position); top: var(--navbar-top); z-index: var(--navbar-z); box-shadow: var(--navbar-shadow); } body.jtv2011 #top_navbar, body.jtv2011-dark #top_navbar { margin-bottom: 0; padding-bottom: 0; } body.jtv2011 #content_container, body.jtv2011-dark #content_container { margin-top: 0; } /* ------------------------------------------------------------ [02.4.3] Navbar Inner Wrapper (1000px) ------------------------------------------------------------ */ body.jtv2011 #top_navbar .wrapper, body.jtv2011-dark #top_navbar .wrapper { display: block; /* VAR NEEDED — suggested: --2011-navbar-inner-width Original value: 1000px Location: [02.4.3] Navbar Inner Wrapper */ width: 1000px; margin: 0 auto; height: 100%; } /* ------------------------------------------------------------ [02.4.4] Navbar Columns (Left, Center, Right) ------------------------------------------------------------ */ body.jtv2011 #nav_left, body.jtv2011-dark #nav_left, body.jtv2011 #nav_center, body.jtv2011-dark #nav_center, body.jtv2011 #browse_games, body.jtv2011-dark #browse_games, body.jtv2011 #nav_right, body.jtv2011-dark #nav_right { float: left; display: block; height: 100%; } body.jtv2011 #nav_right, body.jtv2011-dark #nav_right { float: right; } /* ------------------------------------------------------------ [02.4.5] Navbar Links ------------------------------------------------------------ */ body.jtv2011 #top_navbar a, body.jtv2011 #top_navbar select, body.jtv2011-dark #top_navbar a, body.jtv2011-dark #top_navbar select { font-family: var(--navbar-font-family); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); color: var(--navbar-text-color); text-decoration: none; } body.jtv2011 #top_navbar a:hover, body.jtv2011-dark #top_navbar a:hover { color: var(--nav-link-hover-color); } /* ------------------------------------------------------------ [02.4.6] Signup / Login Buttons ------------------------------------------------------------ */ body.jtv2011 #nav_signup, body.jtv2011-dark #nav_signup { background: var(--nav-pill-bg); color: var(--nav-pill-text-color); padding: var(--nav-pill-padding); border-radius: var(--nav-pill-radius); margin-left: var(--2011-nav-pill-margin-left); } body.jtv2011 #nav_signup:hover, body.jtv2011-dark #nav_signup:hover { background: var(--nav-pill-bg-hover); } body.jtv2011 #nav_login, body.jtv2011-dark #nav_login { font-family: var(--navbar-font-family); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); color: var(--navbar-text-color); margin-left: var(--2011-nav-login-margin-left); } /* ------------------------------------------------------------ [02.4.7] Browse Games Link ------------------------------------------------------------ */ body.jtv2011 #browse_games, body.jtv2011-dark #browse_games { font-family: var(--navbar-font-family); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); color: var(--navbar-text-color); margin-left: var(--2011-browse-games-margin-left); display: flex; align-items: center; } /* ------------------------------------------------------------ [02.4.8] Search Form (2011 Pill Style) ------------------------------------------------------------ */ body.jtv2011 #search_form, body.jtv2011-dark #search_form { display: flex; align-items: center; margin-left: var(--2011-search-form-margin-left); } body.jtv2011 #search_input, body.jtv2011-dark #search_input { background: var(--nav-search-bg); border: var(--nav-search-border); border-radius: var(--nav-search-radius); padding: var(--nav-search-padding); font-family: var(--navbar-font-family); font-size: var(--nav-font-size); color: var(--2011-search-input-text-color); } body.jtv2011 #search_button, body.jtv2011-dark #search_button { background: var(--nav-search-button-bg); color: var(--nav-search-button-color); border: var(--nav-search-border); border-left: none; border-radius: var(--nav-search-button-radius); padding: var(--2011-search-button-padding); cursor: pointer; } body.jtv2011 #search_button:hover, body.jtv2011-dark #search_button:hover { background: var(--nav-search-button-bg-hover); } /* ------------------------------------------------------------ [02.4.9] Remove 2012 Navbar Elements ------------------------------------------------------------ */ body.jtv2011 #nav_search_wrapper, body.jtv2011 .nav-dot, body.jtv2011-dark #nav_search_wrapper, body.jtv2011-dark .nav-dot { display: none !important; } /* ------------------------------------------------------------ [02.4.10] Legacy 2011 Navbar Alignment Fixes ------------------------------------------------------------ */ body.jtv2011 #top_navbar .wrapper > *, body.jtv2011-dark #top_navbar .wrapper > * { margin: 0; padding: 0; /* VAR NEEDED — suggested: --2011-navbar-height-legacy Original value: var(--navbar-height-2011) Location: [02.4.10] Legacy Alignment */ line-height: var(--navbar-height); height: var(--navbar-height); display: inline-block; vertical-align: middle; } body.jtv2011-dark #top_navbar .wrapper > * { margin: 0 !important; padding: 0 !important; height: var(--navbar-height) !important; line-height: var(--navbar-height) !important; display: inline-block !important; vertical-align: middle !important; } /* ------------------------------------------------------------ [02.4.11] 2011 vs 2012 Navbar Visibility ------------------------------------------------------------ */ body.jtv2011 .nav-2011, body.jtv2011-dark .nav-2011 { display: inline-block; } body.jtv2011 #top_navbar .nav-2012, body.jtv2011-dark #top_navbar .nav-2012 { display: none !important; } /* ------------------------------------------------------------ [02.4.12] 2011 Navbar Modern Flex Upgrade ------------------------------------------------------------ */ body.jtv2011 #top_navbar, body.jtv2011-dark #top_navbar { padding: 0; /* VAR NEEDED — suggested: --2011-navbar-modern-height Original value: 72px Location: [02.4.12] Modern Flex Upgrade */ height: 72px; } body.jtv2011 #top_navbar .wrapper, body.jtv2011-dark #top_navbar .wrapper { display: flex; align-items: center; justify-content: space-between; /* VAR NEEDED — suggested: --2011-navbar-inner-width Original value: 1000px Location: [02.4.12] Modern Flex Upgrade */ width: 1000px; margin: 0 auto; gap: 12px; } /* ------------------------------------------------------------ [02.4.13] Normalize Right-Side Items ------------------------------------------------------------ */ body.jtv2011 #nav_right > *, body.jtv2011-dark #nav_right > * { margin: 0; /* VAR NEEDED — suggested: --2011-nav-right-padding Original value: 0 8px Location: [02.4.13] Right-Side Items */ padding: 0 8px; /* VAR NEEDED — suggested: --2011-nav-right-height Original value: 40px Location: [02.4.13] Right-Side Items */ line-height: 40px; height: 40px; } /* ------------------------------------------------------------ [02.4.14] Normalize Theme Select ------------------------------------------------------------ */ body.jtv2011 #theme_select, body.jtv2011-dark #theme_select { /* VAR NEEDED — suggested: --2011-theme-select-height Original value: 26px Location: [02.4.14] Theme Select */ height: 26px; /* VAR NEEDED — suggested: --2011-theme-select-line-height Original value: 26px Location: [02.4.14] Theme Select */ line-height: 26px; /* VAR NEEDED — suggested: --2011-theme-select-margin Original value: 0 4px 0 0 Location: [02.4.14] Theme Select */ margin: 0 4px 0 0; } /* ============================================================ [02.5] 2011 COMPONENTS ============================================================ */ /* ============================================================ [02.X] 2011 CHANNEL HEADER ============================================================ */ body.jtv2011 #channel_info_header, body.jtv2011-dark #channel_info_header { display: flex; justify-content: space-between; align-items: center; background: var(--2011-panel-bg); border: var(--2011-panel-border); border-radius: var(--2011-panel-radius); padding: 12px 16px; margin-bottom: 20px; } body.jtv2011 #channel_info_left, body.jtv2011-dark #channel_info_left { display: flex; align-items: center; gap: 12px; } body.jtv2011 #channel_info_right, body.jtv2011-dark #channel_info_right { display: flex; align-items: center; gap: 10px; } /* ------------------------------------------------------------ [02.5.4] Channel Description ------------------------------------------------------------ */ body.jtv2011 #channel_description, body.jtv2011-dark #channel_description { font-family: var(--channel-description-font-family); font-size: var(--channel-description-font-size); font-weight: var(--channel-description-font-weight); color: var(--channel-description-color); line-height: var(--channel-description-line-height); margin: var(--channel-description-margin); padding: var(--channel-description-padding); max-width: var(--channel-description-max-width); text-shadow: var(--channel-description-text-shadow); } body.jtv2011-dark #channel_description { color: var(--channel-description-color-dark); } /* ------------------------------------------------------------ [02.5.5] Facebook Button ------------------------------------------------------------ */ body.jtv2011 #channel_info_facebook, body.jtv2011-dark #channel_info_facebook { display: var(--facebook-display); align-items: var(--facebook-align-items); gap: var(--facebook-gap); font-family: var(--facebook-font-family); font-size: var(--facebook-font-size); font-weight: var(--facebook-font-weight); color: var(--facebook-color); background: var(--facebook-bg); border: var(--facebook-border); border-radius: var(--facebook-radius); padding: var(--facebook-padding); margin: var(--facebook-margin); text-decoration: none; cursor: pointer; } body.jtv2011 #channel_info_facebook .fb-icon, body.jtv2011-dark #channel_info_facebook .fb-icon { font-size: var(--facebook-icon-size); color: var(--facebook-icon-color); } /* ------------------------------------------------------------ [02.5.9] Suggested Channels (2011) ------------------------------------------------------------ */ body.jtv2011 #suggested_channels, body.jtv2011-dark #suggested_channels { margin-top: var(--sc-title-margin); } body.jtv2011 #suggested_channels .sc_title_header, body.jtv2011-dark #suggested_channels .sc_title_header { font-family: var(--sc-title-font-family); font-size: var(--sc-title-font-size); font-weight: var(--sc-title-font-weight); color: var(--sc-title-color); margin-bottom: var(--sc-title-margin); } body.jtv2011-dark #suggested_channels .sc_title_header { color: var(--sc-title-color-dark); } body.jtv2011 #suggested_channels .sc_item, body.jtv2011-dark #suggested_channels .sc_item { display: var(--sc-item-display); gap: var(--sc-item-gap); padding: var(--sc-item-padding); align-items: center; } body.jtv2011 #suggested_channels .sc_thumb, body.jtv2011-dark #suggested_channels .sc_thumb { width: var(--sc-thumb-width); height: var(--sc-thumb-height); background: var(--sc-thumb-bg); border-radius: var(--sc-thumb-radius); } body.jtv2011 #suggested_channels .sc_info, body.jtv2011-dark #suggested_channels .sc_info { font-family: var(--sc-info-font-family); font-size: var(--sc-info-font-size); color: var(--sc-info-color); line-height: var(--sc-info-line-height); } body.jtv2011-dark #suggested_channels .sc_info { color: var(--sc-info-color-dark); } body.jtv2011 #suggested_channels .sc_view_and_count, body.jtv2011-dark #suggested_channels .sc_view_and_count { font-size: var(--sc-meta-font-size); color: var(--sc-meta-color); } /* ------------------------------------------------------------ [02.5.10] Video Archive Items (2011) ------------------------------------------------------------ */ body.jtv2011 #video_archive .va_item, body.jtv2011-dark #video_archive .va_item { display: var(--va-item-display); gap: var(--va-item-gap); padding: var(--va-item-padding); border-bottom: var(--va-item-border-bottom); align-items: center; } body.jtv2011 #video_archive .va_thumb, body.jtv2011-dark #video_archive .va_thumb { width: var(--va-thumb-width); height: var(--va-thumb-height); background: var(--va-thumb-bg); border-radius: var(--va-thumb-radius); } body.jtv2011 #video_archive .va_info, body.jtv2011-dark #video_archive .va_info { display: flex; flex-direction: column; gap: 4px; } body.jtv2011 #video_archive .va_title, body.jtv2011-dark #video_archive .va_title { font-family: var(--va-title-font-family); font-size: var(--va-title-font-size); font-weight: var(--va-title-font-weight); color: var(--va-title-color); line-height: var(--va-title-line-height); } body.jtv2011-dark #video_archive .va_title { color: var(--va-title-color-dark); } body.jtv2011 #video_archive .va_meta, body.jtv2011-dark #video_archive .va_meta { font-family: var(--va-meta-font-family); font-size: var(--va-meta-font-size); color: var(--va-meta-color); line-height: var(--va-meta-line-height); } body.jtv2011 #video_archive .va_item:hover, body.jtv2011-dark #video_archive .va_item:hover { background: var(--va-item-hover-bg); } /* ------------------------------------------------------------ [02.5.11] More Videos Button (2011) ------------------------------------------------------------ */ body.jtv2011 #more_videos_button, body.jtv2011-dark #more_videos_button { display: var(--more-videos-display); width: var(--more-videos-width); padding: var(--more-videos-padding); margin: var(--more-videos-margin); background: var(--more-videos-bg); border: var(--more-videos-border); border-radius: var(--more-videos-radius); font-family: var(--more-videos-font-family); font-size: var(--more-videos-font-size); font-weight: var(--more-videos-font-weight); color: var(--more-videos-color); text-align: center; cursor: pointer; text-decoration: none; } body.jtv2011 #more_videos_button:hover { background: var(--more-videos-bg-hover); } body.jtv2011-dark #more_videos_button:hover { background: var(--more-videos-bg-hover-dark); text-shadow: var(--more-videos-text-shadow-dark); box-shadow: var(--more-videos-box-shadow-dark); } /* ============================================================ [02.6] 2011 TAB BAR ============================================================ */ body.jtv2011 #tab_bar, body.jtv2011-dark #tab_bar { background: var(--tabbar-bg); border-bottom: var(--tabbar-border-bottom); height: var(--tabbar-height); display: flex; align-items: center; gap: 0; } body.jtv2011-dark #tab_bar { background: var(--2011-tabbar-bg-dark); } body.jtv2011 #tab_bar .tab, body.jtv2011-dark #tab_bar .tab { font-family: var(--tab-font-family); font-size: var(--tab-font-size); font-weight: var(--tab-font-weight); color: var(--tab-color); padding: var(--tab-padding); border-right: var(--tab-border-right); cursor: pointer; display: flex; align-items: center; height: 100%; } body.jtv2011-dark #tab_bar .tab { color: var(--tab-text-color-dark); } body.jtv2011 #tab_bar .tab.active, body.jtv2011-dark #tab_bar .tab.active { color: var(--tab-color-active); border-bottom: var(--tab-active-underline); border: var(--tab-active-border); border-radius: var(--tab-active-border-radius); } body.jtv2011-dark #tab_bar .tab.active { background: var(--2011-tab-active-bg-dark); color: var(--2011-tab-active-text-color-dark); border: var(--2011-tab-active-border-dark); } /* ============================================================ [02.X] 2011 TAB CONTENT ============================================================ */ body.jtv2011 .tab_content, body.jtv2011-dark .tab_content { background: var(--2011-panel-bg); border: var(--2011-panel-border); border-radius: var(--2011-panel-radius); padding: 12px 16px; margin-bottom: 20px; } /* ============================================================ [02.7] 2011 FOOTER ============================================================ */ body.jtv2011 #navy_footer_bar, body.jtv2011-dark #navy_footer_bar { background: var(--footer-bg); color: var(--footer-text-color); padding: var(--footer-padding); font-family: var(--footer-font-family); font-size: var(--footer-font-size); text-align: center; width: 100%; z-index: var(--footer-z); } body.jtv2011 #navy_footer_bar a, body.jtv2011-dark #navy_footer_bar a { color: var(--footer-link-color); text-decoration: none; } body.jtv2011 #navy_footer_bar a:hover, body.jtv2011-dark #navy_footer_bar a:hover { color: var(--footer-link-hover-color); } /* ------------------------------------------------------------ [02.7.1] Footer Pill (Beveled Link Group) ------------------------------------------------------------ */ body.jtv2011 #navy_footer_bar .footer-pill, body.jtv2011-dark #navy_footer_bar .footer-pill { display: inline-flex; align-items: center; gap: var(--footer-pill-gap); background: var(--footer-pill-bg); border: var(--footer-pill-border); border-radius: var(--footer-pill-radius); padding: var(--footer-pill-padding); box-shadow: var(--footer-pill-shadow); margin: 10px 0; } body.jtv2011-dark #navy_footer_bar .footer-pill { background: var(--2011-footer-pill-bg-dark); border: var(--2011-footer-pill-border-dark); box-shadow: var(--2011-footer-pill-shadow-dark); } /* ------------------------------------------------------------ [02.7.2] Footer Pill Links ------------------------------------------------------------ */ body.jtv2011 #navy_footer_bar .footer-pill a, body.jtv2011-dark #navy_footer_bar .footer-pill a { color: var(--2011-footer-link-blue); font-weight: bold; text-decoration: none; } body.jtv2011 #navy_footer_bar .footer-pill a:hover, body.jtv2011-dark #navy_footer_bar .footer-pill a:hover { color: var(--2011-footer-link-blue-hover); } body.jtv2011-dark #navy_footer_bar .footer-pill a { color: var(--2011-footer-link-blue-dark); } body.jtv2011-dark #navy_footer_bar .footer-pill a:hover { color: var(--2011-footer-link-blue-hover-dark); } /* ============================================================ [02.X] 2011 CHAT SECTION ============================================================ */ body.jtv2011 #chat_section, body.jtv2011-dark #chat_section { background: var(--2011-panel-bg); border: var(--2011-panel-border); border-radius: var(--2011-panel-radius); padding: 12px 16px; margin-bottom: 20px; } body.jtv2011 #chat_section h2, body.jtv2011-dark #chat_section h2 { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: var(--2011-text-color); } body.jtv2011 #chat_box, body.jtv2011-dark #chat_box { background: var(--2011-panel-inner-bg); border-radius: var(--2011-panel-inner-radius); padding: 10px; max-height: 400px; overflow-y: auto; } /* ============================================================ [02.9] 2011 VIDEO PLACEHOLDER ============================================================ */ body.jtv2011 #player_placeholder, body.jtv2011-dark #player_placeholder { background: var(--2011-video-ph-bg); border: var(--2011-video-ph-border); border-radius: var(--2011-video-ph-radius); color: var(--2011-video-ph-color); padding: 20px; text-align: center; margin-bottom: var(--2011-video-ph-margin-bottom); font-family: "Inter", Helvetica, Arial, sans-serif; font-size: 14px; } /* ============================================================ [02.X] 2011 PLAYER SECTION ============================================================ */ body.jtv2011 #player_section, body.jtv2011-dark #player_section { background: var(--2011-panel-bg); border: var(--2011-panel-border); border-radius: var(--2011-panel-radius); padding: 12px 16px; margin-bottom: 20px; } body.jtv2011 #player_header, body.jtv2011-dark #player_header { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: var(--2011-text-color); } body.jtv2011 #player_embed, body.jtv2011-dark #player_embed { background: var(--2011-panel-inner-bg); border-radius: var(--2011-panel-inner-radius); padding: 10px; } /* ============================================================ [02.X] 2011 ABOUT SECTION ============================================================ */ body.jtv2011 #about_section, body.jtv2011-dark #about_section { background: var(--2011-panel-bg); border: var(--2011-panel-border); border-radius: var(--2011-panel-radius); padding: 12px 16px; margin-bottom: 20px; } body.jtv2011 #about_section h2, body.jtv2011-dark #about_section h2 { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: var(--2011-text-color); } body.jtv2011 #about_text, body.jtv2011-dark #about_text { font-size: 14px; line-height: 1.5; color: var(--2011-text-color); } /* ============================================================ [02.X] 2011 CHANNEL INFO DETAILS ============================================================ */ body.jtv2011 #channel_info_details, body.jtv2011-dark #channel_info_details { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } body.jtv2011 #channel_info_details .cid_item, body.jtv2011-dark #channel_info_details .cid_item { font-size: 14px; color: var(--2011-subtext-color); } /* ============================================================ [02.X] 2011 CHANNEL TITLE + AVATAR ============================================================ */ body.jtv2011 #channel_info_left, body.jtv2011-dark #channel_info_left { display: flex; align-items: center; gap: 12px; } body.jtv2011 #channel_avatar, body.jtv2011-dark #channel_avatar { width: 48px; height: 48px; border-radius: 4px; } body.jtv2011 #channel_title_block, body.jtv2011-dark #channel_title_block { display: flex; flex-direction: column; } body.jtv2011 #channel_title, body.jtv2011-dark #channel_title { font-size: 20px; font-weight: bold; color: var(--2011-text-color); } body.jtv2011 #channel_subtitle, body.jtv2011-dark #channel_subtitle { font-size: 14px; color: var(--2011-subtext-color); } /* ============================================================ [02.X] 2011 FOLLOW BUTTON ============================================================ */ body.jtv2011 #follow_button, body.jtv2011-dark #follow_button { padding: 6px 12px; font-size: 14px; font-weight: bold; background: var(--2011-accent); color: var(--2011-button-text); border: none; border-radius: 4px; cursor: pointer; } body.jtv2011 #follow_button:hover, body.jtv2011-dark #follow_button:hover { background: var(--2011-accent-hover); } /* ============================================================ [02.X] 2011 OFFLINE BANNER ============================================================ */ body.jtv2011 #offline_banner, body.jtv2011-dark #offline_banner { background: var(--2011-warning-bg); border: var(--2011-warning-border); color: var(--2011-warning-text); padding: 10px 14px; border-radius: 4px; margin-bottom: 20px; font-size: 14px; font-weight: bold; } body.jtv2011 #offline_text, body.jtv2011-dark #offline_text { margin: 0; } /* ============================================================ [02.X] 2011 STATUS INDICATOR ============================================================ */ body.jtv2011 #channel_status_indicator, body.jtv2011-dark #channel_status_indicator { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: bold; color: var(--2011-live-text); } body.jtv2011 #status_dot, body.jtv2011-dark #status_dot { width: 10px; height: 10px; background: var(--2011-live-dot); border-radius: 50%; } /* ============================================================ [03.0] JTV 2012 THEME ============================================================ */ /* ------------------------------------------------------------ [03.1] 2012 VARIABLE DIRECTORY ------------------------------------------------------------ */ body.jtv2012, body.jtv2012-dark { /* NAVBAR */ --2012-navbar-bg: #1e1e1e; --2012-navbar-text-color: #ffffff; --2012-navbar-font-family: "Inter", sans-serif; --2012-navbar-padding: 0 450px; --2012-navbar-position: relative; --2012-navbar-top: 0; --2012-navbar-z: 9; --2012-navbar-height: 72px; --2012-navbar-border-bottom: 1px solid #4a90e2; --2012-navbar-shadow: 0 3px 6px rgba(0, 0, 0, 0.35); /* HEADER */ --2012-header-position: sticky; --2012-header-top: 0; --2012-header-z: 10; /* CHANNEL TITLE */ --2012-channel-title-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2012-channel-title-font-size: 20px; --2012-channel-title-font-weight: bold; --2012-channel-title-color: #ffffff; --2012-channel-title-margin: 0 0 10px 0; --2012-channel-title-padding: 0; --2012-channel-title-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* FOLLOW BUTTON */ --2012-follow-bg: linear-gradient(#6a4fbf, #4a3a8a); --2012-follow-text: #ffffff; --2012-follow-padding-y: 5px; --2012-follow-padding-x: 14px; --2012-follow-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-follow-font-size: 13px; --2012-follow-font-weight: bold; --2012-follow-border-radius: 6px; --2012-follow-border: 1px solid #2d2d2d; --2012-follow-margin-right: 12px; --2012-follow-text-hover: #ffffff; --2012-follow-bg-hover: #7a5fd0; --2012-follow-bg-shadow: 0 0 10px #b6cce2b3; /* MAIN WRAPPER */ --2012-main-wrapper-display: block; --2012-main-wrapper-width: 100%; --2012-main-wrapper-max-width: 1000px; --2012-main-wrapper-margin: 0 auto 40px auto; --2012-main-wrapper-overflow: auto; /* CONTENT CONTAINER */ --2012-content-bg: #1e1e1e; --2012-content-border: 1px solid #333333; --2012-content-radius: 6px; --2012-content-padding: 20px; --2012-content-margin-top: 0; --2012-content-margin-bottom: 40px; --2012-content-margin-left: auto; --2012-content-margin-right: auto; --2012-content-shadow: 0 0 8px rgba(0, 0, 0, 0.25); --2012-content-position: relative; --2012-content-z: 10; --2012-content-display: block; /* COLUMNS */ --2012-left-column-float: left; --2012-left-column-width: 640px; --2012-left-column-box-sizing: border-box; --2012-right-column-float: left; --2012-right-column-width: 300px; --2012-right-column-margin-left: 15px; --2012-right-column-box-sizing: border-box; /* CHANNEL INFO LEFT */ --2012-channel-info-left-display: flex; --2012-channel-info-left-align-items: center; --2012-channel-info-left-gap: 10px; --2012-channel-info-left-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2012-channel-info-left-font-size: 15px; --2012-channel-info-left-font-weight: bold; --2012-channel-info-left-color: #ffffff; --2012-channel-info-left-margin: 0 0 5px 0; --2012-channel-info-left-padding: 0; /* CHANNEL INFO RIGHT */ --2012-channel-info-right-display: flex; --2012-channel-info-right-align-items: center; --2012-channel-info-right-gap: 8px; --2012-channel-info-right-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --2012-channel-info-right-font-size: 14px; --2012-channel-info-right-font-weight: normal; --2012-channel-info-right-color: #cccccc; --2012-channel-info-right-margin: 0; --2012-channel-info-right-padding: 0; /* CHANNEL DESCRIPTION */ --2012-channel-description-font-family: "Inter Tight", Helvetica, Arial, sans-serif; --2012-channel-description-font-size: 14px; --2012-channel-description-font-weight: normal; --2012-channel-description-color: #cccccc; --2012-channel-description-line-height: 1.5; --2012-channel-description-margin: 4px 0 10px 0; --2012-channel-description-padding: 0; --2012-channel-description-max-width: 600px; --2012-channel-description-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* FACEBOOK BUTTON */ --2012-facebook-display: inline-flex; --2012-facebook-align-items: center; --2012-facebook-gap: 6px; --2012-facebook-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-facebook-font-size: 13px; --2012-facebook-font-weight: bold; --2012-facebook-color: #ffffff; --2012-facebook-bg: #3b5998; --2012-facebook-border: 1px solid #2d4373; --2012-facebook-radius: 4px; --2012-facebook-padding: 4px 10px; --2012-facebook-margin: 0 0 10px 0; --2012-facebook-icon-size: 14px; --2012-facebook-icon-color: #ffffff; /* SPLIT PILL BUTTONS */ --2012-pill-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-pill-font-size: 13px; --2012-pill-font-weight: bold; --2012-pill-padding-y: 6px; --2012-pill-padding-x: 14px; --2012-pill-radius: 6px; --2012-pill-border: 1px solid #2d2d2d; --2012-pill-gray-bg: #2a2a2a; --2012-pill-gray-text: #cccccc; --2012-pill-blue-bg: #4a90e2; --2012-pill-blue-text: #ffffff; --2012-pill-gap: 0; --2012-pill-right-bg: #4a90e2; --2012-pill-right-text: #ffffff; /* SUGGESTED CHANNELS */ --2012-sc-title-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-sc-title-font-size: 16px; --2012-sc-title-font-weight: bold; --2012-sc-title-color: #ffffff; --2012-sc-title-margin: 20px 0 10px 0; --2012-sc-item-display: flex; --2012-sc-item-gap: 10px; --2012-sc-item-padding: 8px 0; --2012-sc-thumb-width: 48px; --2012-sc-thumb-height: 48px; --2012-sc-thumb-radius: 6px; --2012-sc-thumb-bg: #333333; --2012-sc-info-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-sc-info-font-size: 14px; --2012-sc-info-color: #cccccc; --2012-sc-info-line-height: 1.4; --2012-sc-meta-font-size: 12px; --2012-sc-meta-color: #999999; /* VIDEO ARCHIVE */ --2012-va-item-display: flex; --2012-va-item-gap: 10px; --2012-va-item-padding: 10px 0; --2012-va-item-border-bottom: 1px solid #333333; --2012-va-thumb-width: 120px; --2012-va-thumb-height: 68px; --2012-va-thumb-radius: 4px; --2012-va-thumb-bg: #333333; --2012-va-title-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-va-title-font-size: 15px; --2012-va-title-font-weight: bold; --2012-va-title-color: #ffffff; --2012-va-title-line-height: 1.4; --2012-va-meta-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-va-meta-font-size: 13px; --2012-va-meta-color: #cccccc; --2012-va-meta-line-height: 1.4; --2012-va-item-hover-bg: #2a2a2a; /* MORE VIDEOS BUTTON */ --2012-more-videos-display: block; --2012-more-videos-width: 100%; --2012-more-videos-padding: 10px 0; --2012-more-videos-margin: 20px 0; --2012-more-videos-bg: #4a90e2; --2012-more-videos-bg-hover: #5aa0f2; --2012-more-videos-border: 1px solid #2d2d2d; --2012-more-videos-radius: 6px; --2012-more-videos-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-more-videos-font-size: 14px; --2012-more-videos-font-weight: bold; --2012-more-videos-color: #ffffff; /* NAVBAR COMPONENTS */ --2012-nav-font-size: 14px; --2012-nav-font-weight: bold; --2012-nav-link-hover-color: #4a90e2; --2012-nav-pill-bg: #4a90e2; --2012-nav-pill-bg-hover: #5aa0f2; --2012-nav-pill-text-color: #ffffff; --2012-nav-pill-padding: 6px 14px; --2012-nav-pill-radius: 6px; --2012-nav-search-bg: #2a2a2a; --2012-nav-search-border: 1px solid #444444; --2012-nav-search-radius: 6px; --2012-nav-search-padding: 6px 10px; --2012-nav-search-button-bg: #4a90e2; --2012-nav-search-button-bg-hover: #5aa0f2; --2012-nav-search-button-color: #ffffff; --2012-nav-search-button-radius: 6px; /* FOOTER */ --2012-footer-bg: #1e1e1e; --2012-footer-text-color: #cccccc; --2012-footer-link-color: #4a90e2; --2012-footer-link-hover-color: #ffffff; --2012-footer-padding: 20px 0; --2012-footer-font-family: "Inter", Helvetica, Arial, sans-serif; --2012-footer-font-size: 14px; --2012-footer-z: 5; /* FOOTER PILL */ --2012-footer-pill-bg: linear-gradient(to bottom, #2a2a2a 0%, #1e1e1e 100%); --2012-footer-pill-border: 1px solid #000000; --2012-footer-pill-radius: 14px; --2012-footer-pill-padding: 6px 12px; --2012-footer-pill-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), inset 0 -1px 2px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5); --2012-footer-pill-gap: 14px; --2012-footer-link-blue: #8ab8e9; --2012-footer-link-blue-hover: #ffffff; } /* ============================================================ [03.2] 2012 VARIABLE MAPPING ============================================================ */ body.jtv2012, body.jtv2012-dark { /* NAVBAR */ --navbar-bg: var(--2012-navbar-bg); --navbar-text-color: var(--2012-navbar-text-color); --navbar-font-family: var(--2012-navbar-font-family); --navbar-padding: var(--2012-navbar-padding); --navbar-position: var(--2012-navbar-position); --navbar-top: var(--2012-navbar-top); --navbar-z: var(--2012-navbar-z); --navbar-height: var(--2012-navbar-height); --navbar-border-bottom: var(--2012-navbar-border-bottom); --navbar-shadow: var(--2012-navbar-shadow); /* HEADER */ --header-position: var(--2012-header-position); --header-top: var(--2012-header-top); --header-z: var(--2012-header-z); /* CHANNEL TITLE */ --channel-title-font-family: var(--2012-channel-title-font-family); --channel-title-font-size: var(--2012-channel-title-font-size); --channel-title-font-weight: var(--2012-channel-title-font-weight); --channel-title-color: var(--2012-channel-title-color); --channel-title-margin: var(--2012-channel-title-margin); --channel-title-padding: var(--2012-channel-title-padding); --channel-title-text-shadow: var(--2012-channel-title-text-shadow); /* FOLLOW BUTTON */ --follow-button-background: var(--2012-follow-bg); --follow-button-text: var(--2012-follow-text); --follow-button-padding-y: var(--2012-follow-padding-y); --follow-button-padding-x: var(--2012-follow-padding-x); --follow-button-font-family: var(--2012-follow-font-family); --follow-button-font-size: var(--2012-follow-font-size); --follow-button-font-weight: var(--2012-follow-font-weight); --follow-button-border-radius: var(--2012-follow-border-radius); --follow-button-border: var(--2012-follow-border); --follow-button-margin-right: var(--2012-follow-margin-right); --follow-button-text-hover: var(--2012-follow-text-hover); --follow-button-background-hover: var(--2012-follow-bg-hover); --follow-button-background-shadow: var(--2012-follow-bg-shadow); /* MAIN WRAPPER */ --main-wrapper-display: var(--2012-main-wrapper-display); --main-wrapper-width: var(--2012-main-wrapper-width); --main-wrapper-max-width: var(--2012-main-wrapper-max-width); --main-wrapper-margin: var(--2012-main-wrapper-margin); --main-wrapper-overflow: var(--2012-main-wrapper-overflow); /* CONTENT CONTAINER */ --content-container-background: var(--2012-content-bg); --content-container-border: var(--2012-content-border); --content-container-border-radius: var(--2012-content-radius); --content-container-padding: var(--2012-content-padding); --content-container-margin-top: var(--2012-content-margin-top); --content-container-margin-bottom: var(--2012-content-margin-bottom); --content-container-margin-left: var(--2012-content-margin-left); --content-container-margin-right: var(--2012-content-margin-right); --content-container-box-shadow: var(--2012-content-shadow); --content-container-position: var(--2012-content-position); --content-container-z-index: var(--2012-content-z); --content-container-display: var(--2012-content-display); /* COLUMNS */ --left-column-float: var(--2012-left-column-float); --left-column-width: var(--2012-left-column-width); --left-column-box-sizing: var(--2012-left-column-box-sizing); --right-column-float: var(--2012-right-column-float); --right-column-width: var(--2012-right-column-width); --right-column-margin-left: var(--2012-right-column-margin-left); --right-column-box-sizing: var(--2012-right-column-box-sizing); /* CHANNEL INFO LEFT */ --channel-info-left-display: var(--2012-channel-info-left-display); --channel-info-left-align-items: var(--2012-channel-info-left-align-items); --channel-info-left-gap: var(--2012-channel-info-left-gap); --channel-info-left-font-family: var(--2012-channel-info-left-font-family); --channel-info-left-font-size: var(--2012-channel-info-left-font-size); --channel-info-left-font-weight: var(--2012-channel-info-left-font-weight); --channel-info-left-color: var(--2012-channel-info-left-color); --channel-info-left-margin: var(--2012-channel-info-left-margin); --channel-info-left-padding: var(--2012-channel-info-left-padding); /* CHANNEL INFO RIGHT */ --channel-info-right-display: var(--2012-channel-info-right-display); --channel-info-right-align-items: var(--2012-channel-info-right-align-items); --channel-info-right-gap: var(--2012-channel-info-right-gap); --channel-info-right-font-family: var(--2012-channel-info-right-font-family); --channel-info-right-font-size: var(--2012-channel-info-right-font-size); --channel-info-right-font-weight: var(--2012-channel-info-right-font-weight); --channel-info-right-color: var(--2012-channel-info-right-color); --channel-info-right-margin: var(--2012-channel-info-right-margin); --channel-info-right-padding: var(--2012-channel-info-right-padding); /* CHANNEL DESCRIPTION */ --channel-description-font-family: var(--2012-channel-description-font-family); --channel-description-font-size: var(--2012-channel-description-font-size); --channel-description-font-weight: var(--2012-channel-description-font-weight); --channel-description-color: var(--2012-channel-description-color); --channel-description-line-height: var(--2012-channel-description-line-height); --channel-description-margin: var(--2012-channel-description-margin); --channel-description-padding: var(--2012-channel-description-padding); --channel-description-max-width: var(--2012-channel-description-max-width); --channel-description-text-shadow: var(--2012-channel-description-text-shadow); /* FACEBOOK BUTTON */ --facebook-display: var(--2012-facebook-display); --facebook-align-items: var(--2012-facebook-align-items); --facebook-gap: var(--2012-facebook-gap); --facebook-font-family: var(--2012-facebook-font-family); --facebook-font-size: var(--2012-facebook-font-size); --facebook-font-weight: var(--2012-facebook-font-weight); --facebook-color: var(--2012-facebook-color); --facebook-bg: var(--2012-facebook-bg); --facebook-border: var(--2012-facebook-border); --facebook-radius: var(--2012-facebook-radius); --facebook-padding: var(--2012-facebook-padding); --facebook-margin: var(--2012-facebook-margin); --facebook-icon-size: var(--2012-facebook-icon-size); --facebook-icon-color: var(--2012-facebook-icon-color); /* SPLIT PILL BUTTONS */ --pill-font-family: var(--2012-pill-font-family); --pill-font-size: var(--2012-pill-font-size); --pill-font-weight: var(--2012-pill-font-weight); --pill-padding-y: var(--2012-pill-padding-y); --pill-padding-x: var(--2012-pill-padding-x); --pill-radius: var(--2012-pill-radius); --pill-border: var(--2012-pill-border); --pill-gray-bg: var(--2012-pill-gray-bg); --pill-gray-text: var(--2012-pill-gray-text); --pill-blue-bg: var(--2012-pill-blue-bg); --pill-blue-text: var(--2012-pill-blue-text); --pill-gap: var(--2012-pill-gap); --pill-right-bg: var(--2012-pill-right-bg); --pill-right-text: var(--2012-pill-right-text); /* SUGGESTED CHANNELS */ --sc-title-font-family: var(--2012-sc-title-font-family); --sc-title-font-size: var(--2012-sc-title-font-size); --sc-title-font-weight: var(--2012-sc-title-font-weight); --sc-title-color: var(--2012-sc-title-color); --sc-title-margin: var(--2012-sc-title-margin); --sc-item-display: var(--2012-sc-item-display); --sc-item-gap: var(--2012-sc-item-gap); --sc-item-padding: var(--2012-sc-item-padding); --sc-thumb-width: var(--2012-sc-thumb-width); --sc-thumb-height: var(--2012-sc-thumb-height); --sc-thumb-radius: var(--2012-sc-thumb-radius); --sc-thumb-bg: var(--2012-sc-thumb-bg); --sc-info-font-family: var(--2012-sc-info-font-family); --sc-info-font-size: var(--2012-sc-info-font-size); --sc-info-color: var(--2012-sc-info-color); --sc-info-line-height: var(--2012-sc-info-line-height); --sc-meta-font-size: var(--2012-sc-meta-font-size); --sc-meta-color: var(--2012-sc-meta-color); /* VIDEO ARCHIVE */ --va-item-display: var(--2012-va-item-display); --va-item-gap: var(--2012-va-item-gap); --va-item-padding: var(--2012-va-item-padding); --va-item-border-bottom: var(--2012-va-item-border-bottom); --va-thumb-width: var(--2012-va-thumb-width); --va-thumb-height: var(--2012-va-thumb-height); --va-thumb-radius: var(--2012-va-thumb-radius); --va-thumb-bg: var(--2012-va-thumb-bg); --va-title-font-family: var(--2012-va-title-font-family); --va-title-font-size: var(--2012-va-title-font-size); --va-title-font-weight: var(--2012-va-title-font-weight); --va-title-color: var(--2012-va-title-color); --va-title-line-height: var(--2012-va-title-line-height); --va-meta-font-family: var(--2012-va-meta-font-family); --va-meta-font-size: var(--2012-va-meta-font-size); --va-meta-color: var(--2012-va-meta-color); --va-meta-line-height: var(--2012-va-meta-line-height); --va-item-hover-bg: var(--2012-va-item-hover-bg); /* MORE VIDEOS BUTTON */ --more-videos-display: var(--2012-more-videos-display); --more-videos-width: var(--2012-more-videos-width); --more-videos-padding: var(--2012-more-videos-padding); --more-videos-margin: var(--2012-more-videos-margin); --more-videos-bg: var(--2012-more-videos-bg); --more-videos-bg-hover: var(--2012-more-videos-bg-hover); --more-videos-border: var(--2012-more-videos-border); --more-videos-radius: var(--2012-more-videos-radius); --more-videos-font-family: var(--2012-more-videos-font-family); --more-videos-font-size: var(--2012-more-videos-font-size); --more-videos-font-weight: var(--2012-more-videos-font-weight); --more-videos-color: var(--2012-more-videos-color); /* NAVBAR COMPONENTS */ --nav-font-size: var(--2012-nav-font-size); --nav-font-weight: var(--2012-nav-font-weight); --nav-link-hover-color: var(--2012-nav-link-hover-color); --nav-pill-bg: var(--2012-nav-pill-bg); --nav-pill-bg-hover: var(--2012-nav-pill-bg-hover); --nav-pill-text-color: var(--2012-nav-pill-text-color); --nav-pill-padding: var(--2012-nav-pill-padding); --nav-pill-radius: var(--2012-nav-pill-radius); --nav-search-bg: var(--2012-nav-search-bg); --nav-search-border: var(--2012-nav-search-border); --nav-search-radius: var(--2012-nav-search-radius); --nav-search-padding: var(--2012-nav-search-padding); --nav-search-button-bg: var(--2012-nav-search-button-bg); --nav-search-button-bg-hover: var(--2012-nav-search-button-bg-hover); --nav-search-button-color: var(--2012-nav-search-button-color); --nav-search-button-radius: var(--2012-nav-search-button-radius); /* FOOTER */ --footer-bg: var(--2012-footer-bg); --footer-text-color: var(--2012-footer-text-color); --footer-link-color: var(--2012-footer-link-color); --footer-link-hover-color: var(--2012-footer-link-hover-color); --footer-padding: var(--2012-footer-padding); --footer-font-family: var(--2012-footer-font-family); --footer-font-size: var(--2012-footer-font-size); --footer-z: var(--2012-footer-z); /* FOOTER PILL */ --footer-pill-bg: var(--2012-footer-pill-bg); --footer-pill-border: var(--2012-footer-pill-border); --footer-pill-radius: var(--2012-footer-pill-radius); --footer-pill-padding: var(--2012-footer-pill-padding); --footer-pill-shadow: var(--2012-footer-pill-shadow); --footer-pill-gap: var(--2012-footer-pill-gap); --footer-link-blue: var(--2012-footer-link-blue); --footer-link-blue-hover: var(--2012-footer-link-blue-hover); } /* ============================================================ [03.3] 2012 BASE LAYOUT ============================================================ */ body.jtv2012 #main.page_wrapper, body.jtv2012-dark #main.page_wrapper { display: var(--main-wrapper-display); width: var(--main-wrapper-width); max-width: var(--main-wrapper-max-width); margin: var(--main-wrapper-margin); overflow: var(--main-wrapper-overflow); } body.jtv2012 #content_container, body.jtv2012-dark #content_container { background: var(--content-container-background); border: var(--content-container-border); border-radius: var(--content-container-border-radius); padding: var(--content-container-padding); margin-top: var(--content-container-margin-top); margin-bottom: var(--content-container-margin-bottom); margin-left: var(--content-container-margin-left); margin-right: var(--content-container-margin-right); box-shadow: var(--content-container-box-shadow); position: var(--content-container-position); z-index: var(--content-container-z-index); display: var(--content-container-display); } body.jtv2012 #left_column, body.jtv2012-dark #left_column { float: var(--left-column-float); width: var(--left-column-width); box-sizing: var(--left-column-box-sizing); } body.jtv2012 #right_column, body.jtv2012-dark #right_column { float: var(--right-column-float); width: var(--right-column-width); margin-left: var(--right-column-margin-left); box-sizing: var(--right-column-box-sizing); } /* ============================================================ [03.4] 2012 NAVBAR ============================================================ */ body.jtv2012 #top_navbar, body.jtv2012-dark #top_navbar { background: var(--navbar-bg); color: var(--navbar-text-color); font-family: var(--navbar-font-family); padding: var(--navbar-padding); position: var(--navbar-position); top: var(--navbar-top); z-index: var(--navbar-z); height: var(--navbar-height); border-bottom: var(--navbar-border-bottom); box-shadow: var(--navbar-shadow); display: flex; align-items: center; justify-content: center; } body.jtv2012 #top_navbar .wrapper, body.jtv2012-dark #top_navbar .wrapper { width: 1000px; display: flex; align-items: center; justify-content: space-between; } /* LEFT SIDE */ body.jtv2012 #nav_left, body.jtv2012-dark #nav_left { display: flex; align-items: center; gap: 14px; } /* RIGHT SIDE */ body.jtv2012 #nav_right, body.jtv2012-dark #nav_right { display: flex; align-items: center; gap: 14px; } /* ------------------------------------------------------------ [03.4.1] 2012 Navbar Links ------------------------------------------------------------ */ body.jtv2012 #top_navbar a, body.jtv2012-dark #top_navbar a { color: var(--navbar-text-color); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); text-decoration: none; cursor: pointer; } body.jtv2012 #top_navbar a:hover, body.jtv2012-dark #top_navbar a:hover { color: var(--nav-link-hover-color); } /* NAVBAR PILL BUTTON */ body.jtv2012 .nav-pill, body.jtv2012-dark .nav-pill { background: var(--nav-pill-bg); color: var(--nav-pill-text-color); padding: var(--nav-pill-padding); border-radius: var(--nav-pill-radius); font-weight: bold; text-decoration: none; cursor: pointer; } body.jtv2012 .nav-pill:hover, body.jtv2012-dark .nav-pill:hover { background: var(--nav-pill-bg-hover); } /* NAVBAR SEARCH BAR */ body.jtv2012 #nav_search_wrapper, body.jtv2012-dark #nav_search_wrapper { display: flex; align-items: center; gap: 6px; } body.jtv2012 #nav_search_wrapper input, body.jtv2012-dark #nav_search_wrapper input { background: var(--nav-search-bg); border: var(--nav-search-border); border-radius: var(--nav-search-radius); padding: var(--nav-search-padding); color: var(--navbar-text-color); font-size: 14px; } body.jtv2012 #nav_search_wrapper a, body.jtv2012-dark #nav_search_wrapper a { background: var(--nav-search-button-bg); color: var(--nav-search-button-color); border-radius: var(--nav-search-button-radius); padding: 6px 12px; font-weight: bold; cursor: pointer; border: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } body.jtv2012 #nav_search_wrapper a:hover, body.jtv2012-dark #nav_search_wrapper a:hover { background: var(--nav-search-button-bg-hover); } /* ============================================================ [03.5] 2012 CHANNEL HEADER ============================================================ */ body.jtv2012 #channel_header, body.jtv2012-dark #channel_header { margin-bottom: 20px; } /* ============================================================ [03.X] 2012 CHANNEL HEADER ============================================================ */ body.jtv2012 #channel_info_header, body.jtv2012-dark #channel_info_header { display: flex; justify-content: space-between; align-items: center; background: var(--2012-panel-bg); border: var(--2012-panel-border); border-radius: var(--2012-panel-radius); padding: 14px 18px; margin-bottom: 20px; } body.jtv2012 #channel_info_left, body.jtv2012-dark #channel_info_left { display: flex; align-items: center; gap: 14px; } body.jtv2012 #channel_info_right, body.jtv2012-dark #channel_info_right { display: flex; align-items: center; gap: 12px; } /* ============================================================ [03.X] 2012 CHAT SECTION ============================================================ */ body.jtv2012 #chat_section, body.jtv2012-dark #chat_section { background: var(--2012-panel-bg); border: var(--2012-panel-border); border-radius: var(--2012-panel-radius); padding: 14px 18px; margin-bottom: 20px; } body.jtv2012 #chat_section h2, body.jtv2012-dark #chat_section h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; color: var(--2012-text-color); } body.jtv2012 #chat_box, body.jtv2012-dark #chat_box { background: var(--2012-panel-inner-bg); border-radius: var(--2012-panel-inner-radius); padding: 12px; max-height: 420px; overflow-y: auto; } /* ============================================================ [03.X] 2012 PLAYER SECTION ============================================================ */ body.jtv2012 #player_section, body.jtv2012-dark #player_section { background: var(--2012-panel-bg); border: var(--2012-panel-border); border-radius: var(--2012-panel-radius); padding: 14px 18px; margin-bottom: 20px; } body.jtv2012 #player_header, body.jtv2012-dark #player_header { font-size: 17px; font-weight: 600; margin-bottom: 12px; color: var(--2012-text-color); } body.jtv2012 #player_embed, body.jtv2012-dark #player_embed { background: var(--2012-panel-inner-bg); border-radius: var(--2012-panel-inner-radius); padding: 12px; } /* ------------------------------------------------------------ [03.5.2] 2012 Facebook Button ------------------------------------------------------------ */ body.jtv2012 #channel_info_facebook, body.jtv2012-dark #channel_info_facebook { display: var(--facebook-display); align-items: var(--facebook-align-items); gap: var(--facebook-gap); font-family: var(--facebook-font-family); font-size: var(--facebook-font-size); font-weight: var(--facebook-font-weight); color: var(--facebook-color); background: var(--facebook-bg); border: var(--facebook-border); border-radius: var(--facebook-radius); padding: var(--facebook-padding); margin: var(--facebook-margin); cursor: pointer; text-decoration: none; } body.jtv2012 #channel_info_facebook:hover, body.jtv2012-dark #channel_info_facebook:hover { filter: brightness(1.1); } body.jtv2012 #channel_info_facebook .icon, body.jtv2012-dark #channel_info_facebook .icon { font-size: var(--facebook-icon-size); color: var(--facebook-icon-color); } /* ============================================================ [03.6] 2012 SUGGESTED CHANNELS ============================================================ */ body.jtv2012 #suggested_channels, body.jtv2012-dark #suggested_channels { margin-top: 20px; } body.jtv2012 #suggested_channels .sc_title, body.jtv2012-dark #suggested_channels .sc_title { font-family: var(--sc-title-font-family); font-size: var(--sc-title-font-size); font-weight: var(--sc-title-font-weight); color: var(--sc-title-color); margin: var(--sc-title-margin); } body.jtv2012 #suggested_channels .sc_item, body.jtv2012-dark #suggested_channels .sc_item { display: var(--sc-item-display); gap: var(--sc-item-gap); padding: var(--sc-item-padding); } body.jtv2012 #suggested_channels .sc_thumb, body.jtv2012-dark #suggested_channels .sc_thumb { width: var(--sc-thumb-width); height: var(--sc-thumb-height); border-radius: var(--sc-thumb-radius); background: var(--sc-thumb-bg); } body.jtv2012 #suggested_channels .sc_info, body.jtv2012-dark #suggested_channels .sc_info { font-family: var(--sc-info-font-family); font-size: var(--sc-info-font-size); color: var(--sc-info-color); line-height: var(--sc-info-line-height); } body.jtv2012 #suggested_channels .sc_view_and_count, body.jtv2012-dark #suggested_channels .sc_view_and_count { font-size: var(--sc-meta-font-size); color: var(--sc-meta-color); } /* ============================================================ [03.7] 2012 VIDEO ARCHIVE ============================================================ */ body.jtv2012 #video_archive, body.jtv2012-dark #video_archive { margin-top: 20px; } body.jtv2012 #video_archive .video_item, body.jtv2012-dark #video_archive .video_item { display: var(--va-item-display); gap: var(--va-item-gap); padding: var(--va-item-padding); border-bottom: var(--va-item-border-bottom); cursor: pointer; } body.jtv2012 #video_archive .item:hover, body.jtv2012-dark #video_archive .item:hover { background: var(--va-item-hover-bg); } body.jtv2012 #video_archive .thumb_placeholder, body.jtv2012-dark #video_archive .thumb_placeholder { width: var(--va-thumb-width); height: var(--va-thumb-height); border-radius: var(--va-thumb-radius); background: var(--va-thumb-bg); } body.jtv2012 #video_archive .video_title, body.jtv2012-dark #video_archive .video_title { font-family: var(--va-title-font-family); font-size: var(--va-title-font-size); font-weight: var(--va-title-font-weight); color: var(--va-title-color); line-height: var(--va-title-line-height); } body.jtv2012 #video_archive .video_meta, body.jtv2012-dark #video_archive .video_meta { font-family: var(--va-meta-font-family); font-size: var(--va-meta-font-size); color: var(--va-meta-color); line-height: var(--va-meta-line-height); } /* ------------------------------------------------------------ [03.7.1] 2012 More Videos Button ------------------------------------------------------------ */ body.jtv2012 #more_videos, body.jtv2012-dark #more_videos { display: var(--more-videos-display); width: var(--more-videos-width); padding: var(--more-videos-padding); margin: var(--more-videos-margin); background: var(--more-videos-bg); border: var(--more-videos-border); border-radius: var(--more-videos-radius); font-family: var(--more-videos-font-family); font-size: var(--more-videos-font-size); font-weight: var(--more-videos-font-weight); color: var(--more-videos-color); text-align: center; cursor: pointer; text-decoration: none; } body.jtv2012 #more_videos:hover, body.jtv2012-dark #more_videos:hover { background: var(--more-videos-bg-hover); } /* ============================================================ [03.8] 2012 FOOTER ============================================================ */ body.jtv2012 #navy_footer_bar, body.jtv2012-dark #navy_footer_bar { background: var(--footer-bg); color: var(--footer-text-color); padding: var(--footer-padding); font-family: var(--footer-font-family); font-size: var(--footer-font-size); text-align: center; z-index: var(--footer-z); } body.jtv2012 #navy_footer_bar a, body.jtv2012-dark #navy_footer_bar a { color: var(--footer-link-color); text-decoration: none; } body.jtv2012 #navy_footer_bar a:hover, body.jtv2012-dark #navy_footer_bar a:hover { color: var(--footer-link-hover-color); } /* FOOTER PILL */ body.jtv2012 #navy_footer_bar .pill, body.jtv2012-dark #navy_footer_bar .pill { background: var(--footer-pill-bg); border: var(--footer-pill-border); border-radius: var(--footer-pill-radius); padding: var(--footer-pill-padding); box-shadow: var(--footer-pill-shadow); display: inline-flex; align-items: center; gap: var(--footer-pill-gap); margin-top: 10px; } body.jtv2012 #navy_footer_barr .pill a, body.jtv2012-dark #navy_footer_bar .pill a { color: var(--footer-link-blue); font-weight: bold; } body.jtv2012 #navy_footer_bar .pill a:hover, body.jtv2012-dark #navy_footer_bar .pill a:hover { color: var(--footer-link-blue-hover); } /* ============================================================ [03.X] 2012 ABOUT SECTION ============================================================ */ body.jtv2012 #about_section, body.jtv2012-dark #about_section { background: var(--2012-panel-bg); border: var(--2012-panel-border); border-radius: var(--2012-panel-radius); padding: 14px 18px; margin-bottom: 20px; } body.jtv2012 #about_section h2, body.jtv2012-dark #about_section h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; color: var(--2012-text-color); } body.jtv2012 #about_text, body.jtv2012-dark #about_text { font-size: 15px; line-height: 1.55; color: var(--2012-text-color); } /* ============================================================ [03.X] 2012 TAB CONTENT ============================================================ */ body.jtv2012 .tab_content, body.jtv2012-dark .tab_content { background: var(--2012-panel-bg); border: var(--2012-panel-border); border-radius: var(--2012-panel-radius); padding: 14px 18px; margin-bottom: 20px; } /* ============================================================ [03.X] 2012 CHANNEL INFO DETAILS ============================================================ */ body.jtv2012 #channel_info_details, body.jtv2012-dark #channel_info_details { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } body.jtv2012 #channel_info_details .cid_item, body.jtv2012-dark #channel_info_details .cid_item { font-size: 15px; color: var(--2012-subtext-color); } /* ============================================================ [03.X] 2012 CHANNEL TITLE + AVATAR ============================================================ */ body.jtv2012 #channel_info_left, body.jtv2012-dark #channel_info_left { display: flex; align-items: center; gap: 14px; } body.jtv2012 #channel_avatar, body.jtv2012-dark #channel_avatar { width: 52px; height: 52px; border-radius: 6px; } body.jtv2012 #channel_title_block, body.jtv2012-dark #channel_title_block { display: flex; flex-direction: column; } body.jtv2012 #channel_title, body.jtv2012-dark #channel_title { font-size: 22px; font-weight: 600; color: var(--2012-text-color); } body.jtv2012 #channel_subtitle, body.jtv2012-dark #channel_subtitle { font-size: 15px; color: var(--2012-subtext-color); } /* ============================================================ [03.X] 2012 FOLLOW BUTTON ============================================================ */ body.jtv2012 #follow_button, body.jtv2012-dark #follow_button { padding: 7px 14px; font-size: 15px; font-weight: 600; background: var(--2012-accent); color: var(--2012-button-text); border: none; border-radius: 6px; cursor: pointer; } body.jtv2012 #follow_button:hover, body.jtv2012-dark #follow_button:hover { background: var(--2012-accent-hover); } /* ============================================================ [03.X] 2012 OFFLINE BANNER ============================================================ */ body.jtv2012 #offline_banner, body.jtv2012-dark #offline_banner { background: var(--2012-warning-bg); border: var(--2012-warning-border); color: var(--2012-warning-text); padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 15px; font-weight: 600; } body.jtv2012 #offline_text, body.jtv2012-dark #offline_text { margin: 0; } /* ============================================================ [02.X] 2011 STATUS INDICATOR ============================================================ */ body.jtv2011 #channel_status_indicator, body.jtv2011-dark #channel_status_indicator { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: bold; color: var(--2011-live-text); } body.jtv2011 #status_dot, body.jtv2011-dark #status_dot { width: 10px; height: 10px; background: var(--2011-live-dot); border-radius: 50%; } /* ============================================================ [04.0] DARK MODE ============================================================ */ body.jtv2012-dark { /* Override base colors for dark mode */ --navbar-bg: #1a1a1a; --navbar-text-color: #e0e0e0; --content-container-background: #1e1e1e; --content-container-border: 1px solid #333333; --content-container-box-shadow: none; --channel-title-color: #ffffff; --channel-info-left-color: #cccccc; --channel-info-right-color: #cccccc; --channel-description-color: #cccccc; --sc-title-color: #ffffff; --sc-info-color: #cccccc; --sc-meta-color: #999999; --va-title-color: #ffffff; --va-meta-color: #cccccc; --footer-bg: #1a1a1a; --footer-text-color: #cccccc; --footer-link-color: #8ab8e9; --footer-link-hover-color: #ffffff; } /* ============================================================ [05.0] 2013 MODE (THIS IS NEW) ============================================================ */ body.jtv2013, body.jtv2013-dark { /* GLOBAL */ --2013-font-family: "Helvetica Neue", Arial, sans-serif; --2013-text-color: #333333; --2013-bg: #ffffff; /* NAVBAR */ --2013-navbar-bg: #f8f8f8; --2013-navbar-text-color: #444444; --2013-navbar-border-bottom: 1px solid #e5e5e5; --2013-navbar-height: 50px; /* HEADER */ --2013-header-title-color: #222222; --2013-header-title-size: 26px; --2013-header-title-weight: bold; /* BUTTONS */ --2013-button-bg: #4a90e2; --2013-button-bg-hover: #3a78c2; --2013-button-text: #ffffff; --2013-button-radius: 4px; /* PANELS */ --2013-panel-bg: #fafafa; --2013-panel-border: 1px solid #dddddd; --2013-panel-radius: 4px; /* FOOTER */ --2013-footer-bg: #f0f0f0; --2013-footer-text-color: #666666; } /* ============================================================ [05.1] 2013 VARIABLE MAPPING ============================================================ */ body.jtv2013, body.jtv2013-dark { --main-wrapper-width: 100%; --main-wrapper-max-width: 1100px; --main-wrapper-margin: 0 auto; --content-container-background: var(--2013-panel-bg); --content-container-border: var(--2013-panel-border); --content-container-border-radius: var(--2013-panel-radius); --content-container-padding: 20px; --navbar-bg: var(--2013-navbar-bg); --navbar-text-color: var(--2013-navbar-text-color); --navbar-border-bottom: var(--2013-navbar-border-bottom); --navbar-height: var(--2013-navbar-height); --channel-title-color: var(--2013-header-title-color); --channel-title-font-size: var(--2013-header-title-size); --channel-title-font-weight: var(--2013-header-title-weight); --footer-bg: var(--2013-footer-bg); --footer-text-color: var(--2013-footer-text-color); } /* ============================================================ [05.2] 2013 BASE LAYOUT ============================================================ */ body.jtv2013, body.jtv2013-dark { background: var(--2013-bg); color: var(--2013-text-color); font-family: var(--2013-font-family); } body.jtv2013 #main.page_wrapper, body.jtv2013-dark #main.page_wrapper { width: var(--main-wrapper-width); max-width: var(--main-wrapper-max-width); margin: var(--main-wrapper-margin); } body.jtv2013 #content_container, body.jtv2013-dark #content_container { background: var(--content-container-background); border: var(--content-container-border); border-radius: var(--content-container-border-radius); padding: var(--content-container-padding); margin-bottom: 20px; } /* ============================================================ [05.3] 2013 NAVBAR ============================================================ */ body.jtv2013 #top_navbar, body.jtv2013-dark #top_navbar { background: var(--navbar-bg); border-bottom: var(--navbar-border-bottom); height: var(--navbar-height); display: flex; align-items: center; padding: 0 20px; } body.jtv2013 #top_navbar a, body.jtv2013-dark #top_navbar a { color: var(--navbar-text-color); font-size: 14px; font-weight: 500; text-decoration: none; margin-right: 20px; } body.jtv2013 #top_navbar a:hover, body.jtv2013-dark #top_navbar a:hover { color: #000000; } /* ============================================================ [04.5] 2013 TABS ============================================================ */ body.jtv2013 #channel_tabs .tabs, body.jtv2013-dark #channel_tabs .tabs { display: flex; gap: 10px; border-bottom: var(--2013-tab-border-bottom); margin-bottom: 15px; padding-bottom: 5px; } body.jtv2013 #channel_tabs .tabs li, body.jtv2013-dark #channel_tabs .tabs li { list-style: none; padding: 8px 14px; cursor: pointer; font-family: var(--2013-font-family); font-size: 14px; color: var(--2013-tab-color); border-radius: var(--2013-tab-radius); transition: background 0.15s ease, color 0.15s ease; } body.jtv2013 #channel_tabs .tabs li:hover, body.jtv2013-dark #channel_tabs .tabs li:hover { background: var(--2013-tab-hover-bg); color: var(--2013-tab-hover-color); } body.jtv2013 #channel_tabs .tabs li.active, body.jtv2013-dark #channel_tabs .tabs li.active { background: var(--2013-tab-active-bg); color: var(--2013-tab-active-color); border: var(--2013-tab-active-border); } body.jtv2013 .tab_content, body.jtv2013-dark .tab_content { background: var(--2013-panel-bg); border: var(--2013-panel-border); border-radius: var(--2013-panel-radius); padding: var(--2013-panel-padding); margin-bottom: 20px; } /* ============================================================ [05.4] 2013 CHANNEL HEADER ============================================================ */ body.jtv2013 #channel_header, body.jtv2013-dark #channel_header { margin-bottom: 20px; } body.jtv2013 #channel_title, body.jtv2013-dark #channel_title { font-family: var(--2013-font-family); font-size: var(--2013-header-title-size); font-weight: var(--2013-header-title-weight); color: var(--2013-header-title-color); margin-bottom: 10px; } body.jtv2013 #channel_description, body.jtv2013-dark #channel_description { font-family: var(--2013-font-family); font-size: 14px; color: var(--2013-text-color); line-height: 1.5; max-width: 700px; } /* ============================================================ [05.5] 2013 PANELS & WIDGETS ============================================================ */ body.jtv2013 #player_section, body.jtv2013-dark #player_section, body.jtv2013 #channel_tabs, body.jtv2013-dark #channel_tabs, body.jtv2013 #suggested_channels, body.jtv2013-dark #suggested_channels { background: var(--2013-panel-bg); border: var(--2013-panel-border); border-radius: var(--2013-panel-radius); padding: 15px; margin-bottom: 20px; } body.jtv2013 #chat_section h2, body.jtv2013-dark #chat_section h2, body.jtv2013 #suggested_channels .sc_title_header, body.jtv2013-dark #suggested_channels .sc_title_header, body.jtv2013 #channel_tabs .tabs li.active, body.jtv2013-dark #channel_tabs .tabs li.active { font-family: var(--2013-font-family); font-size: 18px; font-weight: bold; color: var(--2013-text-color); margin-bottom: 10px; } body.jtv2013 #chat_box, body.jtv2013-dark #chat_box, body.jtv2013 .video_list, body.jtv2013-dark .video_list, body.jtv2013 .tab_content, body.jtv2013-dark .tab_content, body.jtv2013 .sc_item, body.jtv2013-dark .sc_item { font-family: var(--2013-font-family); font-size: 14px; color: var(--2013-text-color); line-height: 1.5; } /* ============================================================ [04.X] 2013 PLAYER SECTION ============================================================ */ body.jtv2013 #player_section, body.jtv2013-dark #player_section { background: var(--2013-panel-bg); border: var(--2013-panel-border); border-radius: var(--2013-panel-radius); padding: var(--2013-panel-padding); margin-bottom: 20px; } body.jtv2013 #player_header, body.jtv2013-dark #player_header { font-size: 18px; font-weight: 600; margin-bottom: 14px; color: var(--2013-text-color); } body.jtv2013 #player_embed, body.jtv2013-dark #player_embed { background: var(--2013-panel-inner-bg); border-radius: var(--2013-panel-inner-radius); padding: 14px; } /* ============================================================ [04.X] 2013 CHAT SECTION ============================================================ */ body.jtv2013 #chat_section, body.jtv2013-dark #chat_section { background: var(--2013-panel-bg); border: var(--2013-panel-border); border-radius: var(--2013-panel-radius); padding: var(--2013-panel-padding); margin-bottom: 20px; } body.jtv2013 #chat_section h2, body.jtv2013-dark #chat_section h2 { font-size: 18px; font-weight: 600; margin-bottom: 14px; color: var(--2013-text-color); } body.jtv2013 #chat_box, body.jtv2013-dark #chat_box { background: var(--2013-panel-inner-bg); border-radius: var(--2013-panel-inner-radius); padding: 14px; max-height: 450px; overflow-y: auto; } /* ============================================================ [04.6] 2013 SUGGESTED CHANNELS ============================================================ */ body.jtv2013 #suggested_channels, body.jtv2013-dark #suggested_channels { background: var(--2013-panel-bg); border: var(--2013-panel-border); border-radius: var(--2013-panel-radius); padding: 15px; margin-bottom: 20px; } body.jtv2013 #suggested_channels .sc_item, body.jtv2013-dark #suggested_channels .sc_item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: var(--2013-divider); } body.jtv2013 #suggested_channels .sc_item:last-child, body.jtv2013-dark #suggested_channels .sc_item:last-child { border-bottom: none; } body.jtv2013 #suggested_channels .sc_thumb, body.jtv2013-dark #suggested_channels .sc_thumb { width: 48px; height: 48px; background: var(--2013-thumb-bg); border-radius: var(--2013-thumb-radius); overflow: hidden; } body.jtv2013 #suggested_channels .sc_info, body.jtv2013-dark #suggested_channels .sc_info { display: flex; flex-direction: column; } body.jtv2013 #suggested_channels .sc_title, body.jtv2013-dark #suggested_channels .sc_title { font-size: 14px; font-weight: 600; color: var(--2013-text-color); margin-bottom: 2px; } body.jtv2013 #suggested_channels .sc_view_and_count, body.jtv2013-dark #suggested_channels .sc_view_and_count { font-size: 12px; color: var(--2013-subtext-color); } /* ============================================================ [05.6] 2013 FOOTER ============================================================ */ body.jtv2013 #navy_footer_bar, body.jtv2013-dark #navy_footer_bar { background: var(--2013-footer-bg); color: var(--2013-footer-text-color); padding: 20px; text-align: center; font-family: var(--2013-font-family); font-size: 14px; margin-top: 40px; } body.jtv2013 #navy_footer_bar a, body.jtv2013-dark #navy_footer_bar a { color: var(--2013-text-color); text-decoration: none; font-weight: 500; } body.jtv2013 #navy_footer_bar a:hover, body.jtv2013-dark #navy_footer_bar a:hover { color: #000000; } /* ============================================================ [05.X] 2013 VIDEO PLACEHOLDER ============================================================ */ body.jtv2013 #player_placeholder, body.jtv2013-dark #player_placeholder { background: var(--2013-panel-bg); border: var(--2013-panel-border); border-radius: var(--2013-panel-radius); padding: 20px; text-align: center; margin-bottom: 20px; color: var(--2013-text-color); font-family: var(--2013-font-family); } /* ============================================================ [05.X] THEME VISIBILITY PATCH — 2013 MODE Ensures 2013 hides all 2011 + 2012 UI elements ============================================================ */ /* Hide 2011-only elements in 2013 */ body.jtv2013 .nav-2011, body.jtv2013-dark .nav-2011 { display: none !important; } /* Hide 2012-only elements in 2013 */ body.jtv2013 .nav-2012, body.jtv2013-dark .nav-2012 { display: none !important; } /* Optional: If 2013 has its own navbar, ensure it's visible */ body.jtv2013 #top_navbar, body.jtv2013-dark #top_navbar { display: flex !important; } /* ============================================================ [04.X] 2013 ABOUT SECTION ============================================================ */ body.jtv2013 #about_section, body.jtv2013-dark #about_section { background: var(--2013-panel-bg); border: var(--2013-panel-border); border-radius: var(--2013-panel-radius); padding: var(--2013-panel-padding); margin-bottom: 20px; } body.jtv2013 #about_section h2, body.jtv2013-dark #about_section h2 { font-size: 18px; font-weight: 600; margin-bottom: 14px; color: var(--2013-text-color); } body.jtv2013 #about_text, body.jtv2013-dark #about_text { font-size: 15px; line-height: 1.6; color: var(--2013-text-color); } /* ============================================================ [04.X] 2013 TAB CONTENT ============================================================ */ body.jtv2013 .tab_content, body.jtv2013-dark .tab_content { background: var(--2013-panel-bg); border: var(--2013-panel-border); border-radius: var(--2013-panel-radius); padding: var(--2013-panel-padding); margin-bottom: 20px; } /* ============================================================ [04.X] 2013 CHANNEL TITLE + AVATAR ============================================================ */ body.jtv2013 #channel_info_left, body.jtv2013-dark #channel_info_left { display: flex; align-items: center; gap: 16px; } body.jtv2013 #channel_avatar, body.jtv2013-dark #channel_avatar { width: 56px; height: 56px; border-radius: var(--2013-avatar-radius); } body.jtv2013 #channel_title_block, body.jtv2013-dark #channel_title_block { display: flex; flex-direction: column; } body.jtv2013 #channel_title, body.jtv2013-dark #channel_title { font-size: 24px; font-weight: 600; color: var(--2013-text-color); } body.jtv2013 #channel_subtitle, body.jtv2013-dark #channel_subtitle { font-size: 15px; color: var(--2013-subtext-color); } /* ============================================================ [04.X] 2013 FOLLOW BUTTON ============================================================ */ body.jtv2013 #follow_button, body.jtv2013-dark #follow_button { padding: 8px 16px; font-size: 15px; font-weight: 600; background: var(--2013-accent); color: var(--2013-button-text); border: none; border-radius: var(--2013-button-radius); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } body.jtv2013 #follow_button:hover, body.jtv2013-dark #follow_button:hover { background: var(--2013-accent-hover); color: var(--2013-button-text-hover); } /* ============================================================ [04.X] 2013 OFFLINE BANNER ============================================================ */ body.jtv2013 #offline_banner, body.jtv2013-dark #offline_banner { background: var(--2013-warning-bg); border: var(--2013-warning-border); color: var(--2013-warning-text); padding: var(--2013-panel-padding); border-radius: var(--2013-panel-radius); margin-bottom: 20px; font-size: 15px; font-weight: 600; } body.jtv2013 #offline_text, body.jtv2013-dark #offline_text { margin: 0; } /* ============================================================ [04.X] 2013 STATUS INDICATOR ============================================================ */ body.jtv2013 #channel_status_indicator, body.jtv2013-dark #channel_status_indicator { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--2013-live-bg); border-radius: var(--2013-badge-radius); font-size: 14px; font-weight: 600; color: var(--2013-live-text); } body.jtv2013 #status_dot, body.jtv2013-dark #status_dot { width: 10px; height: 10px; background: var(--2013-live-dot); border-radius: 50%; }